[CSS] 띄움(정렬), 위치

 

 

float : 요소를 좌우방향으로 띄움(수평 정렬)

레이아웃은 기본적으로 수직적으로 쌓이는데, 수평 레이아웃으로 변경할 때 사용.  최근엔 이거보단 flex box를 많이씀

 

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

 

원하는 컨텐츠를 글과 함께 수평정렬하기위해 쓰이기도 하고,(해당 컨텐츠에 속성추가하면 됨)

 

 

원하는 각 요소마다 float을 적용하면

1. left  : 맨 왼쪽부터 쌓인다 (1 2 3    )

2. right  : 맨 오른쪽부터 쌓인다 (    3 2 1)

 

 

*float 해제 : float을 적용한요소 외의 주변요소에는 float이 겹치므로, 주변요소에 float을 해제해줘야함

 

1. 다음 형제요소에 clear: (left,right,both) 추가하여 해제 : 정석이지만 요소를 또 생성해야하는 불편함

2. 부모요소에 overflow: (hidden,auto) 추가하여 해제 : 편법

3. 부모요소에 clearfix 클래스 추가하여 해제 : 추천

*float이 있는 요소만 자식이여야 한다

 

 

3번 방법 예제

<div class="clearfix">
  <div class="float-box">1</div>
  <div class="float-box">2</div>
  <div class="float-box">3</div>
  <div class="float-box">4</div>
</div>
<div class="new-box"></div>

.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.float-box{
  width: 100px;
  height: 100px;
  background: orange;
  margin : 10px;
  float: left;
}
.new-box{
  width: 250px;
  height: 250px;
  background: red;
}

 

 

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

*display flex의 경우 변경되지않음!

 

예제

 

 

 

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

 

속성 값	의미	기본값
none	요소 띄움 허용	none
left	왼쪽 띄움 해제
right	오른쪽 띄움 해제
both	어떤 띄움이든 해제

 

 

 

position : 요소의 배치 방법의 유형(기준)을 설정

 

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

 

그리고 속성 top,bottom,left,right 으로 위치를 실제로 지정한다. (position이 지정되어있을 때만 사용 가능)

 

요소의 position 기준에 맞는 '위쪽,아래쪽,왼쪽,오른쪽'에서의 거리(위치)를 설정

 

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

 

 

 

[position 속성값]

relative : 요소 자신을 기준('원래 자신이 있던 위치')으로 배치

주변에 있는 형제요소의 영향을 주거나 받으므로 주의해서 사용

 

 

예제

div 1번 태그를 지우면

 이렇게 딸려올라가게 된다. 주위에 영향을 끼친다.

 

 

[position 속성값]

absolute : (position 속성이 설정되어있는)위치상의 부모요소를 기준으로 배치

*position이 설정되어있는 부모요소를 찾고, 없는 경우 조상요소를 찾고, position이 설정되어있는 요소를 찾지 못할 경우 뷰포트를 기준으로 배치함

 

<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;
  bottom: 50px;
  right: 10px;
}

 

 

 

[position 속성값]

fixed : 브라우저(뷰포트)를 기준으로 배치

뷰포트가 커지거나 작아져도, 스크롤 바를 움직여서 화면이 바뀌어도 배치된 그대로 붙어있다.

 

 

 

 

[position 속성값]

sticky : 스크롤 영역 기준으로 특정한 요소를 붙여서 배치

*top,bottom,left,right 속성이 1개 이상 존재해야함

*IE지원불가

 

 

예제

<div class="container">
  <div class="section">
    <h1>Title 1</h1>
  </div>
  <div class="section">
    <h1>Title 2</h1>
  </div>
  <div class="section">
  <h1>Title 3</h1>
  </div>
  <div class="section">
  <h1>Title 4</h1>
  </div>
  <div class="section">
    <h1>Title 5</h1>
  </div>
  <div class="section">
    <h1>Title 6</h1>
  </div>
  <div class="section">
    <h1>Title 7</h1>
  </div>
  <div class="section">
    <h1>Title 8</h1>
  </div>
</div>

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

 

 

스크롤 안내렸을 때

 

 

스크롤 내렸을 때

 

 

position - 요소쌓임순서(Stack order) : 요소가 쌓여있는 순서를 통해

어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)

 

1. 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;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -30px;
  box-shadow: 0 0 10px rgba(255,0,0,0.7);
}
.box-group .box:nth-child(2n){
margin-top: 30px;
}
.box1{
  position: relative;
}
.box2{
  position: relative;
  z-index: 3;
}
.box3{
  position: relative;
  z-index: 2;
}
.box4{
  position: relative;
  z-index: 1;
}
.box5{
  position: relative;
}

 

 

 

 

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

*display flex의 경우 변경되지않음!