CSS_01_선택자
- CSS: Cascading Style Sheet
HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트언어
HTML->정보
CSS->디자인
태그마다 스타일을 지정할 필요가 없어 정보와 디자인을 분리하여 사용할 수 있다.
- Style 지정하기
<head> 태그에서 <style>태그를 만들어 디자인할 요소 선언(스타일 속성, 속성값)
선택자(selector){ 스타일 속성: 속성값 }
- 선택자(selector): 디자인이 적용될 태그
1)전체선택자(*): HTML 문서에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정
2)태그 선택자: HTML 태그명으로 선택자 지정
[선택자를 구분하여 스타일을 지정할 경우]
3)클래스 선택자(.클래스명): HTML 클래스 속성값으로 선택
*클래스: 같은 속성의 여러 태그들을 그룹화하여 관리
예)p 태그 중 item 클래스만 스타일 변경하기
*사용방법: body에서 태그 속성에 class 지정, style 에서 class 호출
4)아이디 선택자(#아이디명): HTML 아이디 속성값으로 선택자를 지정하는 방법
예)태그 중 item 아이디 선택자만 스타일 변경하기
-사용방법: body에서 태그 속성에 id지정→style 에서 id 호출
*아이디명은 중복 불가, 재사용 불가->한 html 문서 내에 하나씩만 사용!!
*ctrl+F로 아이디 검색하여 이미 있는지 확인하기
- 클래스와 아이디 속성의 차이
*한번에 코드 입력: Alt+커서 클릭
*코드 적용 순서: 위에서 아래로 적용
위에서 전체 색깔을 분홍색으로 지정해도 아래에서 노란색으로 지정하면 노란색으로 바뀐다.
5)그룹선택자: 원하는 요소들을 , (콤마)로 묶어서 한번에 쓸 수 있는 선택자
6)계층선택자: 특정 위치의 요소를 계층적 구조로 선택
①자식 선택자: 기호 > , 한 단계 아래의 태그 예)ul의 자식 =li
②자손 선택자: 기호 띄어쓰기, 모든 하위 레벨의 태그 예)div의 자손=p, ul,p, span
③인접형제 선택자: 기호 +, 인접한 같은 수준의 태그 예)p의 인접형제=ul
④일반형제 선택자: 기호~ 모든 같은 수준의 태그 에)p의 일반형제=ul, p, span
7)반응선택자
①:hover: 요소에 마우스를 올렸을 때 선택되는 선택자, 태그명:hover
②: active: 요소를 클릭하고 있는 동안 선택되는 선택자, 태그명:active
4. 선택자의 우선순위(명시도): 아이디 선택자>클래스 선택자>타입선택자>전체선택자
예)위에서 아이디 선택자를 쓰고 아래에서 전체 선택자를 쓰더라도
아이디 선택자가 우선순위가 높으므로 아이디 선택자의 스타일이 적용된다.
그룹선택자: 타입선택자*선택한 선택자 수
(명시도 계산하기) 스타일별 가중치를 더해서 계산
li, span{} ->타입, 타입=가중치 2
.title+p->클래스+타입 =11
[실습]음식의 종류별로 스타일 지정하기
<head>
<style>
*{
font-family: '궁서체';
font-size: 30px;
background-color: beige;
}
p{
font-style: italic;
}
.fruit{
color: orange;
}
.vege{
color: green;
}
#nut{
color: chocolate;
}
</style>
</head>
<body>
<h3>공복에 좋은 음식</h3>
<p class="fruit">사과</p>
<p class="fruit">블루베리</p>
<p class="vege">양배추</p>
<p class="vege">감자</p>
<p class="vege">당근</p>
<p id="nut">견과류</p>
</body>[실습] CSS Diner
'HTML&CSS' 카테고리의 다른 글
| [CSS]3. 레이아웃 (0) | 2023.06.12 |
|---|---|
| [CSS]2. 영역 지정 (0) | 2023.06.11 |
| [HTML]2. 태그 (0) | 2023.06.09 |
| [HTML]1. HTML 개요 (0) | 2023.06.05 |