CodeGym/행동/Frontend SELF KO/장식용 의사 요소

장식용 의사 요소

사용 가능

9.1 의사 요소 ::before와 ::after

의사 요소 ::before::after는 HTML을 수정하지 않고도 요소 내용 앞이나 뒤에 장식 요소를 추가할 수 있는 CSS의 강력한 도구야. 시각적 효과를 만들고, 사용자 인터페이스를 개선하고, 요소에 스타일을 추가하는 데 널리 사용되고 있어.

설명:

  • ::before: 요소의 내용 앞에 추가되는 의사 요소
  • ::after: 요소의 내용 뒤에 추가되는 의사 요소

구문:

element::before {
  /* 의사 요소 before의 스타일 */
}

element::after {
  /* 의사 요소 after의 스타일 */
}

주요 속성

의사 요소 ::before::after는 색상, 크기, 위치, 배경, 그림자 등 거의 모든 CSS 속성을 포함할 수 있어. 하지만 의사 요소가 보이려면 반드시 콘텐츠와 크기를 설정해야 해.

  • content: 의사 요소의 내용을 설정. 텍스트나 이미지, 또는 빈 문자열이 될 수 있어
  • display: 의사 요소의 표시 유형을 설정. 일반적으로 block이나 inline-block이 사용돼
  • position: 의사 요소의 위치를 관리 (예: absoluterelative)
  • widthheight: 의사 요소의 크기를 설정

9.2 텍스트 추가

content 속성을 사용하여 쉽게 텍스트를 요소의 시작 또는 끝에 추가할 수 있어.

CSS
.example::before {
  content: "시작: ";
  color: blue;
}

.example::after {
  content: " :끝";
  color: red;
}
HTML
<body>
  <p class="example">이것은 예제 텍스트야</p>
</body>

코드 설명:

  • .example::before: 요소의 내용 앞에 "시작: "이라는 텍스트를 추가하고 파란색으로 염색
  • .example::after: 요소의 내용 뒤에 " :끝"이라는 텍스트를 추가하고 빨간색으로 염색

9.3 장식용 선

내용을 감싸는 장식용 선도 추가할 수 있어:

CSS
.decorative-line::before,
.decorative-line::after {
  content: "";
  display: block;
  height: 2px;
  background: black;
  margin: 10px 0;
}
HTML
<body>
  <div class="decorative-line">장식선이 있는 텍스트</div>
</body>

코드 설명:

  • .decorative-line::before: 요소 내용 앞에 장식용 선을 생성
  • .decorative-line::after: 요소 내용 뒤에 장식용 선을 생성

9.4 아이콘 삽입

텍스트가 부족하다면? 아이콘을 몇 개 추가할 수도 있어:

CSS
.icon::before {
  content: url('https://via.placeholder.com/20');
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
HTML
<body>
  <p class="icon">아이콘이 있는 텍스트</p>
</body>

코드 설명:

  • .icon::before: 이미지 URL을 사용하여 텍스트 앞에 아이콘 추가

9.5 복잡한 장식 요소

뭔가 더 복잡한 걸 추가해보자:

CSS
.complex-decor::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #f06, transparent);
  position: absolute;
  top: -10px;
  left: -10px;
}

.complex-decor {
  position: relative;
  padding: 20px;
  background: #eee;
  margin: 20px;
}
HTML
<body>
  <div class="complex-decor">장식된 모서리가 있는 요소</div>
</body>

코드 설명:

  • .complex-decor::before: 그라디언트와 절대 위치를 사용하여 주요 콘텐츠 앞에 장식 요소 생성
  • .complex-decor: 의사 요소가 요소에 상대적으로 위치할 수 있도록 부모 요소의 상대 위치 설정

9.6 애니메이션 사용

애니메이션도 추가할 수 있어:

CSS
.animated::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  animation: rotate 5s infinite;
  margin: 20px auto;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
HTML
<body>
  <div class="animated"></div>
</body>

코드 설명:

  • .animated::before: 사각형 의사 요소 생성 및 keyframes를 사용하여 회전시키는 애니메이션 적용
1
과제
Frontend SELF KO,  레벨 19레슨 3
잠금
가상 요소가 있는 텍스트
가상 요소가 있는 텍스트
1
과제
Frontend SELF KO,  레벨 19레슨 3
잠금
장식 라인
장식 라인
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다