1. float
2. position, z-index
1. float
[ 정의 ]
- 해당 태그의 출력 방식을 따르지 않고, 원래 위치에서 벗어나 라인의 왼쪽/오른쪽 끝으로 이동한다.
- left, right, none(default)
- float이 적용되면 block 성질이 된다. (최상단 배치)
[ 예제 1 ]
<style>
div {
width: 500px;
border-bottom: 1px dashed black;
}
span { float: right; }
</style>
<body>
<div>
테스트입니다.(div)
<span>테스트입니다.(span)</span>
</div>
</body>
[ 예제 2 ]
<style>
.box {
border: 1px solid black;
width: 120px;
height: 120px;
float: left;
}
.link {
border: 1px solid black;
margin-right: 5px;
float: left;
}
</style>
<body>
<h1>블럭 태그</h1>
<div class="box">상자1</div>
<div class="box">상자2</div>
<div class="box">상자3</div>
<!--
블럭태그에서 float성질 때문에 의도치 않던 인라인 태그 부분까지도 올라갔다.
아래로 내릴 방법? -> 인라인 style 시트 방법 -> clear
-->
<h1 style="clear: both;">인라인 태그</h1>
<a href="#" class="link">링크1</a>
<a href="#" class="link">링크2</a>
<a href="#" class="link">링크3</a>
</body>
2. position, z-index
[ 정의 ]
- 태그의 출력되는 위치를 지정하는 속성
- 좌표값을 사용해서 요소의 위치를 지정한다. (x좌표, y좌표)
- 좌표를 지정하는 방식이 여러개 존재한다.( 속성에 따라 원점(0,0)이 다르고, 요소 배치 방식도 다르다. )
[ 속성 ]
1) position: static
- 기본값 (좌표값이 없다.)
- 코딩 순서에 따라 배치: 위 -> 아래, 왼쪽 -> 오른쪽
2) position: absolute
- 절대 좌표값
- 원점(0, 0)이 절대적이다. ( 누구나 항상 동일한 장소를 원점으로 삼는다. )
- left, top -> 좌표 지정
- 문서 좌측 상단을 원점으로 하는 좌표계가 아니다. -> 자신의 직계 조상 중 가장 처음으로 만나는 position이 static이 아닌 조상(transform을 적용한 조상)을 원점으로 하는 좌표계이다.
- 요소의 내용을 겹쳐서 출력이 가능하다.
- 요소의 원래 공간은 사라진다.( display: none)
3) position: relative
- 상대 좌표값
- 원점(0, 0)이 상대적이다. (태그의 원래 위치를 원점으로 삼는다)
- left, top -> 좌표 지정
- 원래 자신이 있던 위치를 원점(0, 0)으로 하는 좌표계이다.
- 요소의 원래 공간은 그대로 남는다. ( visibility: hidden ) -> 원래의 공간이 사라지면 원점 삼을 위치도 같 이 사라지기 때문이다.
4) position: fixed
- 고정 좌표값
- left, top -> 좌표 지정
- 뷰 포트 좌측 상단을 원점으로하는 좌표계 이다.
- 요소의 원래 공간은 사라진다.
[ z-index 정의 ]
- position 속성을 사용하면 요소를 겹치게 할 수 있는데, 이때 요소들의 수직 위치를 z-index 속성을 통해 정할 수 있다.
- 값은 정수로 표기하며, 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
<style>
.box {
border: 1px solid black;
width: 150px;
height: 150px;
}
#box1 { background-color: tomato; }
#box2 { background-color: gold; }
#box3 { background-color: cornflowerblue; }
#box1 {
z-index: 4; /* z-index값이 가장 크지만 static이라서 적용 X */
}
#box2 {
position: absolute;
left: 150px;
top: 150px;
z-index: 2;
}
#box3 {
position: absolute;
left: 100px;
top: 100px;
z-index: 3;
}
</style>
MEMO>
# CSS에서 배울 것이 많다보니 정리가 잘 안되고 머릿속에 들어오지 않지만, 모든것을 완벽히 외운다는 개념보다, 하나를 배우더라도 확실하게 이해 하고 가는 방식으로 공부해야겠다.
# 레이아웃 부분인 float, position 상당히 헷갈리다. 이번주 주말에 직접 코딩하면서 다시 복습 해야겠다.
# java, oracle과 다르게 어떤식으로 정리를 해야할지 감이 안잡힌다!
-> 계속 여러 방식으로 정리 해보면서 나에게 맞는것을 찾아야겠다.
'교육 > CSS' 카테고리의 다른 글
| CSS 개발자 수업 58일차 - transform, transition (0) | 2021.06.20 |
|---|---|
| CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow (0) | 2021.06.20 |
| CSS 개발자 수업 56일차 (0) | 2021.06.17 |
| CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity (0) | 2021.06.15 |
| CSS 개발자 수업 53일차 - css, selector, background (0) | 2021.06.12 |
댓글