CSS의 속성

2023. 01. 31.

📦 박스 모델 (display)

요소가 화면에 출력되는 특성이다.

크게 인라인 요소와 블록 요소로 구분된다.

인라인 요소는 글자를 만들기 위한 요소들이고 블록 요소는 레이아웃을 만들기 위한 요소들이다.

Inline 요소

<span> 태그는 대표적인 인라인 요소이다.

기본적으로 다른 요소가 같은 줄에 나타난다.

이는 포함한 콘텐츠 크기만큼 자동으로 크기가 결정된다. 이는 style 속성으로 width와 height를 주어도 변하지 않는다.

margin은 좌우만 적용되고 상하는 적용되지 않는다. padding은 상하좌우 전부 적용되지만 상하 부분은 배경색만 적용이 가능하다.

<span> 태그(inline 요소) 안에 <div> 태그(block 요소)를 넣는 것은 쓰지 않는다.

Blcok 요소

<div> 태그는 대표적인 블록 요소이다.

기본적으로 다른 요소가 다음 줄로 띄어진다.

style 속성으로 width와 height가 적용 가능하다.

margin과 padding도 전부 적용이 가능하다. 그러나 margin은 세로의 경우 위 아래가 상쇄된다.

Inline-block 요소

block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념이다.

둘의 특성을 합친 것이라 inline-block이다.

Inline-block 요소로 지정하고 싶으면 css에서 아래와 같이 지정하면 된다.

span {
	display: inline-block;
}

margin에서 세로 상쇄가 없다.

가로 공간을 공유한다.

width, height도 적용 가능하다.

[요약] 표

이에 따라 아래처럼 span에 세로 padding을 주면 배경색만 적용된다.

또한 div태그 2개에 첫번째 div에 margin-bottom을 20px, 두번째 div에 margin-top을 50px 주게 되면 서로 상쇄되어 큰 쪽인 50px만 남게된다.

이러한 단점을 극복하기 위해서는 inline-block을 사용하면 된다.

📐 Width와 Height

요소의 가로/세로 너비를 정의하는 속성이다.

auto 값을 주면 브라우저가 너비를 계산한다.

CSS 크기 단위

픽셀은 절대적인 고정된 값이다.

vw, vh는 viewport width, viewport height의 약자이며 뷰포트 크기에 따라 변화한다는 점에서 반응형 웹을 만드는 데에 사용된다.

em이나 rem은 보통 font-size에서 사용한다.

어떠한 값을 계산하여 적용하고 싶은 경우 Calc()를 사용한다.

line-height

line-height는 영역 요소 내부에서 글자 한 줄이 가지는 높이이다.

max, min

max(min)-width, max(min)-height

▫️ Margin

요소의 외부 여백(공간)을 지정하는 단축 속성

auto 값을 넣으면 가운데 정렬에 활용할 수 있다.

음수를 사용할 수 있다.

아래와 같이 상, 우, 하, 좌 의 순서로 4가지를 한번에 설정할 수 있다.

개별적으로 margin-top, margin-bottom, margin-left, margin-right를 사용할 수 있다.

🔲 Padding

요소의 내부 여백을 지정하는 단축 속성

요소의 크기가 커지게 된다.

마진과 같이 다음처럼 설정할 수 있다.

마진과 같이 top, bottom, left, right도 사용 가능하다.

〰 Border

요소의 테두리 선을 지정하는 단축 속성

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

div {
	border: 1px solid black;
}

border-width

테두리 선의 두께

마진, 패딩과 같은 순서로 지정 가능

border-width: top right bottom left

border-style

테두리 선의 스타일

마진, 패딩과 같은 순서로 지정 가능

속성값에는 solid, dashed, dotted, double, groove, ridge, inset, outset 등 적용 가능

border-color

테두리 선의 색상

마진, 패딩과 같은 순서로 지정 가능

속성값에는 색상 입력 가능

투명은 transparent

border-방향-속성

border-top-width, border-bottom-style 등으로 사용 가능

border-radius

요소의 모서리를 둥글게 깎음

px, em, vw 등의 단위로 지정

%로도 지정 가능 (50%가 원)

10px을 입력하면 반지름이 10px인 원으로 깎게 된다.

🗃 Box-sizing

요소의 크기 계산 기준을 지정한다.

div { box-sizing: border-box; }

content-box로 지정하면 요소의 내용으로 크기를 계산한다. (기본값)

border-box로 지정하면 요소의 내용+padding+border로 크기를 계산한다.

🌊 Overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성. 부모요소에서 설정해줌.

내용이 넘친 경우

내용이 넘치지 않은 경우

overflow-x, overlow-y 로 축 별로 지정 가능

🖥 Display

요소의 화면 출력이 어떻게 보여지는지 결정하는 특성

div {
	display: none;
}

🫥 Opacity, Visibility

Opacity

opacity 속성의 값이 1이면 완전히 불투명하고 0이면 보이지 않는다. 이 값을 통해 색상을 조절할 수도 있다. (이를 색을 쪼갠다고 한다)

Visibility

visibility 속성이 hidden이면 요소가 보이지 않는다.

요소를 숨기는 3가지 방법

opacity: 0

visibility: hidden

display: none

📦 박스 모델 (display)

Inline 요소

Blcok 요소

Inline-block 요소

[요약] 표

📐 Width와 Height

CSS 크기 단위

line-height

max, min

▫️ Margin

🔲 Padding

〰 Border

border-width

border-style

border-color

border-방향-속성

border-radius

🗃 Box-sizing

🌊 Overflow

🖥 Display

🫥 Opacity, Visibility

Opacity

Visibility

요소를 숨기는 3가지 방법

📄 Font