1. CSS(Cascading Style SheetCSS)
- CSS란 HTML 정보와 디자인을 분리시키기 위해 만들어진 언어로 HTML로 작성된 정보를 꾸며줍니다.
- CSS는 다음 3가지 방법을 통해 HTML과 연동시킬수 있습니다.
태그 안에 직접 원하는 스타일 적용
<h1 style="color: red;"> coding </h1>style 태그 안에 작성
<head>
<style>
h1 {color: red;}
</style>
</head>link 태그로 .css 파일 불러오기
<head>
<link rel="stylesheet" href="style.css">
</head>- CSS 문법은 선택자와 속성, 속성값 이렇게 세 가지로 이루어져 있고 선언 마지막엔 세미콜론(;)을 입력하여 선언들을 구분합니다.
선택자 : 디자인을 적용할 HTML 영역
속성 : 어떤 디자인을 적용할지 정의
속성값 : 어떤 역할을 수행할지 구체적으로 명령
2. CSS 선택자
- 선택자는 디자인을 적용할 HTML 영역으로 특정 요소들을 선택하여 스타일을 적용할 수 있습니다.
- 선택자의 종류는 여러가지가 있는데, 디자인 요소를 의도에 알맞게 적용하기 위해서는 선택자를 잘 혼합해서 사용하는 것이 중요합니다.
- CSS Diner 홈페이지를 통해 게임처럼 Selector를 익혀볼 수도 있습니다.
일반적인 선택자
1) 전체 선택자
- 별표(*)를 사용하여 전체 요소를 선택합니다.
- 개발시에 초기 세팅으로 이 선택자를 사용하는 경우가 많은데 이는 브라우저에 과부하가 걸리기 때문에 실전에서는 사용을 권장하지 않습니다.
- 단독 사용뿐만 아니라 아래에서 설명할 결합자와도 같이 사용할 수 있습니다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}2) 태그 선택자
- div, input 등 element 이름을 통해 요소를 선택합니다.
div {
height: 100%;
}3) class 선택자
- 점(.)을 사용하여 class 특성을 가진 모든 요소를 선택합니다.
.class {
background-color: red;
}4) id 선택자
- 샵(#)을 사용하여 id 특성을 가진 요소를 선택합니다.
#id {
background-color: black;
}5) 특성 선택자
- 주어진 특성을 가진 모든 요소를 선택합니다.
- [속성~=값] : 해당 값이 특정 단어로 시작하는 속성
- [속성^=값] : 특정 값으로 시작하는 속성
- [속성$=값] : 특정 값으로 끝나는 속성
- [속성*=값] : 특정 값을 포함하는 속성
[class^="abc"] { /* class의 속성이 abc로 시작하는 요소 선택 */
background-color: green;
}6) 그룹 선택자
- 쉼표(,)를 사용하면 여러 선택자를 같이 사용할 수 있어 코드의 중복을 최소화 할 수 있습니다.
ul, li {
pading: 0;
margin: 0;
}class 와 id의 차이점
class는 어떠한 대상을 관리하기 쉽도록 그룹핑(grouping)하는 것
id는 말그대로 고유한 값으로 딱 한번만 등장
결합 선택자
1) 자손 선택자
- 공백을 사용하여 첫번째 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다.
div p { /* div 요소 하위에 있는 모든 p 요소 선택(자손 포함) */
background-color: green;
}2) 자식 선택자
- 오른쪽 꺽쇠(>)를 사용하여 첫번째 요소의 바로 아래에 있는 요소 중에서 특정 타입의 요소를 모두 선택합니다.
div > p { /* div 요소 하위에 있는 모든 p 요소 선택(자손 불포함) */
background-color: green;
}3) 일반 형제 선택자
- 물결(~)을 사용하여 첫번째 요소를 뒤따르는 요소 중에서 특정 타입의 요소를 모두 선택합니다.
div ~ p { /* div 요소와 동등한 위치에 있는 모든 p 요소 선택 */
background-color: green;
}4) 인접 형태 선택자
- 플러스(+)를 사용하여 첫번째 요소를 뒤따르는 요소 중에서 바로 뒤에 있는 특정 타입의 요소를 선택합니다.
div + p { /* div 요소와 동등한 위치에 있는 요소중 바로 뒤따르는 p 요소 선택 */
background-color: green;
}의사 클래스(가상 클래스)
- 의사 클래스는 해당 HTML 요소에 특별한 상태를 명시할 때 사용합니다.
선택자:의사클래스이름 {속성: 속성값;}
1) 동적 의사 클래스
- :link : 사용자가 아직 한 번도 해당 링크를 누르지 않은 상태 ( a요소 기본 )
- :visited : 사용자가 한 번이라도 해당 링크를 누른 상태
- :hover : 사용자의 마우스 커서가 위에 올라가 있는 상태
- :active : 사용자의 마우스 커서가 클릭중인 상태
- :focus : tab키로 focus가 맞춰진 상태
2) 상태 의사 클래스
- :checked : input의 checkbox나 raido button이 체크된 상태
- :enabled : input의 "type=text", select, option에서 사용자가 선택한 상태
- :disabled : input의 "type=text", select, option을 사용자가 선택할 수 없도록 만든 상태
3) 구조 의사 클래스
- :first-child : 모든 자식 요소 중에서 첫 번째에 위치하는 자식을 선택
- :nth-child(n) : 모든 자식 요소 중에서 n번째에 위치하는 자식을 선택
- :last-child : 모든 자식 요소 중에서 마지막에 위치하는 자식을 선택
- :first-of-type : 모든 자식 요소 중에서 첫 번째에 등장하는 특정 요소를 선택
- :nth-of-type(n) : 모든 자식 요소 중에서 n번째로 등장하는 특정 요소를 선택
- :last-of-type : 모든 자식 요소 중에서 마지막으로 등장하는 특정 요소를 선택
child와 of-type의 차이점은 하위 태그가 모두 같은 태그 또는 class, id가 아닐경우 확인할 수 있습니다.
만약 하위 태그의 첫번째로 input 태그가 오고 그 뒤로 p 태그가 왔을 경우 p:first-child를 사용할 시 p는 첫번째 자식 요소가 아니기 때문에 선택이 되지 않지만 p:first-of-type을 사용하면 하위 p태그중 첫번째 자식을 선택하기 때문에 속성이 적용되는 것을 볼 수 있습니다.
4) 기타 의사 클래스
- :not(선택자) : 해당 선택자를 반대로 적용
- :lang(언어) : 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용
의사 요소(가상 클래스)
- 의사 요소는 해당 HTML 요소의 특정 부분에 스타일을 지정하는데 사용합니다.
선택자::의사요소이름 {속성: 속성값;}
대표적인 CSS 의사 요소
- ::first-letter : 요소의 텍스트에서 첫 번째 글자에 스타일을 적용(블록타입의 요소에만 사용 가능)
- ::first-line : 요소의 텍스트에서 첫 줄에 스타일을 적용(블록타입의 요소에만 사용 가능)
- ::before : 요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가
- ::after : 요소의 콘텐츠 끝부분에 생성된 콘텐츠를 추가
기본적으로 ::before, ::after을 사용할땐 'content' 속성이 꼭 필요합니다.
'content' 란 HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 '가짜' 속성입니다.
CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 표기하였으나 CSS3에서는 의사 클래스와 의사 요소를 구분하기 위해 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두개의 콜론(::)을 사용하고 있습니다.
3. 캐스케이딩
- CSS는 스타일 충돌이 일어날 경우 우선순위를 정하기 위해 캐스케이딩을 이용합니다.
- 캐스케이딩 규칙은 중요도, 명시도, 코드 순서로 나뉘는데 간단히 말하면 !important > style > id > class > tag 순으로 우선순위가 높고 구체적이고 명시적인 것 부터 먼저 적용됩니다. 또 마치 덮어쓰기처럼 마지막에 선언된 규칙이 우선됩니다.
4. 타이포그래피
주요 속성들
1) font-size
- 폰트 사이즈로 사용할 수 있는 단위는 크게 세가지로 나눠볼 수 있습니다.
px : 절대적 크기
em : 부모 요소의 글자 크기에 대한 상대적 크기
rem : 최상위 요소(html)의 대한 상대적 크기브라우저의 표준 폰트 크기는 16px로 브라우저의 설정에서 폰트 크기를 변경할 수 있습니다. 이때 상대적 크기인 em과 rem은 브라우저 설정에 따라 폰트 크기가 바뀌지만 px은 절대적이기 때문에 변경되지 않습니다.
2) color
- 웹에서 컬러를 지정하는 방법은 크게 세가지로 나눠볼 수 있습니다.
color name : red, green 등 미리 정의된 색상 이름을 사용
hex : 빨간색, 녹색, 파란색을 섞어서 만드는 방식으로 00~ff 사이의 16진수 값으로 지정 가능
rgb : 마찬가지로 빨간색, 녹색, 파란색을 섞어서 만드는 방식으로 0~255까지 지정 가능
3) text-align
- text-align은 텍스트를 정렬하기 위해 사용합니다.
- 기본적으로 left, right, center를 이용해서 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬을 할 수 있고 justify를 사용하면 양쪽 끝도 정렬되는걸 볼 수 있습니다.
4) font
font-family
- 서체를 지정할 수 있습니다. 하지만 모두가 모든 폰트를 가지고 있지 않기 때문에 브라우저에서 선택할 수 있도록 폰트 스택을 제공할 수 있습니다.
font-family: Helvetica, "Malgun Gothic", sans-serif;- 브라우저는 목록 시작 부분에서 시작하여 해당 폰트가 시스템에서 사용가능한지 확인하고 해당 폰트가 없다면 다음 폰트로 이동합니다.
- 그렇기 때문에 스택의 마지막에 기본 폰트를 작성해 주어야합니다.
// 기본 폰트
serif : 장식이 있는 폰트
sans-serif : 장식이 없는 폰트
cursive : 흘림체
monospace : 고정폭
fantasyfont-weight
- 폰트의 두께를 나타냅니다.
line-height
- 행과 행 사이의 간격을 지정합니다. 기본 값은 normal로 1.2에 해당합니다.
font
- 폰트와 관련된 여러 속성을 축약형으로 표현할 수 있는데 여기서 font-size와 font-family는 필수로 포함되어야 하고 font-size 및 line-height 속성 사이에 슬래시를 넣어야합니다. 또한 순서를 지켜서 작성해야 합니다.
font: font-style font-variant font-weight font-size/line-height font-family웹 폰트
- 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 폰트 정보도 함께 저장하여 사용자가 웹 문서에 접속하면 해당 폰트를 자동으로 다운로드 시키는 방법입니다.
- 그렇기 때문에 사용자가 어떤 폰트를 가지고 있는지 고려하지 않고 내가 원하는 폰트를 사용할 수 있지만 한글 폰트의 경우 용량이 생각보다 크기 때문에 다운로드를 위해 네트워크 통신이 일어나는 만큼 최적화가 필요합니다.
- 웹에서 폰트는 적용하기 위해서는 크게 두가지 방법이 있는데 TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장 시키고, 이 파일을 불러와서 적용시키는 방식과 다운로드 없이 url을 이용하는 방식이 있습니다.
- 눈누, Google Fonts 사이트를 이용하면 폰트파일을 구하지 않아도 url을 통해 적용할 수 있습니다.
5. 레이아웃
박스모델
- 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다.
- 하나의 박스는 네개의 영역으로 이루어져 있으며 각 영역을 콘텐츠, 패딩, 테두리, 마진이라고 부릅니다.
콘텐츠 영역 : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
패딩 영역 : 내용과 테두리 사이의 간격
테두리 영역 : 내용과 패딩 주변을 감쌈
마진 영역 : 테두리와 이웃하는 요소 사이의 간격
box-sizing
- box-sizing은 CSS의 테두리 영역 크기를 결정합니다.
- 기본적으로 CSS는 box-sizing 값을 content-box로 사용하고 있습니다. 그렇기 때문에 요소에 패딩 또는 테두리를 주게되면 의도했던 크기보다 더 커지는 걸 볼수 있는데 이를 방지하기 위해 box-sizing 값을 border-box로 변경할 수 있습니다.
display
1) inline vs inline-block vs block
- inline : inline은 주로 텍스트를 주입 할 때 사용되는 형태입니다. 그렇기 때문에 x축 정렬 형태로 줄바꿈없이 한줄에 출력되고 width, height 값 적용이 불가능합니다. 또 margin과 padding의 top, bottom 값 적용이 불가능하여 상하 배치 작업이 불가능합니다.
- block : block은 한 영역을 차지하는 박스형태 성질을 가졌습니다. 그렇기 때문에 y축 정렬 형태로 줄바꿈이 일어나고 width와 height 값을 적용할 수 있습니다. 또 margin과 padding을 모든 방향에 적용할 수 있습니다.
- inline-block : inline-block은 말 그대로 inline의 특징과 block의 특징을 모두 가진 요소로 줄바꿈이 이루어지지않지만 width와 height 값을 지정할 수 있고 마찬가지로 margin과 padding을 모든 방향에 적용 할 수 있습니다.
2) flex
- flex는 레이아웃 배치 전용 기능으로 기본적으로 레이아웃을 만들 때 사용한 float나 inline-block 보다 훨씬 강력하고 편리한 기능이 많습니다.
- flex 레이아웃을 만들기 위해선 기본적으로 부모 요소인 container 와 자식 요소인 item들이 필요한데 만드는 방법은 간단하게 정렬하려는 요소의 부모 요소의 display 속성을 flex로 주게 되면 해당 요소는 flex container가 되고, 해당 요소의 자식 요소들은 flex item이 됩니다.
- flex에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어 집니다. 전체적인 정렬이나 흐름에 관련된 속성은 container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 item에 정의합니다.
부모 속성
- flex-direction : 정렬할 방향을 지정
- flex-wrap : flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬
- justify-content : flex 요소들을 가로선 상에서 정렬
- align-items : flex 요소들을 세로선 상에서 정렬
- align-content : 세로선 상에 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절
자식 속성
- flex-grow : 요소가 flex-basis의 값보다 커질 수 있는지를 결정
- flex-shrink : 요소가 flex-basis의 값보다 작아질 수 있는지를 결정
- flex-basis : flex 요소의 기본 크기를 설정
- flex : flex-grow, flex-shrink, flex-basis를 공백을 기준으로 한번에 지정
- order : flex 요소의 순서를 지정
3) grid
- grid는 레이아웃의 끝판왕이라고도 할 수 있으며 flex가 1차원 레이아웃 시스템이라면 grid는 2차원 레이아웃 시스템입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능합니다.
- flex와 마찬가지로 grid 레이아웃을 만들기 위해 기본적으로 부모 요소인 container 와 자식 요소인 item들이 필요하고 만드는 방법은 부모 요소에 display 속성을 grid로 설정하면 됩니다.
부모 속성
- grid-template-rows : 행의 배치
- grid-template-columns : 열의 배치
- row-gap : 행 간격 설정
- column-gap : 열 간격 설정
- justify-items : 아이템들을 가로축 방향으로 정렬
- align-items : 아이템들을 세로축 방향으로 정렬
- justify-content : grid 아이템들을 가로선 상에서 통째로 정렬
- align-content : grid 아이템들을 세로선 상에서 통째로 정렬
자식 속성
- grid-row-start : 행 시작 번호 설정
- grid-row-end : 행 끝 번호 설정
- grid-column-start : 열 시작 번호 설정
- grid-column-end : 열 끝 번호 설정
- justify-self : 해당 아이템을 가로축 방향으로 정렬
- align-self : 해당 아이템을 세로축 방향으로 정렬
- order : grid 요소의 순서를 지정
Flexbox Froggy와 Grid Garden을 통해 게임처럼 flex와 grid를 익혀볼 수 있습니다.
position
- position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.
- 2차원 속성은 부모 자식 간 마진 병합 현상이 일어나고 자식의 높이값이 부모의 높이값에 영향을 줍니다. 또, top, left, bottom, right 속성을 사용할 수 없습니다.
- 3차원 속성은 부모 자식 간 마진 병합 현상이 없고 자식의 높이값이 부모의 높이값에 영향을 주지 않습니다. 또, top, left, bottom, right 속성을 사용할 수 있습니다.
마진 병합 현상이란 인접한 공간에 margin-top과 margin-bottom 속성을 적용할 경우 두 속성 중 큰 속성 값이 작은 속성값을 병합하는 현상을 말합니다. 자주 마주치는 마진 병합 현상에는 형제간에 발생하는 마진 병합 현상, 부모 자식 간에 발생하는 마진 병합 현상이 있습니다.
1) static
- position 속성을 별도로 지정하지 않았다면 기본값으로 static이 적용되고 HTML에 작성된 순서 그대로 브라우저 화면에 표시됩니다.
2) relative
- 요소를 원래 위치를 기준으로 상대적으로 배치해줍니다.
3) absolute
- 상위 요소중 position 값이 static이 아닌 첫번째 요소를 기준으로 배치됩니다. 만약 상위 요소중에 static이 아닌 요소가 없다면 body 요소를 기준으로 배치됩니다.
4) fixed
- 뷰포트를 기준으로 배치해주기 때문에 요소를 항상 고정된 위치에 배치할 수 있습니다.
5) sticky
- 다른 속성과 다르게 스크롤링 할 때 효과가 나타납니다.
- 예로 top을 0으로 주고 위로 스크롤 하면 첨에는 원래 위치에 있다가 해당 요소의 top이 0 이 되는 순간 더이상 해당 요소가 위로 스크롤링 되지 않고 그 위치에 고정됩니다.
float
- float는 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것으로 주로 삽화같은걸 넣을 때 사용하며 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시킵니다.
- float 효과를 주면 그 뒤에 나타나는 모든 element가 효과를 준 element를 피해가기 때문에 이를 제어하고자 그 뒤에 오는 element에 clear 속성을 줄 수 있습니다.
z-index
- position이 3차원인 경우 element끼리 겹칠 수 있게 되는데 이 순서를 변경하기 위해 z-index를 사용할 수 있습니다.
- 숫자가 클수록 겹쳤을 때 위에 위치하며 음수도 가능합니다.
- z-index 속성을 지정하지 않으면 element는 기본 렌더링 레이어(레이어 0)에 렌더링 되고 HTML 코드 순서 마지막에 위치한 요소가 더 앞에 배치되는데 만약 position 속성이 지정되지 않은 요소의 경우 마지막에 위치했더라도 position이 지정된 요소가 더 앞에 배치됩니다.
- 자식 element의 z-index 속성 값은 부모 안에서만 의미를 가지기 때문에 부모가 가지는 z-index값이 낮으면 자식의 z-index값이 높아도 부모의 쌓임 순서를 따릅니다.
6. 그래픽
transform
- element의 크기를 조절하거나 회전 또는 비틀기 기능을 사용할 수 있습니다.
- transform 속성은 중첩해서 사용하게 되면 아래에 있는것이 위에 있는 것을 덮어 쓰기 때문에 여러개의 효과를 주고 싶으면 공- 백을 기준으로 속성값을 입력하면 됩니다.
- 기본적으로 transform은 가운데(center)를 중심으로 해서 회전하거나 커지는데 tranform-origin 속성을 통하여 변형 원점을 지정할 수도 있습니다.
rotate : 입력한 각도만큼 회전하고 음수도 입력 가능
scale : x축 y축을 기준으로 입력한 비율만큼 크기를 조절
skew : x축 y축을 기준으로 입력한 각도만큼 비틈
translate : 선택한 오브젝트의 좌표 변경
7. 모션 그래픽
transition
- CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.
transition-property : 효과를 적용하고자 하는 css 속성
transition-duration : 효과의 지속시간을 초 단위 또는 밀리 초 단위로 지정
transition-timing-function : 효과를 위한 타이밍 함수를 지정
transition-delay : 효과를 주기전 대기 시간을 초 단위 또는 밀리 초 단위로 지정
transition : 모든 트랜지션 속성을 한번에 지정
animation
- HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
animation-name : @keyframes 애니메이션 이름을 지정
animation-duration : 한 싸이클 효과의 지속시간을 초 단위 또는 밀리 초 단위로 지정
animation-timing-function : 효과를 위한 타이밍 함수를 지정
animation-delay : 효과를 주기전 대기 시간을 초 단위 또는 밀리 초 단위로 지정
animation-iteration-count : 애니메이션 반복 횟수를 지정
animation-direction : 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정
animation : 모든 애니메이션 속성을 한번에 지정속성을 한번에 작성할때 순서를 지켜야 하는것은 아니지만 time 자료형을 사용하는 프로퍼티가 두가지(duration, delay)이기 때문에 시간의 경우 순서를 지켜서 작성해야 합니다.
시간값이 하나만 존재할 경우 duration으로 인식하고 만약 시간값이 두 개 존재할 경우 앞쪽에 있는 값이 duration, 뒤쪽에 있는 값이 delay입니다.
transition vs animation
- transition은 주로 속성이 hover와 같은 부수적인 액션에 의해 css 속성값이 변경될 때 사용하며 자동으로 발동되지 않습니다.
- animation은 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있습니다.
8. Media Query
- 미디어 쿼리는 화면, 티비, 프린터와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성됩니다.
- 미디어 타입은 생략 가능하며 생략할 경우 all 이 기본값이 되어 모든 미디어 타입에 적용되고 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다.
- 미디어 쿼리는 보통 반응형 웹을 만들기 위해 많이 사용하며 두 가지 방법으로 사용할 수 있습니다.
link 요소에 사용하여 특성 조건에 맞을 때 css파일을 불러오기
<link rel="stylesheet" media="screen and (max-width: 500px)" href="style.css" >스타일 시트내에서 @media를 사용하기
@media screen and (max-width: 500px) { /* 화면의 크기가 500px 이하일때 스타일 적용 */
body {
background-color: red;
}
}9. 반응형 속성
- 미디어 쿼리를 사용하지 않아도 CSS 속성을 통해 반응형 웹을 만들수 있습니다.
1) %
- px 대신 유동 단위인 %를 사용하면 좀더 유연한 코드를 만들 수 있습니다.
- 예를 들어 width를 50%로 지정하면 해당 element는 부모의 절반 사이즈를 가지게 됩니다.
2) vw, vh
- 풀 네임은 Viewport Width, Viewport Height로 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위입니다.
- 예를 들어 1vh는 뷰포트 높이의 1%로 계산되며 100vh로 지정시 화면 높이를 꽉 채울 수 있습니다.
- 100vh와 100%의 다른점은 %는 부모 요소를 기준으로 계산되기 때문에 부모에게도 height: 100%를 지정해야 합니다.
3) em, rem
- 위에서 font-size를 설명할때 나왔던 단위로 1em은 부모의 폰트 크기이고 1rem은 html 요소에 지정된 폰트 크기 입니다.
- 이것을 응용하면 만약 폰트 사이즈 변동이 있을 때 모든 폰트사이즈를 변경할 필요 없이 하나의 상위 폰트만 변경해주면 됩니다.
- 위 사진을 보면 em은 parent의 크기인 30px을 따라가지만 rem은 html의 크기를 따라가는 걸 볼 수 있습니다. 만약 html에 폰트 사이즈가 지정되어있지 않다면 rem은 브라우저의 폰트 크기를 따라갑니다.(브라우저의 기본 폰트 크기는기본은 16px로 설정되어있으며 브라우저 설정에서 변경 가능)
5) calc, min, max, clamp
calc()
- 매개변수로 하나의 표현식을 받고 표현식의 결과가 최종 값이 됩니다.
- vh와 자주 쓰이며 전체 화면 크기에서 헤드값을 뺄 때 유용하게 사용할 수 있습니다.
height: calc(100vh - 30px);
min(val, val2 ...)
- 콤마로 구분된 하나 이상의 표현식이나 값을 매개 변수로 사용하고 그 중 가장 작은 값을 사용합니다.
width:min(10%, 400px);
max(val, val2 ...)
- 콤마로 구분된 하나 이상의 표현식이나 값을 매개 변수로 사용하고 그 중 가장 큰 값을 사용합니다.
width:max(100%, 400px);
clamp(min, val, max)
- 매개 변수로 최소값, 선호값, 최대값 순으로 쉼표로 구분하여 사용합니다.
- 최소값은 음수까지 사용가능하며 선호값이 최소값보다 작을 경우 최소값을 사용합니다.
- 최대값은 선호값이 최대값보다 클 경우 최대값을 사용합니다.
width:clamp(1rem, 10vw, 100%);
코린이