CSS의 단위

절대 단위

• px : 픽셀 스크린 상에서의 한 점을 기준으로 한 단우, 가장 흔히 사용되며 일반적으로 고정된 크기를 지정하는데 사용

상대 단위

• em : 현재 요소의 font size를 기준으로 한다. 예를 들어, 요소의 font-size가 16px일 떄, 1em은 16px과 동일.
• rem : HTML의 루트 요소의 font-size를 기준으로 합니다.
• vw(뷰포트 너비): 뷰포트(=해당 브라우저)의 너비의 1%에 해당합니다. 예를 들어, 뷰포트 너비가 1000px이며, 1vw는 10px이다.
• vh(뷰포트 높이) : 뷰포트의 높이의 1%에 해당한다.
• % : 상위 요소의 크기를 기준으로 한 백분율이다. 상위 요소의 크기에 따라 다른 값을 가진다.
• vmin :뷰포트의 너비, 높이 중 더 작은 쪽의 1%
• vmax : 뷰포트의 너비, 높이 중 더 큰 쪽의 1%

Width, Height

Width,height : 요소의 가로/세로 너비

auto : 브라우저가 너비를 계산
단위 : px, em, vw 등 단위로 지정

max-width /max-height : 요소가 커질 수 있는 최대 가로/세로 너비

0 : 내부 여백 없음
단위 : px,em,vw 등 단위로 지정
% : 부모 요소의 가로 너비에 대한 비율로 지정

• max로 지정해 놓은 만큼만 커지고 그 이상으로 늘어나지는 않는다.

min-width, min-height

0 : 최소 너비 제한 없음
auto : 브라우저가 너비를 계산
단위 : px, em, vw 등 단위로 지정

• 마찬가지로 min으로 지정해 놓은 만큼만 작아지고 그 이하로 작아지지 않는다.
  

calc() : 사용자가 원하는 크기의 값을 계산하여 적용

ex. min width: calc(500px - 50%) : 500px의 50%까지 최소로 줄어들 수 있다.

• 계산할 때 단위가 다르면 사용하기 용이하다.(자동으로 계산하여 줌)

line-height

normal : 브라우저의 기본 정의를 사용
숫자 : 요소의 글꼴 크기의 배수로 지정
단위 : px, em, rem 등의 단우리ㅗ 지정
% : 요소의 글꼴 크기의 비율로 지정

실습. calc 및 line-height 사용하기

이 문제를 해결하려면 KDT 박스를 정중앙 정렬하려는 방법을 사용해야 한다.
1. 배경색을 넣어주는 div 태그를 만들어주고

<div class="bk">
    <div class="kdt">KDT</div>
</div>

2. 그 안에 파란색 상자를 만들어주는데
3. 이때, 파란색 상자의 너비, 높이는 width : calc(500px-90%) height : calc(500px-90%)
   로 계산하도록 한다.

4..bk에 대해서는 position : relative
5. .kdt에 대해서는 position : absloute라고 하여 부모(상위) 요소인 .bk을 절대 위치로 잡는다.

Border

border: 선-두께 선-종류 선-색상;

border-width

medium : 중간 두꼐
thin : 얇은 두께
thick : px, em, % 등 단위로 지정

border-style

none : 없음
solid : 실선
dotted : 점선
dashed : 파선
double : 두줄선
groove : 홈이 파여있는 모양

border-color

선의 색상
transparent : 투명

border-방향

border-방향-속성

Border-radius

border-radius

0 : 둥글게 없음
커질 수록 더 둥글게 변한다.
단위 : px, em, vw 등 단위로 지정
원만들기!
border radius : 50%

Box-sizing

box-sizing

요소의 크기 계산기준을 지정

opacity

요소의 투명도
1 : 불투명
0~1 : 0부터 1 사이의 소수점 숫자

opacity : 0;

모습만 숨기는 방법 / 속성 남음/ 자리차지

visibility : hidden;

모습과 속성을 숨기는 방법 /자리차지

display : none

그냥 없애 버리는 방법/자리도 없어짐

overflow

visible : 넘친 내용을 그대로 보여줌

hidden : 넘친 내용을 잘라냄

scroll : 넘친 내용을 잘라내고 스크롤바 생성

auto : 넘친 내용이 있는 경우에만 스크롤바 생성

position

static : 정적

relative : 상대 위치 지정 방식

position : relative;
요소 자신을 기준으로 배치한다.

absolute : 절대 위치 지정 방식

position : absolute;
위치 상 브라우저를 기준으로 배치한다.
이때, 부모가 static일 경우 부모의 부모를 기준으로 배치한다.

fixed : 고정 위치 지정 방식

position : fixed;
뷰포트(브라우저)를 기준으로 배치된다.
챗봇과 같이 스크롤을 아무리 옮겨도 항상 같은 자리에 유지되는 거