[Blog] 페이지 스타일링(3) - 소제목(h1,h2), code블록 수정

“소제목”을 스타일링 해보고, code 블럭의 폰트를 키우자!

사진을 보면 “페이지 스타일링(2)” 는 h1이고, “카테고리 스타일링” 은 h2 이다.

그리고 “inline code블럭” 이 크기가 작아서 이를 스타일링 한다.

image


code 블럭 크기 작을 때

prev


code 블럭 크기 키울 때

nxt



소제목

  • _page.scss 에서 page__content 를 수정 해 볼것
    • 아래 코드 나타냈고, h2와 h3을 자주 사용해서 이것만 스타일링 하였다.
// _page.scss
.page__content {
  margin-top: 20px; // 게시글 제목과 본문 거리를 벌리기 위함

  h2 {
    margin: 29px 0 22px;
    color : #000;
    border-bottom:2px solid #333333;
	  border-left:10px solid #333333;
	  padding: 5px 15px;
    line-height: 1.5;
  }
  h3 {
    margin: 29px 0 22px;
    color : #000;
    border-bottom:2px solid #333333;
	  border-left:5px solid #333333;
	  padding: 5px 15px;
    line-height: 1.5;
  }
}



code 블럭

code태그 사용의 크기를 키우자 ! !

  • _base.scss 에 td > code 부분에서 크기를 키우면 끝!

댓글남기기

참고