TIL - 45

chloe·2021년 6월 22일

CSS Flex

Today I Learned

목록 보기

18/42

float : 수평정렬 가능 (옛 문법)

float : left/right/none
float을 넣으면 자동으로 block으로 바뀜
둥둥뜨기 때문에 글자사이에 들어갈 수 있음 (아래 사진 참고)
둥둥떠서 겹치기 때문에 부모태그 clearfix에 자식 태그(무조건 property에 display:float)있어야 하고 property로 clear:both를 항상 같이 써줘야함

html
<div class="clearfix">
  <div class="float-box"></div>
  <div class="float-box"></div>
  <div class="float-box"></div>
</div>
<div class="newbox"></div>

CSS
.clearfix::after {
  content:"";
  clear: both;
  display: block;
}
.float-box {
  float: left;
  background: orange;
  width: 100px;
  height: 50px;
  margin: 5px;
}
.newbox {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
}

position (*absolute를 사용시, 부모선택자에 position: relative 여부를 무조건 확인)

position: relative (요소 자기자신 기준으로 배치)
position: absolute (위치상 부모 요소(부모태그 && css postion있는 곳) 기준으로 배치)
- top: position 기준으로 거리 설정 (%,px,em,cm)
- bottom: position 기준으로 거리 설정
- left: position 기준으로 거리 설정
- right: position 기준으로 거리 설정

HTML
 <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>
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;
  hegith: 80px;
  background: tomato;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.absolute {
  position: absolute;
  top: 50px;
  left: 10px;
}

position: sticky(스크롤영역 기준 배치)
position: fixed(브라우저 기준으로 배치)