[Making_Blog] 웹 표준 사이트 만들기 02

참조 : https://webzz.tistory.com/
앞에서 배웠던 레이아웃 만드는 방법들을 이용하여 기본 레이아웃을 만들어 보자.

Layout

CODE

위와 같은식으로 헤더, 콘텐츠 네비게이션, 콘텐츠 타이틀, 콘텐츠 배너, 세부 콘텐츠, 풋터 로 구분하여 만들 예정이다.

Skip Menu

마우스를 사용할 수 없는 상활일 때 사용하는 스킵메뉴를 추가했다.
평소에는 보이지 않다가 Tap을 눌렀을 때 보여지는 메뉴다.

CODE

헤더 배경 및 메뉴 만들기

※Tip

• text는 padding값이 좌 우 밖에 먹히지 않는다

    header .header-menu a {color: #fff; padding: 10px 10px 10px 13px; display: inline-block;}  
  

• 위와 같이 display:inline-block으로 해결한다.

CODE