기본 엘리먼트는 위에서 아래로 배치되는 것이 기본이지만, 다양한 속성을 활용해서 다양하게 표현 가능하다.
Display
Inline elements
- respect left & right margins and padding, but not top & bottom
- cannot have a width and height set
- allow other elements to sit to their left and right
Block elements
- respect all of those
- force a line break after the block element
- acquires full-width if width not defined
Inline-block elements
- allow other elements to sit to their left and right
- respect top & bottom margins and padding
- respect height and width
Position
position 속성을 사용하면 상대적/절대적으로 특정 위치에 엘리먼트를 배치하는 것이 수월하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="static">static(default)</div>
<div class="relative">relative(left:10px)</div>
<div class="absolute">absolute(left:130px;top:30px)</div>
<div class="fixed">fixed(top:250px)</div>
</div>
</body>
</html>
.wrap {
position:relative;
}
.wrap > div {
width:150px;
height:100px;
border:1px solid gray;
font-size:0.7em;
text-align:center;
line-height:100px;
}
.relative {
position:relative;
left:10px;
1top:10px;
}
.absolute {
position:absolute;
left:130px;
top:30px;
}
.fixed {
position:fixed;
top:250px;
}
static
- 포지션 기본 성질
- 순서대로 배치
absolute
- top / left / right / bottom 으로 설정
- 기준점에 따라서 특별한 위치에 위치
- 기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점 (static이 아닌 상위 엘리먼트가 없으면 body를 기준으로)
- 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정
relative
- 원래 자신이 위치해야 할 곳을 기준으로 이동
- top / left / right / bottom로 설정
fixed
- viewport(전체화면) 좌측, 맨 위를 기준으로 동작 (광고 같은 거)
Float
- float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다. 따라서 뒤에block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치
- 전체 레이아웃 배치에서 유용하게 사용됨 ! (요즘은 )
Box-sizing
- padding 속성을 사용하면 엘리먼트 크기가 달라 질 수 있는데, Box-sizing을 사용하면 엘리먼트 크기를 고정 할 수 있다.
Resource
http://www.edwith.org/boostcourse-web/lecture/16677/ https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block https://www.w3schools.com/cssref/pr_class_display.asp