HTML&CSS 24일차 (정리x)

728x90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>필터</title>
</head>
<style>
    div{
      /*
        blur(x): 흐리게함, x는 길이. 작을수록 덜 흐려진다
        brightness(x): x는 비율. 100%를 기준으로 어둡게 혹은 밝게
        contrast(x): x는 비율. 100%를 기준으로 대비 조절(색 진하기 정도)
        grayscale(x): x는 비율. 0~100%까지 흑조사진으로 만든다
        invert(x): x는 비율. 이미지의 색을 반전
       */
      /* (주의)투명도나 필터 등은 내부 자식들도 적용 다됨 */
      filter: blur(3px);
      opacity: 0.7; /* 투명도 조절. 0~1까지 */
    }
</style>
<body>
    <div>
      안녕하세요
      <img src="cat.jpg" alt="#">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>반응형웹</title>
</head>
<style>
    body {
        background-image: url("https://images.unsplash.com/photo-1710390916960-3047fcdf561e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 가로 값이 1800px 이하라면 이거 적용하세요 */
    @media  screen and (max-width: 1800px) {
        body {
            background-image: url("https://images.unsplash.com/photo-1707147231430-7870dda96138?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
        }
    }

    /* 가로 값이 1200px 이하라면 이거 적용하세요 */
    @media  screen and (max-width: 1200px) {
        body {
            background-image: url("https://images.unsplash.com/photo-1710610383283-37ecdf156c60?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
        }
    }

</style>
<body>

</body>
</html>

728x90

저작자표시 비영리 변경금지 (새창열림)

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 실습8 (정리x) (0)	2024.03.23
HTML&CSS 25일차 (정리x) (0)	2024.03.23
HTML&CSS 23일차 (정리x) (0)	2024.03.23
HTML&CSS 22일차 (정리x) (0)	2024.03.23
HTML&CSS 21일차 (정리x) (0)	2024.03.23

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바