LGHV_3기_CSS 고급 선택자_HTML/CSS(10.3)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
17/34

Chap 10-3 CSS 고급 선택자

CSS 고급 선택자

5. CSS 함수 살펴보기

1. :root 가상 클래스

  • 문서의 최상위 요소 선택. 태그에 해당하는 부분
  • CSS 변수를 사용할 때

2. CSS 변수

  • 변수 이름 앞에 하이픈 (—) 2개를 붙임
  • 변수의 용도를 알 수 있도록 이름 붙이기

3. var( ) 함수

  • 사용자가 미리 만든 CSS 변수를 사용할 때
  • 괄호 안에 변수 이름 넣기

4. calc( ) 함수

  • 괄호 안에는 크기 값이나 각도, 시간, 백분율 숫자 등 다양한 단위 값을 사용한 계산식이 들어감.
  • ❗ 더하기나 빼기 연산자를 사용할 때는 반드시 연산자 앞 뒤에 공백
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 함수</title>
  <style>
    * {
      margin:0;
      padding:0;
      box-sizing: border-box;
    }

    /* calc() 함수로 너비 지정하기 */
    .heading {
      width: calc(100% - 80px);
      margin: auto;
      background-color: #222;
      color: #fff;
      padding: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 2px 2px 2px #000;    
    }
  </style>
</head>
<body>
  <div class="heading">
    <h1>CSS 함수</h1>
  </div>
</body>
</html>
  • 결과 )
    • ✅ .width: calc(100% - 80px);를 쓰면서
      ...
    .heading {
      width: calc(100% - 80px);
      margin: auto;
      ...
      width 100% 에서 양 쪽 40px 빼도록 설정

5. min( ), max( ) 함수

  • min( ) 함수 : 괄호 안에 나열된 값 중 가장 적은 값
  • max( ) 함수 : 괄호 안에 나열된 값 중 가장 큰 값
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 함수</title>
  <style>
    * {
      margin:0;
      padding:0;
      box-sizing: border-box;
    }
    /* min() 함수로 너비 지정하기 */
    .heading {
      width: min(500px, 700px); /* 300px와 700px 중 작은 값 -> 300px */      
      margin: auto;
      background-color: #222;
      color: #fff;
      padding: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 2px 2px 2px #000;    
    }
    /* max() 함수로 글자 크기 지정하기 */
    .heading h1 {
      font-size:max(2vw, 3rem);   /* 2vw, 3rem 중 큰 값 -> 3rem */
    }
  </style>
</head>
<body>
  <div class="heading">
    <h1>CSS 함수 - min()</h1>
  </div>
</body>
</html>
  • 결과 )
    • ✅ width: min(500px, 700px);와 font-size:max(2vw, 3rem);를 쓰면서
      ...
    .heading {
	      width: min(500px, 700px);
	      ...
	.heading h1 {
      font-size:max(2vw, 3rem);
  }
...
      min함수에서는 더 작은 값인 500px를 width 값으로,
      max함수에서는 더 큰 값인 3rem이 font-size로 설정됨

6. clam( ) 함수

  • 값의 범위 제한
  • 최솟값과 최적값, 최댓값 3가지 매개변수 사용
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 함수</title>
  <style>
    * {
      margin:0;
      padding:0;
      box-sizing: border-box;
    }

    .heading {
      background-color: #222;
      color: #fff;
      padding: 10px;
      text-align: center;
      font-weight: bold;
      text-shadow: 2px 2px 2px #000;    
    }

    /* clamp() 함수로 글자 크기 범위 지정하기 */
    .heading h1 {
      font-size: clamp(12px, 2.5vw, 25px);
    }
  </style>
</head>
<body>
  <div class="heading">
    <h1>CSS 함수</h1>
  </div>
</body>
</html>
  • 결과 )
    • ✅ font-size: clamp(12px, 2.5vw, 25px);를 쓰면서
      ...
    .heading h1 {
      font-size: clamp(12px, 2.5vw, 25px);
    }
...
      font-size는 기본적으로 2.5vw font-size를 따라가되,
      12px 보다 작아지지 않고, 25px 보다는 커지지 않음!

6. filter 속성과 함수들

1. filter 속성

  • 포토샵 없이 코드만으로 여러 가지 시작 효과 추가
  • filter : 함수

2. blur( ) 함수

  • 선택한 이미지에 블러(흐림) 효과 적용
  • 픽셀 단위로 흐림 정도 지정

filter 함수

속성설명
brightness()선택한 이미지를 좀 더 밝게 표시. 백분율이나 숫자 사용
contrast()대비 조절. 백분율 값 사용
dropshadow()그림자 적용. box-shadow 속성과 같은 매개변수 사용
grayscale()이미지를 흑백으로 변경. 백분율 사용
invert()이미지 색상 반전
sepia()이미지를 세피아톤으로 변경
opacity()이미지의 투명도 조절. 백분율 사용
hue-rotate()이미지에 있는 색상의 hue 값 회전시키기. 각도 사용
saturate()이미지의 채도 변경. 백분율 사용
  • 코드 예시 ) 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다양한 filter 함수</title>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .gallery img {
    width: 80%;
    border-radius: 50%;
  }
  .title {
    text-align: center;
    font-weight: bold;
    margin-bottom:20px;
  }
  .image-container {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    background: #f9f9f9;
  }

  /* filter 함수 사용해서 스타일 지정하기 */
  .blur { filter: blur(5px); }             /* 흐리게  */
  .brightness { filter: brightness(2); }   /* 밝기 2배로 */
  .contrast { filter: contrast(200%); }    /* 대비 2배로 */
  .drop-shadow { filter: drop-shadow(16px 16px 10px black); }  /* 그림자 추가 */
  .grayscale { filter: grayscale(100%); }  /* 회색조 */
  .invert { filter: invert(100%); }        /* 전체 색상 반전 */
  .sepia { filter: sepia(100%) }           /* 세피아 톤으로 변경 */
  .opacity { filter: opacity(50%); }       /* 반투명하게 */  
  .hue-rotate { filter: hue-rotate(90deg); }   /* 모든 hue 값을 90도 이동 */
  .saturate { filter: saturate(200%); }    /* 채도 2배로 */
</style>
</head>
<body>

<div class="orgin">
  <img src="images/cat.jpg" style="border-radius: 50%;">
</div>
<div class="gallery">
  <div class="image-container">
    <div class="title">filter:blur(5px)</div>
    <img src="images/cat.jpg" class="blur">
  </div>
  <div class="image-container">
    <div class="title">filter:brightness(2)</div>
    <img src="images/cat.jpg" class="brightness">
  </div>
  <div class="image-container">
    <div class="title">filter:contrast(200%)</div>
    <img src="images/cat.jpg" class="contrast">
  </div>
  <div class="image-container">
    <div class="title">filter:drop-shadow(16px 16px 10px black)</div>
    <img src="images/cat.jpg" class="drop-shadow">
  </div>
  <div class="image-container">
    <div class="title">filter:grayscale(100%)</div>
    <img src="images/cat.jpg" class="grayscale">
  </div>
  <div class="image-container">
    <div class="title">filter:invert(100%)</div>
    <img src="images/cat.jpg" class="invert">
  </div>
  <div class="image-container">
    <div class="title">filter:sepia(100%)</div>
    <img src="images/cat.jpg" class="sepia">
  </div>
  <div class="image-container">
    <div class="title">filter:opacity(50%)</div>
    <img src="images/cat.jpg" class="opacity">
  </div>
  <div class="image-container">
    <div class="title">filter:hue-rotate(90deg)</div>
    <img src="images/cat.jpg" class="hue-rotate">
  </div>
  <div class="image-container">
    <div class="title">filter:saturate(200%)</div>
    <img src="images/cat.jpg" class="saturate">
  </div>
</div>

</body>
</html>
  • 결과 )
profile
Pepzera
Hi
이전 포스트

LGHV_3기_CSS 고급 선택자_HTML/CSS(10.2)

다음 포스트

LGHV_3기_트랜지션과 애니메이션_HTML/CSS(11.1)

0개의 댓글