float
하지만 float 레이아웃은 PC로만 인터넷에 접속할 수 있던 시절에 고안되었기 때문에 반응형 웹에는 적합하지 않다.
❗️ 반응형 웹이란?
모바일, 태블릿, 데스크탑 PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성입니다.
- float: none (기본값)
- float: left
- float: right
clear
float가 적용된 요소, 적용된 요소에게 영향을 받고있는 요소들에게 효과를 준다.
- clear: none(기본값)
- clear: right
=> float:right 아래로쪽으로 태그를 당겨주게된다. - **clear: left
=> float:left 아래로쪽으
로 태그를 당겨주게된다. **
- **clear: both
내용이 없는 상자 <div class="clearfix">를 만든다..clearfix {
clear: both
}더 알아보기
1. list-style
2. text-decoration
3. class를 중복해서 주는 방법class="box1 box" class="box2 box"
flex
display: flex;
block와 inline요소가 아닌 flexible box라는 독자적인 속성을가진 요소로 구분이 된다.
flex-container
display: flex가 적용된 요소
flex-item
자식 요소
flex-direction: row| column (중심축 가로|세로)
flex box의 중심축 요소를 이해해보자.
요소가 flexible box가되면 중심축이 생긴다. 정렬의 기준이되고 방향을 바꿔줄 수 있다.
justify-content : 중심축 방향 정렬
각각 패딩이나 마진을 줘야한다.
1. flex-start(기본값) 컨테이너의 시작점을 중점으로 아이템이 정렬된다.
2. flex-end 컨테이너의 끝을 중점으로 아이템이 정렬된다.
3. flex-center 컨테이너의 중심을 중점으로 아이템이 정렬된다.
아이템사이에 적절한 여백을주면서 컨테이너 안에 아이템들이 균일한 규칙을가지고 배치될수 있도록 만들어준다.
- space-between 컨테이너의 아이템들이 균일한 여백을 두고 배치가된다.
양 끝의경우 여백이 존재하지 않는다. - space-around 각각의 아이템이 균일한 좌우 여백이 들어가게 되어 첫 아이템과 끝 아이템 사이에도 여백이 들어간다.
- space-evenly 여백의 크기가 space-around와 다르다 양끝에 있는 여백과 아이템들과 사이의 여백이 차이가 나지만 evenly의 경우에는 여백이 모두 균일하다.
ex) 카드형 레이아웃, 메뉴
align-item : stretch(기본값)
1. flex-start(기본값) 컨테이너의 시작점을 중점으로 아이템이 정렬된다.
2. flex-end 컨테이너의 끝을 중점으로 아이템이 정렬된다.
3. flex-center 컨테이너의 중심을 중점으로 아이템이 정렬된다.
align-items는 flex-item이 한 줄일 때 우선 적용
두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다.
flex-item
wrap
nowwrap
align-item: space-around
align-item: space-evenly
align-item: space-between
flex-flow
flex-direction과 flex-wrap을 합쳐놓은 단축 속성
flex-direction: row;
flex-wrap: wrap;
flex-flow:column wrap
flex-item 속성들
order
flex-basis
flex-shrink
flex-grow
