크기를 지정하는 단위
px, %, viewpoint, em, calc()
1.px
px는 pixel을 의미한다
내가 사용하는 디바이스에 따라 상대적인 크기를 갖는다.
ex> 1920 X 1080 해상도를 가진다면, 1920px, 1080px
2.%
inline, block, inline-block 등과 같은 요소에 따라 비례하는 단위이다.
ex> font-size: 120%
3.viewpoint
디스플레이에 표시되는 영역을 의미한다.
vw: 넓이에 상대적인 크기 반환
vh: 높이에 상대적인 크기 반환
(viewport의 너비값과 높이값 각각의 1/100 단위)
viewport의 width가 750px이면 1vw=7.5px, height가 800px이면 1vh=8px
vmin: viewport의 너비 또는 높이를 기준으로 하는 최소값
vmax: viewport의 너비 또는 높이를 기준으로 하는 최대값
4.em
해당 요소의 폰트 크기에 비레한 상대 단위
font-size를 16px로 설정하였다면
0.5em=16px0.5=8px
1em=16px1=16px
2em=16px*2=32px
5.calc()
연산자를 사용한 단위
주의할것!
1.0으로 나누면 오류발생
2.+,- 연산자는 좌우에 공백이 필요하다
3.calc()함수를 중첩하면 내부 calc()는 단순 괄호로 간주
ex> width: calc(100% - 80px);
em과 rem의 차이를 알아보자.
em: 해당 요소에 지정된 폰트 크기 기준 / 설정된 폰트 크기 값이 없을 경우 상위 요소의 폰트 크기가 기준이 된다.
rem: 최상위 요소의 폰트 크기 기준 / 대부분 html 태그의 폰트 크기가 기준, 별도로 지정된 폰트 크기가 없을 경우 각 브라우저에서 기본으로 설정된 값을 상속 받음
margin
margin은 요소 주변 여백을 의미한다
margin-top
margin-bottom
margin-right
margin-left
block요소의 상하 margin은 다른 block요소 margin과 상쇄된다.
padding
padding은 컨텐츠와 테두리 사이의 여백을 의미한다.
padding-top
padding-bottom
padding-right
padding-left
box-sizing
요소의 전체 너비와 높이에 padding과 border을 포함할 수 있다
1.content-box
콘텐츠 영역을 기준으로 크기를 정한다
2.border-box
테두리를 기준으로 크기를 정한다
border-radius
테두리를 둥글게 만들어준다
FLEX
display 속성 종류
block, inline, none/hidden, flex, inline-flex가 있다.
flex: flex container에 flex 속성을 지정하고 container안에 flex item들을 정렬
inline-flex: flex는 적용한 요소를 block처럼 다루고 inline-flex는 inline요소 처럼 다룸
1. flex-direction
: flex에서 정렬의 기준이 되는 메인축을 지정한다. 여기서 메인축이란 아이템이 배치되는 방향을 의미한다.
row: 가로로 배치
row-reverse: 가로로 역배치
column: 세로로 배치
column-reverse: 세로로 역배치
2.justify-content
: 메인 축 기준의 정렬 방식을 지정한다
flex-start/flex-end: 시작지점부터 차레로 정렬/끝지점부터 차례로 정렬
center: 가운데 정렬
space-between: 각 요소 양쪽에 동일한 공간
space-evenly: 각 요소 사이가 동일한 간격
space-around: 요소의 둘레에 동일한 간격
3.align-items
: 서브 축(메인 축에 수직) 기준의 정렬 방식을 지정한다
flex-start/flex-end: 시작지점부터 차례로 정렬/끝 지점부터 차레로 정렬
center: 가운데 정렬
stretch: 수직축 방향으로 끝까지 늘어남(기본값)
baseline: 텍스트 baseline에 맞춤
4.aligh-content
: 여러줄이 있을 때 서브 축 기준의 정렬 방식 지정
flex-start/flex-end: 시작지점부터 차례로 정렬/끝지점부터 차례로 정렬
center: 가운데 정렬
space-between: 각 요소 양쪽에 동일한 공간
space-evenly: 각 요소 사이가 동일한 간격
space-around: 요소의 둘레에 동일한 간격
align-items와 align-content의 차이를 보자.
items는 각각의 한 줄을 기준으로 정렬!
content는 전체를 하나의 요소로 취급
5.flex-wrap
: 줄 바꿈 방식을 지정한다
nowrap: 줄바꿈 하지않고 기본값을 따른다
wrap: 줄바꿈을 한다.
wrap-reverse: 역배치로 줄바꿈 한다
flex 요소들이 많고 헷갈리기 때문에 재밌는 실습을 통해 익숙해져보자!
FlexFroggy
