[Html & CSS] :before을 이용한 제목 꾸미기

CSS로 타이틀을 꾸미고 싶어요 

티스토리 블로그를 꾸미다가 매번 디자인을 바꾸기 귀찮아서 커스텀하게 디자인을 수정하고 있는데, 가령 본문1을 선택하면 왼쪽에 초록색 바가 생기고, 볼드체를 적용하면 초록색 글씨로 바뀌게 되게끔 자동 적용하게 만들고 있습니다. 그리고 본문3을 적용하면 아래의 세번째 이미지처럼 바뀌게 만들고 싶었습니다.
 

첫번째. 본문1을 적용하면 요런 디자인이 나옵니다

두번째. 볼드체를 적용하면 이렇게 대표 색상으로 바껴요!

세번째. 타이틀 위에 상단바가 생기게 하고 싶어요

 
 

:before와 :after

CSS에 :before와 :after 속성이 있더라구요? 무엇인지 보니까, 말 그대로 컨텐츠 앞, 뒤에 새로운 수식을 만들기 위해 사용하는 것이라고 합니다. 아이콘, 숫자, 이미지 등 텍스트를 장식하기 위해 쓰이는 것으로 가상 요소라고 부른다고 하네요. 그래서 :before는 기준 컨텐츠의 앞에, :after는 기준 컨텐츠의 뒤에 새로운 수식을 하기 위해 사용되는 것입니다.
 
우선 결론부터 말하자면, 다른 걸 떠나서 위의 디자인을 어떻게 만들었는 지 코드부터 보겠습니다. 참고로 티스토리 기준이니까, 일단 본문3은 h4 속성이죠. 여기에 :before를 붙여서 가상 요소를 추가합니다. 이 때 속성들을 살펴보면 코드 블록의 아래 설명과 같습니다.

.article_view h4:before {
  content: "";
  display: block;
  margin: auto;
  padding-bottom: 15px;
  width: 64px;
  border-top: 4px solid #55B19F;
}

content: 가상 요소에 어떤 내용을 담을 지를 나타냅니다. 적어도 empty string이라도 담아야지, 안 담으면 아무것도 안그려집니다.

display: 요소를 어떻게 보여줄 지를 나타낸다는데, 아래와 같다고 합니다. 저의 경우 블록을 해서 아예 하나의 블록을 차지하게끔 해야되네요.
   - none : 보이지 않음
   - block : 블록 박스
   - inline : 인라인 박스
   - inline-block : block과 inline의 중간 형태
   출처: https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

margin: 기본적인 마진 속성입니다. auto를 주면 좌우 균등하게 마진을 나눠서 주죠. 

width: 그냥 너비를 저 정도로 주고 싶었습니다..

border-top: 실질적으로 초록색 상단바를 그려주는 부분입니다. 4px 짜리 선을 메인 칼라로 그려줍니다.

 

 

 

반응형

 

 

 
좀 더 자세하게 설명하면 대충 위의 그림과 같은 느낌입니다. 이미지가 좀 깨지네요..
그래서 티스토리의 관리 페이지 -> 꾸미기 [스킨 편집] -> [Html 편집] 에서 h4 속성을 찾아서 위의 코드를 적용하면 끝!
되게 간단한 디자인 개발이긴 하지만 웹페이지 디자인도 꽤 재밌네요. 이게 프론트엔드의 매력인가 봅니다 ㅎㅎ