Ch8. CSS 속성

📚 너비(width, height)

width, height는 요소의 가로/세로 너비를 지정해주는 속성입니다.
CSS속성은 기본값 즉, 요소에 이미 들어있는 속성의 값을 알고 있는게 중요합니다.

기본값 - auto
단위 - px, em, vw 등 단위로 지정

기본값은 auto로 브라우저가 자동으로 너비를 계산하여 화면에 출력합니다.

width, height 값을 지정을 하지 않아도 이미 auto 값이 들어가 있습니다.

인라인 요소는 브라우저가 자동으로 가로너비와 세로너비를 계산할 때 포함한 콘텐츠 크기만큼 자동으로 줄어들게끔 설계 되어있습니다.

인라인요소는 가로너비, 세로너비를 지정해도 적용되지 않습니다.

블록 요소는 브라우저가 자동으로 요소의 크기를 계산할 때 가로 사이즈는 해당요소가 늘어날 수 있는 최고의 너비로 늘릴려고 노력하고, 세로너비는 인라인요소와 같이 최대한 줄여서 사용하려는 특징을 가지고 있습니다.

그 외에 내가 정확한 크기를 명시하고 싶다면 단위를 이용해서 가로, 세로 사이즈를 명시해주면 됩니다.

max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

기본값 - none (최대 너비 제한 없음)
단위 - px, em, vw 등 단위로 지정

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

기본값 - 0 (최소 너비 제한 없음)
단위 - px, em, vw 등 단위로 지정

📚 CSS 단위

px : 픽셀(하나의 점)
% : 상대적 백분율

em : 요소의 글꼴 크기

하나의 요소가 가지고 있는 기본적인 글꼴 크기가 1em입니다.

글꼴크기가 10px이라면 1em은 10px을 의미합니다.

글자 관련 속성은 상속이 된다는 걸 기억하셔야 합니다. font-size는 상속되고,

부모요소 글꼴 크기가 16px이면 자식요소 10em은 160px입니다.

rem : 루트 요소(html)의 글꼴 크기

em에 r만 붙어 있어서 비슷한 단위입니다.

루트요소는 최상위 요소인 html 요소이며, rem은 html요소에 지정되어 있는 글꼴크기를 기준으로 합니다.

vw : 뷰포트 가로 너비의 백분율
vh : 뷰포트 세로 너비의 백분율

📚 외부 여백(margin)

margin은 요소의 외부 여백(공간)을 지정하는 단축 속성입니다.

기본값 - 0 (외부 여백 없음)

auto - 브라우저가 자동으로 여백을 계산

자동으로 여백을 계산하게 되면 요소를 가운데 정렬 할 수 있습니다. 따라서 margin: auto는 가운데 정렬이라고 보면 됩니다.

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

margin 값으로 음수 값도 사용할 수 있습니다.

📢 margin은 1개의 값부터 4개의 값까지 다양하게 입력할 수 있고, 값의 개수에 따라서 각각의 값이 적용되는 위치가 달라집니다.

1개 : 상하좌우

2개 : 상하, 좌우

3개 : 상, 중, 하

4개 : 상, 우, 하, 좌 (시계방향)

margin-top, margin-bottom, margin-left, margin-right

요소의 외부 여백(공간)을 지정하는 기타 개별 속성들

📚 내부 여백(padding)

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

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

📢 요소의 내부에 여백이 생기는 것이기 때문에 여백이 생긴 만큼 요소 자체의 크기가 커지는 특징을 가지고 있습니다.

padding-top, padding-bottom, padding-left, padding-right

요소의 내부 여백(공간)을 지정하는 기타 개별 속성들

📚 테두리 선(border)과 색상 표현

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

border: border-width border-style border-color;

border은 요소의 테두리 선을 지정하는 단축 속성입니다.

📢 border을 적용하면 요소의 크기가 늘어납니다.

border-width

요소 테두리 선의 두께

단위 - px, em, % 등 단위로 지정

border-style

요소 테두리 선의 종류

기본값 - none (선 없음)
solid - 실선 (일반 선)
dashed - 파선

border-color

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

기본값 - black (검정색)
색상 - 선의 색상
trasparent - 투명

border-방향

border-방향-속성

색상 표현

색상 이름 - 브라우저에서 제공하는 색상 이름
브라우저에 따라 달라질 수 있습니다.
ex) red, tomato, royalblue…

Hex 색상코드 - 16진수 색상
ex) #000, #FFFFFF

RGB - 빛의 삼원색
ex) rgb(255, 255, 255)

RGBA - 빛의 삼원색 + 투명도
ex) rgba(0, 0, 0, 0.5)

📢 실제 제품에서는 16진수 색상, RGB 방식을 추천합니다.

📚 모서리 둥글게(border-radius)

이 속성을 사용하면 요소의 모서리를 둥글게 깎아 줍니다.

기본값 - 0 (둥글게 없음)
단위 - px, em, vw 등 단위로 지정

📚 크기 계산(box-sizing)

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

기본값 - content-box (요소의 내용(content)으로 크기 계산)
border-box - 요소의 내용 + padding + border로 크기 계산

요소에 지정한 가로너비와 세로너비의 크기를 유지한채 내부여백과 테두리선을 추가하고 싶다면 box-sizing을 border-box로 지정하면 됩니다.

📚 넘침 제어(overflow)

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성입니다.

기본값 - visible (넘친 내용을 그대로 보여줌)
hidden - 넘친 내용을 잘라냄

auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

값으로 scroll을 사용하면 수평, 수직 스크롤바를 둘다 보여줍니다.
넘치지 않는 부분은 스크롤바를 생성할 필요가 없기 때문에 보통의 경우 scroll보단 auto를 사용합니다.
auto는 넘친 부분만 자동으로 판단하여 스크롤바를 생성해주세요 라는 뜻입니다.

📚 출력 특성(display)

요소의 화면 출력(보여짐) 특성을 지정합니다.

기본값 - block, inline, inline-block

• 따로 지정해서 사용하는 값
  flex - 플렉스 박스 (1차원 레이아웃)
  grid - 그리드 (2차원 레이아웃)
  none - 보여짐 특성 없음, 화면에서 사라짐

ex) 기본적으로 span요소는 인라인 요소이지만 display 속성을 통해서 보여지는 근본의 특성을 다른 것으로 바꿀 수 있습니다. (display: block)

📚 투명도(opacity)

기본값 - 1 (불투명)

• 따로 지정해서 사용하는 값
  0 ~ 1 - 0 부터 1 사이의 소수점 숫자

0인 경우에는 투명, 1인 경우에는 불투명

소수점 단위에서 앞에 있는 정수 0 은 생략할 수 있습니다.

📚 글꼴

font-style

글자의 기울기

기본값 - normal (기울기 없음)
italic (이텔릭체)

font-weight

글자의 두께

기본값 - normal, 400 (기본 두께)
bold, 700 - 두껍게
100 ~ 900 - 100단위의 숫자 9개, normal과 bold 이외 두께

가장 얇은 100부터 가장 두꺼운 900까지 아홉단계를 지정할 수 있는데 그 중에 일반적으로 많이 사용하는 건 400과 700입니다.

font-size

글자의 크기

기본값 - 16px
단위 - px, em, rem 등 단위로 지정

line-height

한 줄의 높이, 행간과 유사

숫자 - 요소의 글꼴 크기의 배수로 지정
단위 - px, em, rem 등의 단위로 지정

그냥 숫자 입력하면 ‘요소의 글꼴 크기의 배수로 지정하겠습니다’ 라는 의미입니다. 1.4면 ‘글꼴 크기의 1.4배를 높이로 하겠습니다’ 라는 뜻이죠.

별도의 단위를 사용하지 않는 배수를 입력하는 것을 권장합니다.

font-family

글꼴(서체) 지정

font-family: 글꼴1, "글꼴2", ... 글꼴계열;

값으로 사용하길 원하는 글꼴 후보를 쉼표로 구분해서 여러 개를 명시할 수 있습니다. 그 개수는 제한이 없고 아예 작성하지 않아도 상관 없습니다. 마지막에 필수로 글꼴계열을 작성해줘야 합니다.

📢 글꼴에 왜 후보라는 개념이 있을까? 후보를 몇개 지정해주면 브라우저가 그 후보들 중에 사용 가능한 글꼴을 지정해서 사용하게 됩니다.

제일 먼저 명시되어있는 후보부터 사용해보고 사용이 가능하면 뒤쪽 내용은 무시합니다.

명시해놓은 여러가지 글꼴 후보들을 순서대로 사용하기 위해 시도를 해보다가 명시된 글꼴들을 다 쓸 수 없다면 마지막에 명시된 글꼴계열 중에서 브라우저가 사용할 수 있는 아무런 폰트나 가져가서 화면에 출력합니다.

📢 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 합니다.

📢 글꼴계열에는 무엇이 있을까? sans-serif : 고딕체 계열

📚 문자

color

글자의 색상

기본값 - rgb(0, 0, 0) 검정색
색상 - 기타 지정 가능한 색상

text-align

문자의 정렬 방식

기본값 - left (왼쪽 정렬)
right - 오른쪽 정렬
center - 가운데 정렬

text-decoration

문자의 장식(선)

거창한 것을 장식하는 게 아니라 선을 추가할 수 있는 개념입니다.

기본값 - none (장식 없음)
underline - 밑줄
line-through - 중앙 선

text-indent

문자 첫 줄의 들여쓰기 내어쓰기

기본값 - 0 (들여쓰기 없음)
단위 - px, em, rem 등 단위로 지정

📢 음수를 사용하여 내어쓰기를 할 수 있습니다.

📚 배경

background-color

요소의 배경 색상

기본값 - transparent (투명함)
색상 - 지정 가능한 색상

background-image

요소에 배경으로 이미지를 삽입할 때 사용

기본값 - none (이미지 없음)

url(”경로”) - 이미지 경로

이미지를 사용하려면 url(”경로”) 함수로 이미지 경로를 명시해야 합니다. 따옴표를 붙여주는게 좋습니다.

background-repeat

이미지를 하나 삽입하게 되면 기본적으로 이미지는 바둑판식으로 반복되어 출력됩니다. 그래서 이를 제어하기 위해 사용하는 속성은 background-repeat 입니다.

기본값 - repeat (이미지를 수직, 수평 반복)
repeat-x : 이미지를 수평 반복
repeat-y : 이미지를 수직 반복
no-repeat : 반복 없음

background-position

요소의 배경 이미지 위치를 지정할 때 사용

방향 - top, bottom, left, right, center 방향
단위 - px, em, rem 등 단위로 지정

작성방식이 두가지가 있습니다. 첫번째는 방향으로 입력하는 개념이고 두번째는 x축 y축의 단위를 입력하는 개념이 있습니다.

background-size

요소의 배경 이미지 크기

기본값 - auto (이미지의 실제 크기)
단위- px, em, rem 등 단위로 지정
cover - 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain - 비율을 유지, 요소의 더 짧은 너비에 맞춤

background-attachment

요소의 배경 이미지 스크롤 특성

기본값 - scroll (이미지가 요소를 따라서 같이 스크롤)
fixed - 이미지가 뷰포트에 고정, 스크롤 X