CSS로 자유롭게 글과 이미지, 아이콘을 넣어보자 ::before, ::after

by

::before{content""} 혹은 ::after{content""}는 html을 직접 제어할 수 없거나(플러그인 요소라던지) 같은 요소에 공통적으로 속성을 먹이고 싶을 때, 굉장히 유용하게 사용할 수 있는 가상 선택자다.

사용법은 원하는 속성 뒤 ::before를 사용하고, content"" 안에 넣고자 할 콘텐츠를 넣으면 된다.

::before와 ::after 실제 CSS에서 사용법

<div class="reply">댓글</div>

댓글

위의 class 네임 reply라는 요소 앞에 무언가를 넣고 싶다면 CSS에 이렇게 추가하면 된다.

.reply::before {
  content: "이것은"
  }
댓글

이 content:"" 요소에 속성을 주고 싶으면, 이어서 맘껏 적으면 된다.

  .reply::before {
  content: "이것은";
  font-weight: bold;
  font-style: italic;
  }
댓글

텍스트뿐만 아니라 background: url("이미지 주소") no-repeat;로 이미지 주소를 넣고, width:16px; height:16px;등으로 폭과 높이를 설정해 이미지를 집어넣거나, Awesome CSS icon 같은 CSS 아이콘을 사용할수도 있다.

  .reply::before {
  content: "\f044";
  font: normal normal normal 16px/1 FontAwesome;
  margin-right: 5px;
  }
댓글

(참고로 예시의 댓글 앞 CSS 이모티콘은, 실제로 개꿀몬(GKKmon) 사이트 댓글 창에서 사용하고 있다.)

::before와 ::after 응용

이 기능을 사용해서, 정말 다양한 방법으로 사이트나 블로그를 꾸밀 수 있다. 개꿀몬(GKKmon)에서 사용하는 것처럼 특정 요소들 앞에 아이콘을 삽입하거나, <li></li>같은 리스트를 본인 입맛대로 만들 수도 있다.

개인적으로 무엇보다 가장 좋은 점은, 플러그인의 기능이거나 어떤 HTML 요소인지 몰라서 변경하지 못했던 부분들도 바꿀 수 있다는 점이다(개꿀몬(GKKmon) 사이트에서 사용하고 있다는 저 댓글 부분도 Jetpack(젯팩)이라는 워드프레스의 플러그인인데 변경한 것임).

이를 응용해서, 본인 사이트의 바꾸고 싶은 부분에 우클릭 → 요소검사 등으로 class 이름을 알아낸 뒤에, 내 입맛대로 자유롭게 커스터마이징 해 보자.

Free-embedding-with-CSS-before