1. CSS란?
구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어 (독립적으로 기능 X -> HTML에서 href 속성으로 연결)
2. CSS 구조
☆ 각 속성과 속성 사이는 반드시 세미콜론(;)으로 구분!!
3. CSS 속성
color : 글자 색 변경 (이미 정의된 색, 16진수 색상 코드, RGB 색상 등) / 배경 색 : background-color
font : 글자 글꼴, 크기, 굵기(weight) 등을 변경
.input {
font-family: "monospace", "NanumGothic", "Consolas";
} //글꼴은 쉼표로 구분해 순서대로 표현하고 싶은 글꼴이 없을 때에 대비책으로 사용된다.(fallback).input {
font-weight: 숫자 (100 ~ 900);
}
//lighter = 100, normal = 400, bold = 700, bolder = 900text-decoration : 밑줄, 가로줄
text-align : 텍스트 정렬 방향 (가로)
.input {
text-align: left/right/center/justify; //justify는 양쪽 정렬(띄어쓰기 간격 변할 수 있음)
}
//vertical-align : 세로로 정렬 (부모 엘리먼트가 display: table-cell인 경우에만 사용)letter-spacing : 글자 사이 간격 (자간을 변화시키면 어간도 변한다. -> 역은 X)
word-spacing : 단어 사이 간격
line-height : 글 행 사이 간격
4. 기본적인 셀렉터(selector)
스타일을 지정하고자 하는 요소를 선택할 때 사용되는 CSS 규칙
|
class |
id |
|
. (점)으로 선택 |
# (샵)으로 선택 |
|
동일한 값을 갖는 엘리먼트 많음. |
문서 내에서 단 하나의 엘리먼트에만 적용 |
|
스타일의 분류에 사용 |
특정 엘리먼트를 이름 붙이는 데 사용 |
5. 절대 단위 vs 상대 단위
절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등
+ font-size 추천
(1) 보통 : rem(root em) 사용
root의 글자 크기가 1rem이므로 이를 기준으로 설정 (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경돼 계산이 어렵다.)
(2) 절대적이고 확실한 크기 : px(픽셀) 사용
(3) 반응형 웹에서 기준점을 만들 때 : px(픽셀) 사용
반응형 웹은 디바이스의 너비에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말한다. 이런 경우 디바이스 크기 별로 CSS를 다르게 적용해야 하는데, 그 기준을 보통 px로 정한다.
(4) 화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우 : vw, vh 사용
웹사이트의 보여지는 영역을 viewport라고 한다. vw, vh는 viewport width, heigh를 의미한다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트가 100vw, 100vh를 사용한 것이다. (<body> 태그에서 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때의 비율이다.)
6. 박스 모델
- 모든 콘텐츠는 각자의 영역을 가지며, 보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스가 된다.
박스는 항상 사각형이고 그 너비와 높이가 있다. 따라서 CSS로 크기를 설정해줄 수 있다.
- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
- 패딩(padding) : 내용과 테두리 사이의 간격 (눈에 보이지 X)
- 테두리(border) : 내용과 패딩 주변을 감싸는 테두리
- 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 (눈에 보이지 X)
7. 줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline)
· 줄바꿈이 되는 태그 : <h1> <p> -> block 박스
· 줄바꿈이 되지 않는 태그 : <span> -> inline 박스
| block | inline-block | inline | |
| 줄바꿈 여부 | O | X | X |
| 기본적으로 갖는 너비 | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 여부 | O | O | X |
'TIL 👩🏻💻' 카테고리의 다른 글
| TIL : Calculator (0) | 2021.03.08 |
|---|---|
| TIL : 이중 for문 (0) | 2021.03.07 |
| TIL : HTML (0) | 2021.03.05 |
| TIL : 반복문 (0) | 2021.03.04 |
| TIL : 조건문, 문자열 (0) | 2021.03.04 |