오늘은 선택자 selector에 대해 알아보려고 한다.
선택자(selector)- 스타일 적용 대상 지정/css 핵심 개념
내부 스타일 시트는 <head> 부분에, 외부 스타일 시트는 별도의 파일에 스타일 관련 코드 입력함.
웹 페이지 전체에 동일한 스타일 적용하면 문제가 안되지만, 일반적으로 웹페이지 각 부분마다 다른 스타일을 적용
예) 상단에는 바다 배경에 글 오른 정렬, 또 하단에는 배경 없이 일러스트 삽입에 왼쪽 정렬과 같이 부분적으로 다른 디자인인 경우, 각 스타일을 어디에 적용할지, 범위 지정해 줄 필요 있음
1. 전체 선택자
어떤 스타일을 웹 문서 전체에 적용할 때 사용
| *{속성명:속성값;} |
2. 태그 선택자
특정 태그에 스타일 적용할 때 사용
태그 선택자를 사용하면 같은 이름을 가진 태그 모두에 스타일 적용
예) <p> 태그를 선택하면 웹 문서의 모든 <p> 태그에 같은 스타일 적용
| HTML태그명{속성명:속성값;} |
3. 클래스 선택자
같은 태그에 다른 스타일을 적용 경우&서로 다른 이름을 가진 태그 일부에만 같은 스타일을 적용
(클래스 선택자 사용하려면 먼저 HTML 태그에 클래스를 부여해야 함)
| .클래스명{속성명:속성값;} |
4. 아이디 선택자
태그에 아이디를 부여하고, 아이디 선택자를 사용해서 해당 아이디에만 스타일 적용
클래스와 차이점 :
클래스- 여러 개의 태그에 같은 클래스 부여 but 아이디- 딱 한 개 태그에만 아이디 부여
(하나의 웹 문서에서 중복되는 아이디 불가능)
| #아이디명{속성명:속성값;} |
5. 세미콜론 (;)
여러 가지 속성을 한 번에 적용- 인라인 방식에서 처럼 세미콜론(;)으로 각 속성명, 속성 값 구분
행복한 사람들은 행동을 계획하지,
결과를 계획하지 않는다.
-Dennis Waitley-
728x90
'일과공부' 카테고리의 다른 글
| [드론 기초] ➁ 드론의 역할 (0) | 2021.08.07 |
|---|---|
| [드론 기초] ① 드론(UAVs)이란? (0) | 2021.08.06 |
| [HTML/CSS 기초 강의] ⑫ HTML에 CSS적용 (0) | 2021.08.06 |
| [HTML기초강의] ⑪ 순서있는 <ol>,목록중첩 (0) | 2021.08.04 |
| [HTML 기초 강의] ⑩ 순서 없는 <ul>, <li> 태그 (0) | 2021.08.03 |
