Archive
CSS
jay3108
2021. 12. 29. 16:46
1. CSS
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
- CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름
- 스타일 시트 구성
- span { color : blue; font-size : 20px; } /* span 태그 스타일 선언 */
- 셀렉터 { 프로퍼티 : 값; 프로퍼티 : 값; } /* 주석문 */
- 셀렉터 : CSS 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
- 프로퍼티 : 스타일 속성 이름
- 값 : 프로퍼티의 값
- 스타일 시트는 대소문자의 구분 없음
- 작성방법
- <style></style> 태그에 스타일 시트 작성
- style 속성에 스타일 시트 작성
- 스타일 시트를 별도 파일로 작성 ex) <link> 태그, @import
- 유의사항
- <style>태그는 <head>태그 내에서만 사용
- <style>태그는 여러번 작성 가능 → 스타일 시트들이 합쳐서 사용됨
- <style>태그에 작성된 스타일 시트는 웹 페이지 전체에 적용
- 예시
<head>
<style>
body { background-color : mistyrose; }
h3 { color : purple; }
</style>
<style>
hr { border : 5px solid yellowgreen; }
span { color : blue; font-size : 20px; }
</style>
</head>2. 셀렉터(selector)
- HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능
- 크롤링을 위해 CSS를 배우는 주된 이유
- 셀렉터의 유형
- 태그 이름 셀렉터
- 태그 이름이 셀렉터로 사용되는 유형
- 셀렉터와 같은 이름의 모든 태그에 CSS 스타일 시트 적용
- class 셀렉터
- 점으로 시작하는 이름의 셀렉터
- HTML 태그의 class 속성으로만 지정 가능
- id 셀렉터
- #으로 시작하는 이름의 셀렉터
- HTML 태그의 id 속성으로만 지정 가능
<!DOCTYPE html>
<html>
<head>
<title>셀렉터 만들기</title>
<style>
h3, li { /* 태그 이름 셀렉터 */
color : brown;
}
div > div > strong { /* 자식 셀렉터 */
background : yellow;
}
ul strong { /* 자손 셀렉터 */
color : dodgerblue;
}
.warning { /* class 셀렉터 */
color : red;
}
body.main { /* class 셀렉터 */
background : aliceblue;
}
#list { /* id 셀렉터 */
background : mistyrose;
}
#list span{ /* 자손 셀렉터 */
color : forestgreen;
}
h3:first-letter { /* 가상 클래스 셀렉터 */
color : red;
}
li:hover { /* 가상 클래스 셀렉터 */
background : yellowgreen;
}
</style></head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong>입니다.</div>
<ul id="list">
<li><span>HTML5</span></li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F</div>
</div>
</body>
</html>