[클라우딩 어플리케이션 엔지니어링 TIL] 13. CSS 기초(단위, 글꼴, 배경)

1.학습 주제

• 단위
• 글꼴
• 배경

2.주요 메모 사항 소개

단위

• 단위에는 2분류의 단위가 존재. (고정단위, 상대길이단위)
• 고정단위(소수점은 사용하지 않는다.)

단위	설명
픽셀(px)	정확한 크기를 나타낼 때 사용 가장 일반적인 단위 보통의 웹 브라우저의 기본 폰트 크기는 16px이다.
포인트(pt)	일반적으로 문서에서 사용되는 단위 보통의 웹 브라우저의 기본 폰트 크기는 12pt이다.

• 상대길이 단위

단위	설명
em	요소의 글꼴 크기에 상대적인 단위 부모 태그의 폰트 크기에 영향을 받음 ex) 부모 태그의 폰트가 16px;일 경우, 2em은 32px이 된다.
rem	요소의 글꼴 크기에 상대적인 단위 html 태그의 폰트 크기에 영향을 받음 ex) html 태그의 폰트가 10px 부모 태그의 폰트가 16px;일 경우, 2rem은 20px이 된다.
%	부모 크기에 따라 영향을 받는 상대적인 단위 ex) 부모 태그의 폰트가 16px;일 경우, 50%은 8px이 된다.
vw(vh)	화면의 너비(높이)에 따라 영향을 받는 상대적인 단위 1vw(vh)는 현재 화면의 1% 너비(높이)라는 뜻이다. 100vw(100vh)는 현재 화면의 너비(높이)이다.
vmin(vmax)	화면에서 가장 작은(큰) 길이에 영향을 받는 상대적인 단위 화면이 가로 2000px 세로 860px 이면 작은(큰) 길이인 860(2000)을 기준으로 작성된다. 1vmin(vmax)는 860(2000)의 1%인 8.6(20)px을 나타낸다. 화면 길이가 바뀌면 그에 따라 변경된다.

글꼴

속성	설명	작성 예시
font-size	글자 크기를 변경할 수 있다.	font-size:16px;
font-family	글씨체를 변경할 수 있다. 여러개의 글씨체를 동시에 지정할 수 있다. 앞 폰트가 지원하지 않는 문자일 경우, 그 다음 폰트가 적용 된다.	font-family:'맑은 고딕','sans-serif';
font-weight	글자 두께를 변경할 수 있다. 숫자 표기: 100~900(백단위로 사용, 작을 수록 얇음) 문자 표기: normal, bold,lighter(부모보다 얇게),bolder(부모보다 굵게)	font-weight:700;
color	글자 색상을 변경한다. 키워드, rgb, rgba, 헥스코드 등을 넣어 색을 표현한다. transparent을 쓰면 투명이 된다.	color:#ffffff;
text-align	글자의 가로 정렬을 할 수 있다. 속성으로는 left, center, right 등이 존재	text-align:center;
line-height	글자의 줄간격을 변경할 수 있다. 기본적으로 normal 키워드를 기본으로 가지며 보통 1.2의 값을 가진다. 단위를 입력하지 않으면 퍼센트 단위로 인식된다.	line-height:2;
letter-spacing	자간을 변경할 수 있다. 보통을 em단위를 사용해 부모 폰트 크기에 따라 조절한다.	letter-spacing: 1.2em;

배경

속성	설명	작성 예시
background-color	배경색을 지정할 수 있다. currentColor를 사용하면 부모 요소의 색상을 상속한다.	background-color:blue;
background-image	배경 이미지를 넣을 수 있다.	background-image: url('이미지 주소');
background-repeat	배경 이미지의 반복을 지정할 수 있다. 기본적으로 이미지의 크기가 배경보다 작다면 이미지가 반복되어 나타난다. 속성 repeat(반복,기본값) repeat-x/repeat-y(x(y)축만 반복) round:(반복되는 이미지가 잘리지 않게 늘려서/줄여서 반복) space(이미지가 잘리지 않게 고르게 분배) no-repeat(반복 하지 않음)	background-repeat:space;
background-size	배경 이미지의 크기를 지정 단일값 입력 시 너비만 조절 두 개 값 입력 시 너비, 높이 제어 가능 contain 이미지가 부모 크기에 맞게 비율을 맞춰 알아서 맞춰진다. cover 이미지의 제일 작은 크기가 부모의 크기의 비율에 맞게 맞춰지며 나머지 커진 영역은 잘라낸다.	background-size:cover;
background-position	배경 이미지의 위치를 제어할 수 있다. 키워드(top,right,...), CSS 단위(10px 20px) 등으로 제어 가능 키워드로 제어할 때 offset을 지정가능	background-position: top 20px center;
background	위 배경 속성을 한번에 작성 가능 작성 순서는 상관없으나 "위치/크기"는 규칙을 지켜야한다	background: url('이미지 경로') x-repeat blue right center /100%;

3. 공부하며 느낀 점

웹 사이트의 기반인 단위, 글꼴, 배경에 대해 배웠다. 건물에 비유하자면 땅다지기를 한 것 같다.

4.출처