정의
- CSS(Casacading Style Sheet) : HTML과 함께 웹 페이지의 디자인을 구성하는 언어
구조
- 기본
selector {
property: value;
property: value;
}선택자(selector)
- 전체 선택자
*: 모든 HTML 요소에 스타일을 적용함
* { <!-- 모든 요소에 적용함 -->
text-align : center ;
}- 태그 선택자
tag name: 특정 HTML 요소에 스타일을 적용함
p { <!-- <p>에만 적용함 -->
background-color : blue ;
}- 클래스 선택자
.: class 속성을 지정하여 스타일을 적용함
.food { <!-- food 클래스에만 적용함 -->
font-style : italic ;
}- ID 선택자
#: ID 속성을 지정하여 스타일을 적용함
#change { <!-- change ID에만 적용함 -->
width : 300px ;
}- 그룹 선택자 : 다양한 유형의 요소를 한번에 선택할 때 쉼표
,를 사용함
h1, p, .cla { <!-- <h1>와 <p> 그리고 클래스 cla에 적용함 -->
color : red ;
}스타일 우선순위
- 적용 방법에 따른 우선순위
- 인라인(Inline) 스타일 : HTML 요소 내부에 위치한 스타일
<h1 style="background-color : black">True of False?</h1>- 내부/외부 스타일 시트 : 태그 안에 위치에 따라 결정됨
- 내부 스타일 시트 : 안에
<head>
<style>
* {
background-color : white ;
text-align : right ;
}
</style>
</head>
- 외부 스타일 시트 : 태그 안에 태그를 사용하여 스타일 정보를 가진 별도의 파일을 불러옴
<link rel="stylesheet" href="example.css">
<!-- href 뒤에는 외부 스타일 시트의 파일 경로를 넣어줌-->- 웹 브라우저 기본 스타일
- 적용 범위에 따른 우선순위
!important: 가장 높은 우선순위를 둘 속성과 값 뒤에 쓴다
<style>
p {
color : green; !important;
}- 인라인(Inline) 스타일
- 아이디(ID) 스타일
# - 클래스(Class) 스타일
. - 태그(Tag) 스타일
p, h1, ul ...
문제
<p style="color : pink" id="kiara" class="kirakira">Good Luck</p>p { color : black ; }
#kiara { color : blue ; }
.kirakira { color : red ; }이 때 출력되는 'Good Luck'의 색상은?
style > ID > class > tag/type 순서로 우선순위가 높기 때문에 black이 나온다.
다음 코드를 실제로 실행해보면,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<html lan = "EN">
<link rel="stylesheet" href="priority.css">
<title>practice</title>
</head>
<body>
<h1 style="color : pink" id="kiara" class="kirakira">Good Luck</h1>
</body>
</html><!-- file name : priority.css -->
p { color : black ; }
#kiara { color : blue ; }
.kirakira { color : red ; } 가장 높은 우선순위에 있던 인라인 스타일이 적용된다.
위와 같은 코드에서 <h1>만 다음과 같이 변경해서 실행하면,
<h1 id="kiara" class="kirakira">Good Luck</h1> 
인라인 다음 우선순위인 ID 스타일이 적용된 걸 확인할 수 있다.
Ref. 박규하 코치님, blueshare님 블로그
Front/Back Beginner