Skill/HTML & CSS

[HTML & CSS] 그리드 시스템 & 반응형 웹

엉아_ 2021. 8. 13. 20:06
728x90

CSS

1) float

: 본래는 이미지 좌, 우측 주변으로 텍스트를 둘러싸는 레이아웃을 위해 도입

: 더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전

: flexbox와 gird의 출현과 함께 원래 텍스트 블록 내에서 float 이미지를 위한 역햘로 돌아감

 

- float 속성

  • none : 기본값
  • left : 요소를 왼쪽으로 띄움
  • rithgt : 요소를 오른쪽으로 띄움
<body>
  <div class="left">float left</div>
  <p>lorem300 자동완성으로 길~게</p>
</body>
.left {
  float: left;
}

 

- float clear

  • 선택한 요소의 맨 마지막 자식으로 가상 요소를 하나 생성
  • 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용
  • 기본값은 inline
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

2) flexbox

 

- flex-direction

  • main-axis 방향만 바뀐다.
  • flexbox는 단방향 레이아웃이기 때문이다.

- justify & align

- content & items & self

  • content : 여러 줄
  • items : 한줄
  • self : flex item 개별 요소

 

- justify-content

: 메인축 기준 여러 줄 정렬

-> flex-start, flex-end, center, space-between, space-around, space-evenly

 

- align-items

:  교차축 기준 한 줄 정렬

-> flex-start, flex-end, center, stretch, baseline

 

- align-content

-> flex-start, flex-end, center, stretch, space-between, space-around

 

- align-self

-> auto, flex-start, flex-end, center, stretch

 

3) bootstrap

- spacing

  • mt : margin-top
  • mx : margin-right, margin-left, (mx-auto:  수평중앙정렬, ms-auto: 오른쪽 정렬)
  • py : padding-top, padding-bottom

4) Responsive web