5-1. CSS 스타일과 스타일 시트, 스타일 선택자

5-1. CSS 스타일과 스타일 시트, 스타일 선택자

2021. 10. 10. 20:18ㆍHTML + CSS + JS

728x90

CSS 스타일 형식은

선택자 { 속성1 : 속성값1; 속성2: 속성값2}

이런식으로 구성된다.

세미콜론; 으로 구분해서 스타일 규칙을 여러개 지정할 수 있다.

주석 처리는 /* */ 이렇게 한다.

스타일 시트는 총 4가지로 구분할 수 있다.

일단 스타일 시트는 스타일 규칙을 한눈에 확인하고, 필요할 때 마다 수정하기 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 한다.

1️⃣ 브라우저 기본 스타일 : 웹 브라우저에 표시할 때 기본 스타일을 사용하는 것을 말한다.

2️⃣ 인라인 스타일 : 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것을 인라인 스타일이라고 한다.

3️⃣ 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다.

<head> 태그 안에 <style> .. </style>로 작성한다.

4️⃣ 외부 스타일 시트 : 스타일 정보를 따로 저장해 놓고 사용하는 것을 스타일 시트라고 하고, *.css 확장자를 사용한다.

이 태그로 스타일 시트를 연결할 때 사용한다.

스타일 선택자

1️⃣ 전체 선택자 : 스타일을 문서의 모든 요소에 적용할 때 사용한다. 그리고 웹 브라우저의 기본 스타일을 초기화 할 때 사용한다.

2️⃣ 타입 선택자 : 특정 태그를 사용한 모든 요소에 스타일을 적용한다. 즉, 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용된다.

3️⃣ 클래스 선택자 : 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용한다. 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하며, 클래스 스타일은 여러 곳에 적용할 수 있다.

.클래스명 { 스타일 규칙}

4️⃣ id 선택자 : 클래스 선택자와 비슷하게 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용한다. 이때 id 선택자는 . 대신 #을 사용한다.

#아이디명 { 스타일 규칙 }

❗❗클래스 선택자와 아이디 선택자의 차이점으로는 클래스 선택자는 문서에서 여러번 적용할 수 있는 반면, id 선택자는 문서에서 한번만 적용할 수 있다는 점이다!

5️⃣ 그룹 선택자 : 선택자를 이용해 스타일을 정의하다 보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있는데 이럴 때는 쉼표, 로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번에 정의한다.

선택자1, 선택자2 { 스타일 규칙 }

6️⃣

* 태그와 요소의 차이점

태그와 요소는 비슷하다고 생각할 수 있는데

ex) <h1> CSS </h1> 이렇게 있다면 <h1>가 태그이고, CSS 이건 h1요소라고 한다.

따라서 차이점이 있다!

728x90

💖💗