> 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소! 시작이 반이다.
display와 visibility
display속성은 요소를 어떻게 표시할지를 선택하고, visibility속성은 요소를 나타낼지 말지를 결절하는 속성이다. display는 상속이 불가능하고, visibility는 상속이 가능하다.
display 속성 사용법
display: inline 기본값으로, 요소 앞뒤로 줄바꿈이 불가능하다. 높이,넓이를 따로 지정해줘도, 이를 무시하고 컨텐츠의 크기에 맞춰서 변경된다.
display: block 요소 앞뒤로 줄바꿈이 가능하다. 한 줄에 하나가 표기되는 상자.
display: none 박스가 생성되지 않고, 공간도 차지하지 않는다.
display: inline-block 요소는 inline이지만, 내부는 block처럼 표시한다. 박스모양이 inline처럼 옆으로 늘어나게된다. 한줄에 여러개를 배치하지만, 컨텐츠의 크기와 상관없이 박스로 변환되어 지정한 높이,넓이에 맞춰서 표기된다.
visibility 속성 사용법
visibility: visible 기본값으로 요소가 그대로 보여진다.
visibility: hidden 요소가 보이지 않지만, 공간을 차지하며 투명하게 남는다.
visibility: collapse 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 병합시킨다.
div, span {
width: 80px;
height: 80px;
margin: 20px;
}
div {
background-color: red;
}
span {
background-color: blue;
display: block;
} 
div, span {
width: 80px;
height: 80px;
margin: 20px;
}
div {
background-color: red;
display: inline-block;
}
span {
background-color: blue;
display: block;
}
position
레이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성이다.
####position: static 포지션의 기본값. html에 정의된 순서대로 브라우저상에 위치하는 것을 말한다. 그렇기때문에 top, left같은 위치값을 주어도 변화가 없다.
####position: relative 원래 위치에서 지정해준 위치만큼 상대적으로 이동한다.
####absolute: 아이템이 담겨있는 부모요소를 기준으로 이동한다.
####fixed: 상자에서 벗어나서 윈도우 내에서 움직인다.
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container {
background-color: black;
left: 20px;
top:20px;
position: relative;
}
.box1 {
background: blue;
left: 20px;
top: 20px;
position: relative;
}
.box2 {
background:wheat;
left: 20px;
top: 20px;
position: absolute;
}
.box3 {
background-color: aquamarine;
left: 20px;
top: 20px;
position: fixed;
}float
블록요소를 지정한 위치로 흐르도록 하는 속성을 말한다. 속성에는 left, right, none이 있다.
####clear
float를 지정한 요소의 다음요소는 float의 상속을 받기때문에 clear를 통해서 요소를 해제시킬 수 있다.
.container {
border: 2px solid blue;
width: 1200px;
margin: auto;
}
header {
border: 2px solid red;
height: 150px;
line-height: 150px;
text-align: center;
}
.inner section {
border: 2px solid green;
width: 400px;
height: 400px;
float: left;
box-sizing: border-box;
}
footer {
border: 3px solid orange;
height: 100px;
clear: left;
}
Lv.1🌷