CSS란?
- 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
- 스타일링 도구로 독립적으로 기능하지 않음, 반드시 HTML이 있어야만 동작 가능
- 더 나은 UX를 제공하기 위해 사용
- 애플리케이션에 접근할 수 있는 UI를 만듦
?UI: 컴퓨터와 교류하기 위한 연결고(좋은 UX는 직관적이고 쉬운 UI에서 나온다!)
CSS 적용
- 적용하고자 하는 HTML 파일 Head에 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 적용</title>
<link rel="stylesheet" href="index.css"/>
</head>
link: HTML 파일과 다른 파일을 연결하는 목적으로 사용
rel: 연결하고자 하는 파일의 역할이나 특징
href="CSS 파일위치": HTML과 CSS 두 파일이 한 폴더 내에 있다면 파일 이름만 입력하고,
다른 폴더에 파일이 존재할 경우에는 절대 경로 or 상대 경로를 입력해 연결CSS 문법
Selector{
color: red;
font-size: 30px;
}
Selector: 요소의 이름이나 id, 클래스로 지정해 준다.
{}: 선언 블록
color: red; : 선언
color: 속성명
red: 속성값
;: 선언 구분자CSS 스타일을 적용할 수 있는 방법
- 인라인 스타일: 같은 줄에서 스타일을 적용
- 내부 스타일 시트: CSS 파일 내에 작성하는 내용을 별도로 파일로 구분하지 않고 style 요소 내에 작성
- 외부 스타일 시트: 별도의 파일로 구분하여 작성요소에 CSS 적용하기
<h1>제목 요소 h1</h1>
- h1 {
color: red;}
<h1 id ="hh">id가 있는 요소</h1>
- #h1{
color: red;}
<h2 class="hhh">class가 있는 요소</h2>
<h3 class="hhh">class가 있는 요소</h3>
<h4 class="hhh">class가 있는 요소</h4>
- .hhh{
color: red;}
요소를 만들거나, 요소에 스타일을 적용할 때, 항상 이름과 목적이 일치하는지 확인!!
+ id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 함! id명 중복X텍스트 꾸미기
글자 색상: color
배경 색상: background-color
박스 테두리 색상: border-color
글꼴: font-family
글자 크기: font-size
글자 굵기: font-weight
글자 밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
왼쪽 정렬: text-align: left
가운데 정렬: text-aling: center
오른쪽 정렬: text-aling: right단위
절대 단위: px, pt
상대 단위: %, em, rem, ch, vw, vh-
글꼴 사이즈를 정할 때
- 일반적인 경우 상대 단위인 rem 사용: 기기나 브라우저 사이지 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 px의 사용할 경우 작은 글씨를 보기 힘든 사용자가 기본 크기를 더 크게 설정해도 절대 크기인 픽셀로 고정되기 때문/ 픽셀은 크기가 고정되는 절대 단위이기 때문에 사용자 접근성이 불리함
-
화면 사이즈를 정할 때
- 반응형 웹에서 기준점을 만들 때: 디바이스 크기별로 CSS를 달리 적용해야 하는데, 디바이스 크기를 나누는 기준은 보통 px로 정함
- 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우: vw, vh 사용
- 1vw 는 보이는 영역 너비의 1/100, 1vh 는 보이는 영역 높이의 1/100을 뜻
