외부 스타일 시트 가저오기
css상단에 html charset 과 같은 내용을 써줘야함
; 안붙이면 적용안됨
@charset: "UTF-8";
p{
color: deeppink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>externalCSS</title>
<link rel="stylesheet" type="text/css" href="../css/externalCSS.css">
</head>
<body>
<p>사과사과사과</p>
</body>
</html>
@import를 사용해서 불러올 수도 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>externalCSS</title>
<style type="text/css">
@import url("../css/externalCSS.css");
</style>
</head>
<body>
<p>사과사과사과</p>
</body>
</html>
인라인 스타일은 우선순위가 높지만
유지보수가 힘들어서 거의 안쓴다고 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inlineStyle</title>
</head>
<body>
<p style="color: chocolate">초콜렛</p>
</body>
</html>
선택자
표현할 대상이 되는 부분
h1 { color:red; }
h1: 선택자
color : 속성
red: 속성값
color:red; : 선언
{color:red;} : 선언부
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selector</title>
<style type="text/css">
/*타입 선택자*/
p{
color: red;
}
/*id 선택자*/
#ctxt{
color: royalblue;
}
/*class 선택자*/
.c1{
color: rebeccapurple;
}
.c2{
font-weight: bold;
}
/*전체 선택자 - 우선순위가 낮음, 다른 선택자가 있으면 적용 안됨*/
* {
color: blue;
}
/*하위 선택자* - 하위 요소에 해당하는 게 있으면 다 적용*/
.c3 p {
color: green;
}
/*자식 선택자* - 하위 요소에 해당하면 적용되나 하위의 하위 요소에는 적용 안 됨*/
.c4 >p{
color: pink;
}
/*인접 선택자* - 현재 요소 바로 뒤에 나오는 요소만 적용*/
h1+p{
color: skyblue;
}
/*형제 선택자 - 현재 요소와 같은 계층에 있는 요소만 적용*/
h2~p{
color:blueviolet;
}
/*그룹 선택자*/
h1, h2{
border: 2px solid gray;}
}
</style>
</head>
<body>
<p>타입 선택자</p>
<p id="ctxt">id 선택자</p>
<p id="txt">id 선택자 적용 안됨</p>
<p class="c1">class 선택자</p>
<p class="c1 c2">class 선택자</p>
<div class="c3">
<p>하위 선택자</p>
<p class="c1">하위 선택자</p>
<p id="ctxt">하위 선택자 (id 지정)</p>
</div>
<div class="c4">
<p>자식 선택자</p>
<ul>
<li><p>자식의 자식</p></li>
<li><p>자식의 자식</p></li>
</ul>
<p>자식 선택자</p>
</div>
<h1>인접 선택자(그룹선택자로 회색 테두리 적용)</h1>
<p>h1 바로 뒤에 나오는 P만 적용됨</p>
<p>이건 안 됨</p>
<h2>형제 선택자(그룹선택자로 회색 테두리 적용)</h2>
<p>h2 와 같은 계층은 적용</p>
<div>
<p>이건 안 됨</p>
</div>
</body>
</html>
'Web > HTML CSS JS' 카테고리의 다른 글
| HTML - 그룹관련 요소, 구조관련 요소, Entity Name (0) | 2020.10.23 |
|---|---|
| HTML - form, input type 속성, text area, select, 주요 입력 속성 (0) | 2020.10.22 |
| html - map, text, list, table (0) | 2020.10.21 |
| HTML - 블록 레벨 요소, 인라인 요소, a 태그 관련 (0) | 2020.10.19 |
| Java Script - 비동기 프로그래밍 2 (async, await, Promise API (all, race)) (0) | 2020.09.28 |