CSS란
Cascading Style Sheet
HTML 문서에 스타일을 추가해주는 역할.
HTML의 화장품 느낌~.. 그니까 HTML(얼굴)이 있어야 CSS(화장) 가능.. 아주 당연한 얘기같지만 ㅎㅋ 나는 초보니까
스타일 선언문
선택자{
속성명: 속성값;
}
주석은..
/* 주석내용 */
선택자
- 전체 선택자 : *
문서 내 모든 요소 - 태그 선택자 : 태그명
특정 태그의 모든 요소 - 클래스 선택자 : .클래스값
특정 클래스 값이 지정된 모든 요소 - 아이디선택자 : #아이디값
- 그룹선택자 : 선택자 선택자 ...
여러 유형의 선택자를 한꺼번에 선택
이 선택자라는 친구가 좀 흥미로운데.. 우선순위가 있다..!!
자세한 내용은 아래 코드 주석에
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
color:red;
}
li{
color:blue;
}
/*나중에 쓴 블루가 레드위에 겹쳐지는 순서로 적용*/
#poppin{
color:green;
}
li.hiphop{
color:purple;
}
/*클래스를 선택자로 하면 앞에 .을 꼭 찍기
앞에 li를 붙이면 li중에서 hiphop을 고른 것
li가 없으면 클래스 전체*/
li#belly{
color:orange;
}
/*li내에서 id가 belly인것*/
/*
선택자 우선순위 : 쓰여진 순서랑 관계없이 적용되는순위
1. 아이디
2. 클래스
3. 태그
*/
h2,p,li{
color:yellow;
}
</style>
</head>
<body>
<h2>춤의 장르</h2>
<ul>
<li class="hiphop">비보잉</li>
<li class="hiphop" id="poppin">팝핀</li>
<li class="hiphop">락킹</li>
<li id="belly">벨리댄스</li>
<li id="jazz">재즈</li>
</ul>
</body>
</html>
고양이가 밟은 코드