HTML5 + CSS3 31강 - 8장 예제 레이아웃 잡기

유동적인 레이아웃

이번 시간에 구현할 것은 header, aside, section

복습) 수평정렬할 때
자식에게 float: left
부모에게 overflow: hidden

  <style>
    * {
      margin: 0; padding:0;}
      body { font-family: 'Helvetica, sans-serif;'}
      li { list-style: none;}
      a {text-decoration: none;}
  </style>

마진, 패딩, 폰트 초기화
리스트 스타일, 폰트 데코레이션 제거

h1태그에 마진값 주는 방법1

    <style>
      .header {
        height: 60px;
        line-height: 60px;
        background: #1D4088;
      }

      .header h1 {
        margin-left: 20px;
      }
    </style>

h1태그에 마진값 주는 방법2

    <style>
      .header {
        height: 60px;
        line-height: 60px;
        background: #1D4088;
        position: relative;
      }

      .header h1 {
        position: absolute;
        left: 20px;
      }
    </style>

h1태그에 마진값 주는 방법3

    <style>
      .header {
        height: 60px;
        line-height: 60px;
        background: #1D4088;
        padding-left:20px;
      }
    </style>