레이아웃(Layout) : CSS를 이용해서 단순한 문서 형태인 HTML을 보기 좋게 배치하고 재배열 하는 것.
선택자
전체 선택자: 모든 요소들을 선택하는 선택자
* {
}
그룹 선택자: 여러 개의 요소들을 동시에 선택하는 선택자
.class1, .class2 {
}
가상 클래스 선택자 : 실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택하는 선택자
(hover, focus, disabled 등)
button:hover {
}
first-child : 해당 요소들 중에 첫 번째 요소만 선택 last-child : 해당 요소들 중에 마지막 요소만 선택 nth-child(n) : 해당 요소들 중에 n번째 요소만 선택 hover : 해당 요소 위에 마우스가 올라갔을 때
CSS 레이아웃의 흐름
Float → Flex → Grid
Float : 반응형 웹에 적합하지 않아 사용하지 않음.
float : 박스 형태의 태그들을 같은 라인에 두고 위치를 설정해주는?
clear : float로 정렬된 태그들을 기준으로 위치를 다음 라인에 위치를 설정해줌?
Flex : CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에, 기존의 float방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다.
.tag{
display: flex;
flex-direction: row|column
}
row
column
justify-content : 중심축 방향 정렬
flex-start : 컨테이너 시작점을 기준으로 정렬됨
flex-end : 컨테이너 끝점을 기준으로 정렬됨
center : 컨테이너 중심을 기준으로 정렬됨
space-between : 아이템들 간의 여백을 두고 정렬됨
space-around : 각 아이템 별로 좌우 균일한 여백을 두고 정렬됨
space-evenly : 컨테이너 내부 모든 아이템이 좌우 여백이 동일하게 정렬됨
align-items : 중심축 수직 방향 정렬
stretch : 아이템을 늘려서 적용함
flex-start : 시작점을 기준으로 정렬함
flex-end : 끝점을 기준으로 정렬함
center : 중심점을 기준으로 정렬함
단! flex-item이 두 줄 이상일 때는 align-content속성을 사용해야함.
flex-direction이 바뀌게 되면 중심축 방향이 바뀌게 되어 justify-content와 align-item의 정렬 방향도 바뀌게 된다.
