STUDY/[ React ]

CSS 가상 요소 , Clip Path

Lim임 2025. 11. 20. 18:10

CSS 학습 자료

1. CSS clip-path 속성

기본 개념

clip-path는 CSS에서 요소를 원하는 모양으로 자르는 속성입니다.

  • 직사각형 요소를 다양한 도형으로 자를 수 있음
  • 잘린 부분은 보이지 않음 (마스크 효과)
  • "포토샵 자르기 도구"를 CSS로 구현한 것

장기 프로젝트에서 사용 예시

팔각형 기물 만들기

clip-path: polygon(
  30% 0%,
  70% 0%,
  100% 30%,
  100% 70%,
  70% 100%,
  30% 100%,
  0% 70%,
  0% 30%
);

팔각형 좌표 시각화

    (30%,0%)──(70%,0%)
       /              \
(0%,30%)            (100%,30%)
    |                  |
(0%,70%)            (100%,70%)
       \              /
    (30%,100%)─(70%,100%)

8개의 점을 연결해서 팔각형을 만듭니다.

다양한 clip-path 예시

원형

clip-path: circle(50%);

삼각형

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

타원형

clip-path: ellipse(50% 40%);

별 모양

clip-path: polygon(
  50% 0%, 
  61% 35%, 
  98% 35%, 
  68% 57%, 
  79% 91%, 
  50% 70%, 
  21% 91%, 
  32% 57%, 
  2% 35%, 
  39% 35%
);

장기 기물에 적용된 원리

  1. 원래 상태: <div>는 사각형
  2. clip-path 적용: 팔각형으로 자름
  3. 결과: 배경색과 border가 팔각형 모양으로 보임

주의사항

  • clip-path가 적용된 요소에 box-shadow는 작동하지 않음
  • 그림자를 주려면 부모 요소에 filter: drop-shadow() 사용
  • 브라우저 호환성 확인 필요 (최신 브라우저는 대부분 지원)

참고 도구

2. CSS 가상 요소 (Pseudo-elements)

기본 개념

가상 요소는 HTML을 수정하지 않고 CSS만으로 요소를 추가할 수 있는 기능입니다.

주요 가상 요소

필수!!  content: "" 가상요소 생성 속성이 필요합니다~!

1. ::before

요소의 앞에 콘텐츠를 삽입합니다.

.box::before {
  content: '★ ';
  color: gold;
}
<div class="box">텍스트</div>
<!-- 결과: ★ 텍스트 -->

2. ::after

요소의 뒤에 콘텐츠를 삽입합니다.

.box::after {
  content: ' ✓';
  color: green;
}
<div class="box">완료</div>
<!-- 결과: 완료 ✓ -->

3. ::first-letter

첫 번째 글자만 스타일링합니다.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}
<p>Hello World</p>
<!-- H만 크고 빨간색 -->

4. ::first-line

첫 번째 줄만 스타일링합니다.

p::first-line {
  text-transform: uppercase;
  font-weight: bold;
}

5. ::selection

사용자가 선택(드래그)한 텍스트의 스타일을 지정합니다.

::selection {
  background-color: yellow;
  color: black;
}

6. ::placeholder

input의 placeholder 스타일을 지정합니다.

input::placeholder {
  color: #999;
  font-style: italic;
}

장기 프로젝트에서 사용 예시

대각선 그리기 (BoardCell)

.board-cell.diagonal::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
    linear-gradient(to top right, transparent calc(50% - 1px), #8b4513 calc(50% - 1px), #8b4513 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), #8b4513 calc(50% - 1px), #8b4513 calc(50% + 1px), transparent calc(50% + 1px));
}

문법 차이

가상 클래스 vs 가상 요소

/* 가상 클래스: 콜론 1개 (:) - 상태 선택 */
.button:hover { }
.item:first-child { }

/* 가상 요소: 콜론 2개 (::) - 요소 생성 */
.box::before { }
.box::after { }

실용 예시

1. 아이콘 추가

.link::before {
  content: '🔗 ';
}

2. 구분선 추가

.item:not(:last-child)::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-top: 10px;
}

3. 툴팁 말풍선

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  background: black;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
<span class="tooltip" data-tooltip="도움말 텍스트">?</span>

4. 체크 마크

.checkbox::before {
  content: '✓';
  display: none;
}

.checkbox.checked::before {
  display: inline-block;
  color: green;
}

주의사항

  1. content 속성 필수: ::before와 ::after는 반드시 content 속성이 있어야 합니다.
  2. .box::before { content: ''; /* 빈 값이라도 필수! */ }
  3. inline 요소에는 적용 안 됨: <img>, <input> 등에는 사용 불가
  4. 접근성 고려: 스크린 리더가 가상 요소의 content를 읽을 수 있으므로 중요한 정보는 HTML에 넣기

브라우저 지원

  • 모든 주요 브라우저에서 지원
  • IE8 이하에서는 :before, :after (콜론 1개) 사용