CSS - 띄움(정렬), 위치

1. float

: 요소를 좌우 방향으로 띄움(수평 정렬), 적용된 요소 주변으로 문자가 흐르는 형태

값	의미	기본값
none	요소 띄움 없음	none
left	왼쪽으로 띄움
right	오른쪽으로 띄움

 

- float 해제 : float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야

 1. 형제요소에 clear: (left,right,both) 추가하여 해제

: float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box4"></div>

.box {
  width: 150px;
  height: 100px;
  background: tomato;
  color: white;
  font-size: 30px;
  margin: 10px;
  float: left; /*왼쪽 --> 오른쪽을 쌓임*/
}
.box4{
  weight: 200px;
  height: 150px;
  background: orange;
  clear: left; /*생략하게 된다면 요소들이 겹친다. 속성값으로 left, right, both가 있다.*/
}

 2. 부모요소에 overflow: (hidden, auto) 추가하여 해제 : float 속성이 추가된 부모요소에 overflow 속성 추가

- 추천하지 않는 방법, 편법

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent{
  width: 100px;
  height: 100px;
  background: orange;
  overflow: hidden; /*or 'auto'*/
}
.child{
  width: 10px;
  height: 10px;
  background: yellow;
  float:left;
}

 3. 부모요소에 clearfix 클래스 추가하여 해제 (추천!) : float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix클래스 추가

- cleafrfix 클래스 안에는 float상태의 형제요소들만 넣어야한다. 

<div class="parent clearfix">
  <div class="child"></div>
  <div class="child"></div>
</div>

.clearfix::after{ /*가상요소 선택자 ::after*/
  content: "";
  clear:both;
  display: block; /*or 'table'*/
}
.child{
  float: left;
}

 

 

2. float-display 수정

: float 속성이 추가된 요소는 display 속성값이 대부분 block으로 수정됨

- inline인 요소에 float: left를 하게 되면 block으로 대부분 변한다. (flex, inline-flex는 제외)

<span>1</span>
<span>2</span>
<span>3</span>

span{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: tomato;
  float: left;
}

 

 

3. clear

: float 속성이 적용되지 않도록 지정(해제)

값	의미	기본값
none	요소 띄움 허용	none
left	왼쪽 띄움 해제
right	오른쪽 띄움 해제
both	양쪽(왼쪽, 오른쪽) 모두 띄움 해제

 

---

4. position 그리고 top, bottom, left, right

: posotion은 요소의 위치 지정 방법의 유형(기준)을 설정

값	의미	기본값
static	유형(기준)없음 / 배치 불가능	static
relative	요소 자신을 기준으로 배치
absolute	위치 상 부모 요소를 기준으로 배치
fixed	브라우저(뷰포트)를 기준으로 배치
sticky	스크롤 영역 기준으로 배치

 

-1) top : 요소의 position 기준에 맞는 '위쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모요소의 세로 너비의 비율로 지정, 음수값 허용

-2) bottom : 요소의 position 기준에 맞는 '아래쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모요소의 세로 너비의 비율로 지정, 음수값 허용

-3) left : 요소의 position 기준에 맞는 '왼쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모요소의 가로 너비의 비율로 지정, 음수값 허용

-4) right : 요소의 position 기준에 맞는 '오른쪽'에서의 거리(위치)를 설정

값	의미	기본값
auto	브라우저가 계산	auto
단위	px, em, cm 등 단위로 지정	0
%	부모요소의 가로 너비의 비율로 지정, 음수값 허용

 

 

---

5. position 속성값 - 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; 
  bottom: 40px;
  left: 160px;
}

 

 

6. position 속성값 - absolute

: 위치 상 부모 요소를 기준으로 배치

- 바로위의 구조상의 부모요소에 position이 구현되어 있지 않으면, 조상요소를 부모요소로 인지할 수 있다. 따라서 부모요소에 position: relative; 있는 것을 확인

<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;
  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: absolute; /*3번박스는 2번박스 뒤에 */
  top: 50px;
  left: 100px;
}

 

 

7. position 속성값 - 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>

body{
  height:4000px;
}
.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; /*3번박스는 2번박스 뒤에 */
  bottom:50px;
  right: 10px;
}

 

 

8. position 속성값 - sticky

: 스크롤 영역 기준으로 배치

- IE지원 불가

- top, bottom, left, right가 한개 이상 있어야한다.

<!-- Emmet 문법 -->
.section*8>h1{Title $} + tab

.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;
}

 

- 예제: sticky와 연관이 있는 예제 + overflow

<!-- Emmet 문법 -->
.container>.section*8>h1{Title $} + tab

.container{
  width: 400px;
  height: 400px;
  border: 4px solid red;
  overflow: auto;
  margin: 30px;
}
.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;
}

 

---

9. position 특징 - 요소 쌓임 순서(Stack order)

: 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)

- position > z-index > HTML 마지막코드

 

 1. static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

 2. position이 모두 존재한다면 z-index속성의 값이 높을수록 위에 쌓임

 3. position 속성의 값이 있고, z-index 속성의 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))

<div class="box-group">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box 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;
  justify-content: center; 
  align-items: center; 
  margin-right: -30px;
  box-shadow: 0 0 10px rgba(255,0,0, .7);
}
.box-group .box:nth-child(2n){
  margin-top: 30px;
}
.box1{
  
}
.box2{
  
}
.box3{
  position: relative;
  z-index:1; /*포지션 값 */
}
.box4{
  position: relative; /*HTML상으로 나중에 작성되었기에 위에 쌓임*/
}
.box5{
  position: relative; /*HTML상으로 나중에 작성되었기에 위에 쌓임*/
}

 

10. position 특징 - display 수정

: absolute, fixed 속성이 적용된 요소는 display 속성 값이 대부분 block으로 수정됨

- flex, inline-flex만 block으로 변환 안됨

<span>INLINE</span>

span{
  width: 100px;
  height:100px;
  background: tomato;
  margin: 30px 0;
  position: absolute; /*span이 block형태로 변환*/
}