html 파일에 CSS를 적용하는 방법에 대해서만 다루고 있다.
구체적인 CSS 태그나 속성들에 대해서는 다음글을 참고하면 된다🤭
CSS 적용하기
1. <style> 태그
<head> 안에 태그 정의 (페이지의 모든 태그에 적용)
2. style 속성
각 태그 안에 개별로 정의 (일회성)
3. 외부 스타일 시트 사용
외부 css 파일 사용
CSS 특징
1. 스타일은 상속된다.
2. 우선순위는 가까운 순서로
셀렉터(selector) 로 CSS 적용
셀렉터는 기본적으로 <style> 태그 내에 정의한다.
1. 태그 이름
h3{ } / li{ } 등
2. class
.warning{ } / body.main{ } 등
3. id
#list{ } 등
4. 전체 셀렉터
*{ }
5. 자식, 자손 셀렉터
se1 se2 { }
: se2는 se1의 자손 셀렉터
se1 > se2 { }
: se2는 se1의 자식 셀렉터
<우선순위 역시 가까운 순>
6. 속성 셀렉터
속성에 대한 값이 일치하는 태그에만 적용
input[type=text] { }
7. 가상 클래스 셀렉터
셀렉터:가상셀렉터 { }
*종류
:hover <마우스 올라갈 때> / :active <마우스 누르고 있을 때> / :focus /
:link <방문하지 않은> / :visited <방문 한> / :first-letter <블록 태그의 첫 글자> /
:first-line <블록 태그의 첫 라인> / :nth-child(even) <짝수 번째 모든 자식 태그> /
:nth-child(1) <첫 번째 자식 태그>
CSS / 셀렉터 예제
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS / Selector Practice</title>
<link type="text/css" rel="stylesheet" href="external.css"> <!--외부 css 파일 사용-->
<style>
p{color: blue; font-size: 12px;} /* <style> 태그 */
/* 셀렉트 */
h3, li {color: purple;} /* 태그 이름 */
div > div > strong {color: forestgreen;} /* 자식 */
ul strong {color: green;} /* 자손 */
*{background: moccasin;} /* 전체 */
.warning {color: red;} /* class */
body.main {background: aliceblue;} /* class */
#list {background: gray;} /* id */
#list span { color: orange;} /* id, 자손 */
h3:first-letter {color: red;} /* 가상 클래스 */
li:hover {background: yellowgreen;} /* 가상 클래스 */
</style>
</head>
<body>
<h3>CSS / 셀렉터 예제</h3>
<hr>
<p>Hello World</p>
<p style="font-size:25px">중첩된 style</p> <!-- style 속성 -->
<div>
<div><strong>frontend</strong> study</div>
<ul id="list">
<li><span>HTML5</span></li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">backend는 더 어렵다</div>
</div>
</body>
</html>
external.css
body{margin-left: 30px; margin-right: 30px;}
p{background-color: pink;}결과
CSS를 더 공부하고 싶다면 아래 게시글을 참고하자
CSS 활용 기본
CSS로 적용할 수 있는 스타일에 대해 정리했다. CSS 적용 방법이 어려우면 이전글을 참고하면 되고, CSS 활용 고급은 다음글로 작성 예정이다!! 목차 1. CSS 색 표현 2. CSS 텍스트 스타일 3. CSS 단위 4. C
jooky.tistory.com
'Frontend > css' 카테고리의 다른 글
| CSS 활용 2편 (CSS 태그 배치) (1) | 2022.10.11 |
|---|---|
| CSS 활용 1편 (0) | 2022.09.28 |
