📌css? html로 짠 골격에 옷을 입혀 꾸며주는 것.
css를 사용하는 이유?
- html의 내용과 상관없이 디자인만 바꿀 수 있다.
- 다양한 기기에 탄력적으로 바뀌는 문서를 만들 수 있다 (패드, 노트북, 핸드폰..)
스타일 형식은 아래와 같으며, 맨 앞의 선택자는 어느 태그에 적용할 것인지를 알려준다.
선택자 {
속성1: 속성값1;
속성2: 속성값2;
}-
내부 스타일 시트 : 스타일을 여러 곳에 적용할 때 사용한다.
<head>안에서 정의하고<style>,</style>태그 사이에 작성한다. -
외부 스타일 시트 : 여러개의 웹 문서에 일괄적으로 적용하기 위해 사용한다. *.css 의 확장자명을 가지며 웹 문서에
<link>태그로 연결한다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">선택자(selector) 알아보기
| 선택자 | 기호 | 설명 |
|---|---|---|
| 전체 선택자 | * | 스타일의 모든 요소를 선택할 때에 사용한다. 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다. |
| 타입 선택자 | 타입명 | 모든 텍스트 단락의 글자를 선택 |
| 클래스 선택자 | 클래스명 | 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 사용한다. 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이 때 클래스 이름 앞에 꼭 마침표(.)를 붙여야 한다. |
| id 선택자 | 아이디명 | 아이디명 앞에 마침표 대신 #기호를 사용한다. |
| 그룹 선택자 | 선택자를 , 으로 나열 | 요소들의 스타일 규칙이 같을 경우 그룹 선택자를 이용하여 한꺼번에 정의한다. |
✏️클래스 선택자와 id 선택자의 차이
클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 점. id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정할 때 사용한다.
기록하는 습관을 기르고 있습니다.