지난 시간까지 HTML코딩 작업을 진행했습니다. 이번 시간부터는 HTML코딩된 웹문서에 CSS를 입혀서 레이아웃 및 디자인을 보강할 것입니다.

레이아웃과 관련된 CSS 속성들

• margin
  
• padding
  
• border
  
• width, height, max-width
  
• display
  
• position
  
• overflow
  
• float
  
• flex
  
• grid
  

레이아웃과 관련한 CSS에는 대표적으로 박스모델과 관련된 margin, border, padding, width, height 등이 있습니다. 

지금까지도 많이 사용되는 레이아웃 관련 CSS속성에는 float이 있습니다.

float을 이용하여 html요소를 적절히 배치하여 웹사이트의 레이아웃을 잡아왔습니다.

그런데 float을 사용할 경우에는 잊지 말고 clear를 시켜주는 것이 필요합니다.

그 다음에 많이 사용되는 CSS요소에는 display속성으로 inline-block값을 사용하는 것입니다.

CSS3이후에는 특별히 레이아웃을 위한 속성들이 나오고 있습니다. flex, grid입니다. 다만, 이런 속성들은 최신 브라우저만 지원하기 때문에 아직 망설이는 경우가 많습니다.

참고로 최근 bootstrap4버전은 flex를 이용하고 있습니다.

이 강좌에서는 float, inline-block을 이용하겠습니다. flex, grid는 별도로 강의를 준비하겠습니다.

브라우저 CSS 초기화

브라우저마다 고유한 CSS 스타일을 갖고 있습니다. 먼저 이를 초기화해 보겠습니다.

* {
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

최신 시멘틱 요소를 위한 조치

이 강좌에서는 사용하지 않겠지만 그래도 최신 html5 시멘틱 요소를 사용할 때 할 수 있는 방법을 제시합니다.

오래된 브라우저는 새로 추가된 요소를 inline으로 처리하기 때문에 강제로 블록레밸 요소로 만들어 주는 것입니다.

article, aside, figure, footer, header, menu, nav, section {
      display:block
} 

웹문서 전체 적용 CSS 설정

웹문서 전체에 적용할 폰트명이나 크기, 링크 속성 등을 다음과 같이 정의합니다.

body { font-size: 100%;font-family:'Nanum Gothic',dotum, sans-serif;background:#fff;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}