1. float
요소를 좌우 방향으로 띄움(수평 정렬)
정확하게는 요소를 띄우는 개념이지만 띄우는 개념으로 요소를 수평정렬하는데 이용하고 있다.
최근에는 flexbox라는 개념이 float을 대체하게 되어 flexbox를 많이 이용한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| none | 요소 띄움 없음 | none |
| left | 왼쪽으로 띄움 | |
| right | 오른쪽으로 띄움 |
💡사용법
float:방향;
img{
float:left;
}float에 대한 예시
1.)글의 흐름을 제어(단순띄움 또는 단순해제)
<article>
<div class="picture">
(emmet문법으로 lorem으로 넣어서 글을 채운다)
</div>
<div class="text">
(emmet문법으로 lorem으로 넣어서 글을 채운다)
</div>
</article>article{
}
article .picture{
width:200px;
height:150px;
background:tomato;
float:left;
margin-right:20px;
margin-bottom:10px;
}
article .text{
clear:left;
}clear의 속성으로 두번째 div태그로 이어지는 글을 깔끔하게 다음 문장부터 이어지게 할 수 있다.
'단순해제'영역이다.
2)수평정렬
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>.box{
width:150px;
height:100px;
background:tomato;
color:white;
font-size: 30px;
margin: 10px;
float:left;
}float:left는 좌측부터 쌓는 개념이고, float:right는 우측에서부터 쌓는 개념이다.
만약 신경써서 하기 싫다면 clear:both를 쓰면 'float:right-clear:right, float:left-clear:left'이렇게 따로따로 구분해줄 필요없다.
1. float해제방법 3가지
float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야 한다.
1. 형제요소clear:(left,right,both추가하여 해제
2. 부모요소에overflow:(hidden, auto)추가하여 해제
3. 부모요소에clearfix클래스를 추가하여 해제(추천)float은 사용하면 항상 해제 해줘야 한다. 안그러면 다 들어가게 된다.
💡clearfix의 자식요소에는 float이 들어있는 박스들만 들어가 있어야 한다. 그렇지 않으면 해제를 하기 어려워 진다.
2. float-display 수정
float속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정된다.
<span>1</span>
<span>2</span>
<span>3</span>span{
width:100px;
height:100px;
margin:10px;
background:tomato;
}대표적인 인라인요소의 예를 보여준다.
<span>1</span>
<span>2</span>
<span>3</span>span{
width:100px;
height:100px;
margin:10px;
background:tomato;
float:left;
}float값을 넣으면서 block처럼 되며 수평으로 쌓인 꼴이 된다.
그러므로 float값을 설정할 일이 있다면 'display:block;'으로 설정해 줄 필요가 없다.
| 지정값 | 변화값 | - |
|---|---|---|
| inline | block | |
| inline-block | block | |
| inline-table | block | |
| inline-row | block | |
| table-row-group | block | |
| table-column | block | |
| table-column-group | block | |
| table-cell | block | |
| table-caption | block | |
| table-header-group | block | |
| table-footer-group | block | |
| flex | flex/float속성 효과없음 | |
| inline-flex | inline-flex/float속성 효과없음 | |
| 그외 | 변화없음 |
대부분의 값들은 block으로 바뀌지만 css3에서 flex값을 주로 사용한다. 이후에 flex에 대해서 보자
3. clear
float속성이 적용되지 않도록 지정(해제)
float속성이 더 이상 주변에 영향을 끼치지 못하도록 해제한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| none | 요소 띄움 허용 | none |
| left | 왼쪽 띄움 해제 | |
| right | 오른쪽 띄움 해제 | |
| both | 양쪽(왼쪽, 오른쪽)모두 띄움 해제 |
4. position 그리고 top,bottom,left,right
요소의 위치 지정 방법의 유행(기준)을 설정
1.position
| 값 | 의미 | 기본값 |
|---|---|---|
| static | 유형(기준)없음 / 배치불가능 | static |
| relative | 요소 자신을 기준으로 배치 | |
| absolute | 위치 상 부모 요소를 기준으로 배치 | |
| fixed | 브라우저(뷰포트)를 기준으로 배치 | |
| sticky | 스크롤 영역 기준으로 배치 |
💡사용예제
<div class="parent">
<div class="child"></div>
</div>.parent{
width:400px;
height:300px;
border: 4px dashed lightgray;
position:relative;
}
.child{
width:150px;
height:100px;
background:tomato;
border: 4px dashed red;
border-radious:10px;
position:absolute;
top:50px;
left:100px;
}여기서 position 설정에 관한 것과 top, left에 대해서 알아가자.
top:50px은 부모요소의 박스에서 내부로 50px;만큼 내려온다.
left:100px;은 부모요소의 박스 왼쪽 면으로부터 100px만큼 이동한 것이다.
2. top
요소의 position기준에 맞는 '위쪽'에서의 거리(위치)를 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정, 음수 값 허용 |
3. bottom
요소의 position기준에 맞는 '아래쪽'에서의 거리(위치)를 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 세로 너비의 비율로 지정, 음수값 허용 |
4. left
요소의 position기준에 맞는 '왼쪽'에서의 거리(위치)를 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정, 음수값 허용 |
5. right
요소의 position기준에 맞는 '오른쪽'에서의 거리(위치)를 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| auto | 브라우저가 계산 | auto |
| 단위 | px,em,cm등 단위로 지정 | 0 |
| % | 부모(위치 상의 부모(조상))요소의 가로 너비의 비율로 지정, 음수값 허용 |
5. postiton 속성값-relative
<div class="box">1</div>
<div class="box relative">2</div>
<div class="box">3</div>.box{
width:100px;
height:100px;
background:tomato;
border: 4px dashed red;
border-radius:10px;
display:flex;
justify-content: center;
align-items:center;
font-size:30px;
}
.relative{
position:relative;
top:20px;
left:50px;
}relative의 경우 자기자신을 기준으로 삼는다.
1번박스에 영향을 받고 3번박스에 영향을 주는 상황인 것이다(형제요소에게). 그러므로 사용 시 주의해야한다.
6. postiton 속성값-absolute
부모요소를 기준으로 한다.(위치상의 부모 요소를 기준으로 한다.)
<div class="grand-parent">
<div class="parent">
<div class="child">1</div>
<div class="child absolute">2</div>
<div class="child">3</div>
</div>
</div>.grand-parent{
width:400px;
height:300px;
padding: 30px 100px 100px 30px;
border: 4px dashed lightgray;
}
.parent{
width:400px;
height:300px;
border: 4px dashed gray;
}
.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: absolute;
}이렇게 되면 3번박스가 2번박스 뒤에 숨게 된다.
absolute가 부여된 2번박스는 부모요소를 기준으로 하기 때문에 부모요소를 기준으로 배치될 준비를 한 상태이기 때문이다.만약에 확인해보고 싶다면 3번박스에 inline요소로 높이나 너비를 넣어보면 확인가능하다.
- position absolute는 결국 구조상의 부모요소와는 다르게 위치상의 부모요소에 따라 달라진다.(이 말은 parent나 grand-parent 어디에다가 position값을 설정해 놓느냐에 따라 다르다는 것이다.)
- 만약 parent나 grand-parent에도 position이 입력되어 있지 않으면 뷰포트를 기준으로 잡는다.
7. postiton 속성값-fixed
<div class="grand-parent">
<div class="parent">
<div class="child">1</div>
<div class="child absolute">2</div>
<div class="child">3</div>
</div>
</div>.grand-parent{
width:400px;
height:300px;
padding: 30px 100px 100px 30px;
border: 4px dashed lightgray;
}
.parent{
width:400px;
height:300px;
border: 4px dashed gray;
}
.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: fixed;
}브라우저(뷰포트)를 기준으로 삼고자 한다면 fixed를 사용하면 된다.
또한 스크롤을 할 수 있을 정도로 body사이즈에 큰 px값을 준다면 스크롤을 따라서 고정된 위치로
박스가 쫓아 다니는 것을 볼 수 있다.
이렇게 사용하는 실제적인 예를 들자면 쇼핑몰 우측 배너광고나 고정된 메뉴등을 이용할때 사용된다.또한 top,left,right,bottom값에 따라서 고정 위치를 변경할 수 있다.
8. postiton 속성값-sticky
스크롤 영역 기준으로 배치, IE 지원 불가
.box{
position: sticky;
top:0;
}특이점으로 sticky는 top, bottom, right, left의 값이 하나 이상은 존재해야한다.
<div class="section">
<h1>Title1</h1>
</div>
<div class="section">
<h1>Title2</h1>
</div>
<div class="section">
<h1>Title3</h1>
</div>
<div class="section">
<h1>Title4</h1>
</div>
💡tip으로 emmet문법 이용:.section*4>h1{title$}라고 해도 된다.
.section{
height:200px;
border: 4px dashed lightgray;
}
.section h1{
text-align: center;
line-height:2;
font-size:24px;
font-weight:bold;
position:sticky;
top:0;
}스크롤에 맞게 title1~title4까지 내려오게 된다. 레이아웃을 확인해보고 싶다면 따로 실행시켜보자.
만약 div container로 감싸는 하나의 태그를 추가로 만들어서 overflow로 하나의 창에서 위의 실행을 유사하게 실행시킬 수 도있다.
9. postiton 특징-요소쌓임 순서
요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(z축)
1.static을 제외한position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
2.position이 모두 존재하면z-index속성의 숫자 값이 높을 수록 위에 쌓임
3.position속성의 값이 있고,z-index속성의 숫자가 값이 같다면,'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))position>z-index>HTML마지막코드
<div class="box-group">
<div class=""box1>1</div>
<div class=""box2>2</div>
<div class=""box3>3</div>
<div class=""box4>4</div>
<div class=""box5>5</div>
</div> .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 rgb(255,0,0 .7);
}
.box-group .box:nth-child(2n){
margin-top:30px;
}
.box1{
}
.box2{
}
.box3{
}
.box4{
}
.box5{
}위의 예제에서 박스쌓임요소를 보자면 각 박스에 css가 안들어가는 상황에서는 박스의 순서대로 쌓여 나간다.
만약 box 3,4 둘에다가 position:relative;를 부여하게 된다면, 3,4 박스가 제일 위에 쌓이게 된다.(포지션이 둘다 있는 동등한 상태라면HTML의 순서에 따라 쌓이게 된다.)
position이 있는 상태에서 z-index를 입력하게 되면 그 순서에 따라 쌓임 순서가 달라진다. 조건은 position이 있는 상태여야 한다는 것이다.
10.postiton 특징-display 수정
absolute,fixed속성 값이 적용된 요소는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-caption | block | |
| table-header-group | block | |
| table-footer-group | block | |
| flex | flex/position속성 효과없음 | |
| inline-flex | inline-flex/positoin속성 효과없음 | |
| 그외 | 변화없음 |
float이 부여된 요소(flex:absolute or fixed)는 display의 값이 무엇이든간에 block으로 변경된다. flex,inline-flex는 제외.
예제)
<span>INLINE</span>span{
width:100px;
height:100px;
background:tomato;
margin:30px 0;
position:fixed or absolute
}위와 같이 position값을 부여함에 따라 display:block;요소와 같이 보이게 된다.
마지막으로
지금까지 속성에 대해서 배우는 과정에서 너무 복잡하고 어렵지만
항상 공부해 왔던것 처럼 계속해서 하다보면 금방 익숙해질 수 있을거라고 믿습니다.
저도 공부하느라 힘들지만 저와 같은 모든 프로그래밍 입문자 여러분들 힘내시기를 바랍니다😁
