CSS - 기본3 (레이아웃 종류, 블록 엘리먼트)
CSS - 기본3
1. css 레이아웃
기본 레이아웃은 좌->우 방향으로 정렬된다.
레이아웃 변경 방법은 총 4개 이다
1) absolute
기준점(상위 element 중 => static아닌 postion들(body포함)) 배치
(※기준점이 static이라면 무시함)
top/left/right/bottom 사용
2) relative
원래 자신 위치 기준점 배치
(상위 element 영향 안받음)
top/left/right/bottom 사용
3) fixed
기준점(상위 element 중 => static아닌 postion들(body포함))
맨 좌측과 맨 위를 기준
top/left/right/bottom 사용
4) static
기본 설정 배치
(상위 element 영향 안받음)
(쓰어진 대로 입력된다.)
-정리
absolute, fixed => 부모 영향 받음, 부모 위치 기준점
relative, static => 부모 영향 안받음, 흐르는 듯이 배치
2. 블록 엘리먼트
-각 element를 분리 시켜준다.
예를 들어보자
test.css
div > * {
display : block;
}
test.html
<div>
<span class="a">test</span>
<span class="b">test</span>
<span class="c">test</span>
<span class="d">test</span>
<span class="e">test</span></div>
CSS block 적용 안한 경우
CSS block 적용 한 경우
3. 블록 엘리먼트 예제
test.html
<!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>
test.css
.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
}
.absolute{
position: absolute;
left:130px;
top:30px;
}
.fixed{
position:fixed;
top:250px;
}
Output
'BoostCourse > HTML／CSS' 카테고리의 다른 글
| css - 기본5 (float, box-sizing) (0) | 2019.11.13 |
|---|---|
| CSS - 기본4 (레이아웃, Margin, Border, Padding) (0) | 2019.11.13 |
| CSS - 기본2 (font) (0) | 2019.11.13 |
| CSS - 기본1 (css 구조, 우선순위, 상속) (0) | 2019.11.13 |
| HTML - 레이아웃 (0) | 2019.11.13 |