HTML5 + CSS3 27강 - 5장 예제 레이아웃 잡기

songi Jeon·2020년 9월 8일
0

HTML

목록 보기
16/19

※html시리즈는 유튜버 윤인성님의 영상을 보고 정리한 것 입니다.

레이아웃 잡기

<지난시간 복습 구간>
가로로 나눌수 있는 부분을 먼저 나눈다
그 안에서 세로로 나눌 부분을 나누고
내부 요소들에 float 속성을 지정,
부모에 overflow 지정

예시 그림

중앙정렬 - 공식 외우기

    .container {
      width: 960px;
      margin: 0 auto;
    }

"position을 absolute로 지정한 태그가 있다면, 부모 태그의 position을 relative로 지정한다"

 .header {
      height: 100px;
      position: relative;
    }

    .header h1 {
      position: absolute;
      left: 10px;
      top: 30px;
    }

    .gnd {
      position: absolute;
      right: 0;
      top: 0;
    }

    .lnd {
      position: absolute;
      right: 0;
      bottom: 0;
    }
profile
비전공자가 백엔드 개발자 도전하는 블로그

0개의 댓글

Powered by GraphCDN, the GraphQL CDN