[CSS] CSS 속성 - 정렬, 위치

in TIL on TIL, Css


CSS 속성 - 정렬, 위치

띄움(정렬)

float

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

속성 값

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

사용법

float: 방향

img {
  float: left;
}

단순 띄움

Screen Shot 2019-11-12 at 16 58 24

요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됩니다.

단순 해제

Screen Shot 2019-11-12 at 17 26 53

수평 정렬

Screen Shot 2019-11-12 at 17 28 27

각 요소에 float 속성이 적용되면 차례로 ‘정렬’ 됩니다.




float 해제

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

  1. 형제요소에 clear: (left, right, both) 추가하여 해제
  2. 부모요소에 overflow: (hidden, auto) 추가하여 해제
  3. 부모요소에 clearfix 클래스 추가하여 해제(추천!)

정렬 해제

Screen Shot 2019-11-12 at 17 27 09

1.형제 요소에서 해제

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

2.부모 요소에서 해제 I

float 속성이 추가된 요소의 부모요소에 overflow 속성 추가

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

.parent {
  overflow: hidden; /* or 'auto' */
}
.child {
  float: left;
}

3.부모 요소에서 해제 II (추천 방법)

float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가

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

.clearfix::after {
  content: "";
  clear: both;
  display: block; /* or 'table' */
}
.child {
  float: left;
}




float의 display

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

지정값변화값
inlineblock
inline-blockblock
inline-tableblock
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex / float 속성 효과 없음
inline-flexinline-flex / float 속성 효과 없음
그외변화 없음




float의 clear

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

속성 값

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




위치

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: 150px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  left: 100px;
}




top

요소의 position 기준에 맞는 ‘위쪽’에서의 거리(위치)를 설정

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




bottom

요소의 position 기준에 맞는 ‘아래쪽’에서의 거리(위치)를 설정

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




left

요소의 position 기준에 맞는 ‘왼쪽’에서의 거리(위치)를 설정

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




요소의 position 기준에 맞는 ‘오른쪽’에서의 거리(위치)를 설정

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




position 속성값

postion: 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: 150px;
}

postion: 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;
  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;	/* absolute 값을 넣으면 꼭 상위 요소에 position: relative; 값을 넣어야 한다. */
  top: 50px;
  left: 100px;
}

postion: 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;
  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: fixed;  /* 브라우저 광고 같을때 쓰임 */
  top: 30px;
  right: 4px;
}

postion: sticky

스크롤 영역 기준으로 배치

.box {
  position: sticky;
  top: 0;
}

IE 지원 불가

예제

.container
.section*8>h1{Title $}		// emmet 문법

<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 특징

요소 쌓임 순서

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

  1. static 을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
  2. position 이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임
  3. position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, ‘HTML’의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))
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, .7);
}
.box-group .box:nth-child(2n) {
  margin-top: 30px;
}
.box1 {
  position: relative;
}
.box2 {
  position: relative;
}
.box3 {
  position: relative; /* 3번이 5번 위에 있음 */
  z-index: 1; /* position이 있을 때만 동작 */
}
.box4 {
  position: relative; /* 4번이 가장 높이 있음 */
  z-index: 1; /* position이 있을 때만 동작 */
}
.box5 {

}

display 수정

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

지정값변화값
inlineblock
inline-blockblock
inline-tableblock
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex / position 속성 효과 없음
inline-flexinline-flex / position 속성 효과 없음
그외변화 없음

예제

<span>INLINE</span>

span {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 30px 0;
/*   display, position을 넣으면 블럭요소로 변경됨 */
/*   display: block; */
/*   position: absolute; */

}




참고

패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js


개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.



© 2020. GANGPRO. All rights reserved.