Day4_VSCODE_CSS 다단 레이아웃 + Flex 레이아웃

🟢다단 레이아웃

- 텍스트를 column 속성으로 다단을 설정
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미

속성
column-count: 단의 개수
column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상 설정
column-gqp: 단과 단 사이의 여백을 설정
column-span: 단과 안의 포함된 요소를 다단편집에서 해제 (all)

 

코드블록

#container{
    width: 1000px;
    margin:0 auto;
}

header{
    padding: 20px;
    border: 1px solid gray;
    margin-bottom: 20px;
}

#contents{
    border:1px solid gray;
    padding: 20px;
    width: 700px;
    float: left;
}

#sidebar{
    padding: 20px;
    background-color: gold;
    border: 1px solid gray;
    width: 200px;
    float: right;
    margin-bottom: 20px;
}
#footer{
    border: 1px solid gray;
    padding: 20px;
    clear: both;
}

해석

contain은 전체를 div로 묶은 것

사이트제목: id=header인 div | 본문: id=contents인 div | 사이
드바: id=sidebar인 div | id=footer인 div