네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.15] (CSS 속성- 띄움(정렬),위치 )
01.float
요소를 좌우방향으로 띄움( 수평 정렬)
| 값 | 의미 | 기본값 |
| none | 요소 띄움 없음 | none |
| left | 왼쪽으로 띄움 | |
| right | 오른쪽으로 띄움 |
사용법
float:방향
float{
float:left;
}
float 해제
float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기위해 속성을 '해제'해야함
형제요소에 clear:(left,right,both) 추가하여 해제
부모요소에 overflow:(hidden,auto) 추가하여 해제
부모 요소에 clearfix 클래스 추가하여해제 추천 !
형제 요소에서 해제
float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가
형제 요소에서 해제
<div class="float-left"></div>
<div class="float-left"></div>
<div class="next"></div>
.float-left{
width:100px;
height:100px;
background:red;
float:left;
}
.next{
clear:both;
}부모 요소에서 해제 1
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.parent{
overflow:hidden; <!-- or 'auto' -->
}
.child{
float:left;
}부모요소에서 해제2 (추천)
<div class="parent clearfix">
<div class="child"></div>
<div class="child"></div>
</div>
.clearfix::after{ <!-- 가상요소 추가 , content는 필수 -->
content: "";
clear:both; <!-- 영역의 가장 끝부분에서는 어떻게든 해제가 되는 방식 -->
display:block;
}
.child{
float:left;
}
02.float-display 수정
float 속성이 추가된 요소는 display 속성의 값이 대부분 block 으로 수정 됨
| 지정값 | 변화값 |
| inline | block |
| inline-block | block |
| inline-table | block |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-catption | block |
| table-header-group | block |
| table-footer-group | block |
| flex | flex/float 속성 효과 없음 ( float이 있어도 블럭으로 바뀌지않음) |
| inline-flex | inline-flex/ float 속성 효과없음 |
| 그외 | 변화없음 |
03.clear
float 속성이 적용되지 않도록 지정 (해제)
속성 값
| 값 | 의미 | 기본값 |
| none | 요소 띄움 허용 | none |
| left | 왼쪽 띄움 해제 | |
| right | 오른쪽 띄움 해제 | |
| both | 양쪽(왼쪽,오른쪽) 모두 띄움 해제 |
04.position 그리고 top,bottom,left,right
position
요소의 위치 지정 방법의 유형(기준) 을 설정
속성 값
| 값 | 의미 | 기본값 |
| static | 유형(기준)없음/배치 불가능 | static |
| relative | 요소 자신을기준으로 배치 | |
| absolute | 위치상 (부모)요소를 기준으로 배치 | |
| fixed | 브라우저(뷰포트)를 기준으로 배치 | |
| sticky | 스크롤 영역 기준으로 배치 |
top
요소의 position 기준에 맞는 위쪽에서의 거리를지정
| 값 | 의미 | 기본값 |
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비를 비율로 지정,음수 값 허용 |
bottom
요소의 position 기준에 맞는 아래쪽에서의 거리를지정
| 값 | 의미 | 기본값 |
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비를 비율로 지정,음수 값 허용 |
left
요소의 position 기준에 맞는 왼쪽에서의 거리를지정
| 값 | 의미 | 기본값 |
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비를 비율로 지정,음수 값 허용 |
right
요소의 position 기준에 맞는 쪽에서의 거리를지정
| 값 | 의미 | 기본값 |
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비를 비율로 지정,음수 값 허용 |
05.position 속성값 - relative
06.position 속성값 - absolute
☆☆☆
CSS
.grand-parent {
width:400px;
height:300px;
padding: 30px 100px 100px 30px;
border: 4px dashed lightgray;
}
.parent {
width:400px;
height:300px;
border:4px dashed gray;
position:relative;
}
.child {
width:120px;
height:80px;
background:tomato;
border: 4px dashed red;
border-radius:10px;
font-size:30px;
display:flex;
justify-content:center;
align-items:center;
}
.absolute {
/* position:relative; 자신을 기준으로 배치될 준비를함 */
position:abosolute; /* 2번박스는 부모요소를 기준으로 배치될 준비가 끝남 , */
/* 부모요소에 position 이 있어야 자식요소의 absolute를 원하는 위치에 맞게 사용 가능함 */
bottom:50px; /*absolute 배치개념에서 가장정확함 */
left:100px;
}
07.position 속성값 -fixed
쇼핑몰등 웹페이지에 들어갔을때 배너가 계속해서 붙어서 사용자를 따라가는 형태
position:fixed;
08.position 속성값 -sticky
sticky
스크롤 영역 기준으로 배치해서 붙여서 사용
.box{
position:sticky;
top:0;
}
sticky는 top ,bottom 등 특정값이 한개이상 존재해야하고, 부여된값이 스크롤영역에 맞았을때에만 동작함
인터넷 익스플로어는 사용 불가
스크롤 영역안에 컨텐츠가 들어가있는 모습
09.position 특징-요소 쌓임 순서(Stack Order)
요소가 쌓여있는 순서를 통해
어떤 요소가 사용자와 가깝게 있는지 ( 더 위에 쌓이는지)를 결정(Z축)
1. static 을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
position:static; = position을 사용하지않는것
2.position이 모두 존재한다면 z-index 속성의 숫자값이 높을 수록 위에 쌓임
3. position 속성의 값이 있고, z-index속성의 숫자 값이 같다면,
'HTML'의 마지막 코드일 수록 위에 쌓임 (나중에 작성한 코드 (요소 ))
z-index 와 포지션 쌓임 순서
☆☆☆
CSS 코드
.box-group{
display:flex;
}
.box-group .box {
width:100px;
height:100px;
background:tomato;
border:4px dashed red;
border-radius:10px;
font-size:30px;
display:flex;
justify-content:center;
align-items:center;
margin-right:-30px;
box-shadow:0 0 10px rgba(250,0,0, .7);
}
.box-group .box:nth-child(2n){
margin-top:30px;
}
.box1 {
}
.box2{
}
.box3{
position:relative;
/* z-index:1;
z-index: position이 있는곳에서만 쓸수 있음
포지션의 우선순위를 결정시킴, 기본값:0
z-index의 숫자가 올라갈 수록 더 높은 우선순위
box 4 에도 z-index값 1 을 주게되면4가 위에 쌓임 이유는 늦게 쓰인 코드 이기때문에 더 위로 쌓이게 된다.
*/
}
.box4{
position:relative;
/* z-index:1; */
}
.box5{
}
/* position이 있냐없냐에 따라서 누가 위에 쌓일지 결정됨
5번 박스는 position이 없기 때문에 쌓일 수 없고,
4번과 3번중 비교를 해야함 , html 에서 가장 마지막에 쓰인 position 코드가 위에 쌓이기 때문에 3번이 4번 밑으로가고 position이 있는 4번이 가장위로 올라가게 됨 */
10.position 특징 - display 수정
absolute,fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block 으로 수정됨
float이 부여된 요소와 absolute , fixed는 display값이 뭐가 있었던간에 상관없이 블록으로 변경됨
속성값
| 지정값 | 변화값 |
| inline | block |
| inline-block | block |
| inline-table | block |
| table-row | block |
| table-row-group | block |
| table-column | block |
| table-column-group | block |
| table-cell | block |
| table-catption | block |
| table-header-group | block |
| table-footer-group | block |
| flex | flex/position 속성 효과 없음 |
| inline-flex | inline-flex/ position 속성 효과없음 |
| 그외 | 변화없음 |
