[TIL] Day13-CSS&Mockup

공부중인 개발자·2021년 4월 21일

CODESTATES CSS mockup

TIL

목록 보기

13/64

CSS

CSS selector

각 셀렉터의 선택 범위

셀렉터

h1 { }
div { }
전체 셀렉터
* { }
Tag 셀렉터
name, date { }
ID 셀렉터
#greeting { }
class 셀렉터
.name { }
.date { }
후손 셀렉터
header h1 { }
자식 셀렉터
header > p { }

HTML 구성하기

콘텐츠의 흐름 : 우하향으로 진행
CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용

수직분할: 화면 콘텐츠가 가로로 배치될 수 있도록 요소를 배치

수직분할로 나뉜 것을 수평으로 구분, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
수평 요소에 height 속성을 추가 시, 수평분할을 보다 직관적

레이아웃 리셋
태그들은 기본 세팅이 되어있는데 세팅을 없애고 아무런 세팅이 안되있는 상태를 만들어 주는것

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox

display: flex 부모 셀렉터에 적용, 자식 셀렉터의 방향과 크기를 결정하는 레이아웃 구성방법
자식 셀렉터는 flex : a b c; 같은 flex라는 속성을 이용
flex-direction : flexbox는 박스가 수직으로 분할되는 것이 기본값, flex-direction을 통해 분할 방향 정하기 가능 row가 기본값 박스들이 가로로 나열되있다. column을 사용하면 박스들이 세로로 나열 수평으로 분할가능
grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
위의 flex : a b c; 에서 a가 grow b가 shrink c가 basis를 뜻한다.
grow: 자식박스가 팽창할 때 이용 자식박스가 여러개 있을 경우 각각 grow의 비율로 크기가 나뉘며 한개의 자식박스에만 grow를 1보다 큰수로 넣어줄 시 다른 자식박스들의 최소 크기를 제외한 부모박스의 크기로 채운다.
shrink: grow의 반대 자식박스가 수축한다. grow를 사용할때는 사용하지 않는것을 추천. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방
basis : 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기, flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지
justify-content : 부모 박스에 justify-content 속성을 적용시, 자식 박스 수평 정렬
flex-start, flex-end, center, space-between mdn에서 자세한 예시를 볼 수 있다.
align-items : 부모 박스에 align-items 속성을 적용시, 자식 박스 수직 정렬
flex-start, flex-end, center, stretch mdn에서 자세한 예시를 볼 수 있다.