CSS import 방법
- HTML 파일 안에 <link> 태그를 사용하지 않고, <style> 태그 안에 @import를 이용해서 외부 스타일 파일을 링크할 수 있음
- 형식 : @import url('파일경로');
<!-- 링크 방식 : <link rel="stylesheet" href="style.css" type="text/css"> -->
<style type="text/css">
@import url('style.css');
</style>
스타일 우선순위
- CSS에서는 부모 요소에 있는 속성들이 자식 요소에 상속된다.
- 하나의 요소에 여러 스타일이 정의되어 있다면 가장 나중에 정의된 스타일이 적용된다.
선택자
- 전체 선택자 : * 을 사용해서 모든 태그에 스타일 적용
<!-- 스타일 정의 -->
<style type="text/css">
* {font-size: 20pt;} /* 글자 크기 */
</style>
<!-- 스타일 적용(body) -->
<div>안녕하세요.</div>
<br>
<span>반갑습니다.</span>
<br>
<p>좋은 하루 되세요.</p>
- 태그 선택자 : 태그명을 사용해서 해당 태그에 스타일 적용
<!-- 스타일 정의 : 태그명 { } -->
<style type="text/css">
span {background: yellow;} /* 배경색 */
</style>
<!-- 스타일 적용(body) -->
<div>안녕하세요.</div>
<br>
<span>반갑습니다.</span>
<br>
<p>좋은 하루 되세요.</p>
- 클래스 선택자 : 클래스명을 사용해서 복수의 태그에 스타일 적용
⭐ 공백을 구분자로 여러 클래스 선택자를 적용할 수 있음
<!-- 스타일 정의 : .클래스명 { } -->
<style type="text/css">
.one {color: orange;} /* 글자색 */
.two {color: blue;} /* 글자색 */
</style>
<!-- 스타일 적용(body) : class="클래스명" -->
<div class="one">안녕하세요.</div>
<br>
<span class="one">반갑습니다.</span>
<br>
<p class="one two">좋은 하루 되세요.</p>
- ID 선택자 : 클래스 선택자와 달리 문서 안에서 한 번만 적용
⭐ 태그의 ID는 중복 작성하면 안됨
<!-- 스타일 정의 : #ID명 { } -->
<style type="text/css">
#dv {font-size: 30pt; color: red;}
#sp {font-size: 20pt; color: green;}
#pg {font-size: 10pt; color: blue;}
</style>
<!-- 스타일 적용(body) : ID="ID명" -->
<div id="dv">안녕하세요.</div>
<br>
<span id="sp">반갑습니다.</span>
<br>
<p id="pg">좋은 하루 되세요.</p>
<!-- 스타일 정의 : 태그명.클래스명 { } -->
<style type="text/css">
.item {color: orange;}
h1.item {color: blue; background-color: skyblue;}
</style>
<!-- 스타일 적용(body) -->
<h1 class="item">바다</h1>
<h1>하늘</h1>
<span class="item">햇살</span>
<!-- 스타일 정의 : 태그명#ID명 { } -->
<style type="text/css">
h1 {color: green; background-color: gray;}
h1#target {color: pink; background: red;}
</style>
<!-- 스타일 적용(body) -->
<h1 id="target">바다</h1>
<h1>하늘</h1>
<span>햇살</span>
- 그룹 선택자 : 여러 개의 태그에 동일한 스타일을 적용할 때 쉼표(,)로 나열하여 지정
<!-- 스타일 정의 : 태그명,태그명 { } -->
<style type="text/css">
h1,p {font-size: 20pt; background: yellow;}
</style>
- 후손 선택자 : 부모 태그에 포함된 모든 태그에 스타일 적용
<!-- 스타일 정의 : 부모태그명 자식태그명 { } -->
<style type="text/css">
body div {border: 3px solid red;} /* 테두리 두께, 모양, 색*/
</style>
<!-- 스타일 적용(body) -->
<body>
<div>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<div>사계절</div>
</div>
<p>
<span>춘하추동</span>
</p>
</body>
- 자식 선택자 : 해당하는 자식 태그에만 스타일 적용
<!-- 스타일 지정 : 부모태그명 > 자식태그명 { } -->
<style type="text/css">
body > div {border: 3px solid red;}
</style>
<!-- 스타일 적용(body) -->
<body>
<div>
<ul>
<li>봄</li>
<li>여름</li>
<li>가을</li>
<li>겨울</li>
</ul>
<div>사계절</div>
</div>
<p>
<span>춘하추동</span>
</p>
</body>
- 속성 선택자
- 요소[속성] : 특정 속성을 가지고 있는 태그 선택
- 요소[속성=값] : 속성 값과 같은 태그 선택
- 요소[속성~=값] : 속성 값을 단어로 포함하는 태그 선택 (공백으로 구분된 단어)
- 요소[속성^=값] : 속성 값으로 시작하는 태그 선택
- 요소[속성$=값] : 속성 값으로 끝나는 태그 선택
- 요소[속성*=값] : 속성 값을 포함하는 태그 선택 (글자 일부)
<!-- 스타일 지정 -->
<style type="text/css">
a[title] {color:red;}
a[title="category"] {color:orange;}
a[title~="phone"] {color:yellow;}
a[title^="info"] {color:green;}
a[href$=".com"] {color:blue;}
a[href*="daum"] {color:purple;}
</style>
<!-- 스타일 적용(body) -->
<a href="index.html" title="main">메인화면</a><br>
<a href="index.html" title="category">카테고리</a><br>
<a href="index.html" title="email phone address">연락처</a><br>
<a href="index.html" title="information">회사소개</a><br>
<a href="https://www.naver.com" title="Naver">네이버</a><br>
<a href="https://www.daum.net" title="Daum">다음</a>
- 가상클래스 선택자 : 실제로 존재하지 않지만 필요에 의해 만들어진 가상의 선택자
- : hover : 마우스 커서가 링크에 올라가 있는 상태
- : active : 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
- : link : 링크를 클릭하지 않는, 그냥링크되어있는 상태
- : visited : 링크를 눌러서 방문한 후 상태
<!-- 스타일 지정 -->
<style type="text/css">
a:link {
text-decoration: none; /* 밑줄 없음 */
color: rgb(255,102,102);
}
a:visited {
text-decoration: none;
color: rgb(89,71,71);
}
a:hover {
border-bottom: 1px dotted rgb(255,0,0);
background-color: skyblue;
}
a:active {
text-decoration: none;
color: white;
background-color: black;
}
</style>
<!-- 스타일 적용(body) -->
<a href="https://www.naver.com">네이버</a>