HTML + CSS
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: red">hello world</h1>
<h2>hello world2</h2>
</body>
</html><h1 style(html문법) = "color:red"(css문법)></h1>
h2 {color:blue} = css 문법
- HTML과 CSS를 결합하는 방법은 총 2가지가 있다. body 태그 안에서 HTML과 CSS를 결합할 수 있고 head태그 안에서 HTML과 CSS를 결합할 수 있다.
Selector (선택자)
- id 선택자
<head>
#select_css {
color: antiquewhite;
font-size: 100px;
}
</head>
<body>
<li id="select_css">CSS</li>
</body>id = "이름 지을 id" , # id 이름 { css 문법}을 통해서 id 선택자를 제어할 수 있다.
- 부모 자식 선택자
<style>
ul li {
color: red;
}
#lecture > li {
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Jascript</li>
</ul>
<ol id="lecture">
<li>HTML</li>
<li>
CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li>javascript</li>
</ol>
</body>#lecture > id 는 선택된 id 부모에 속해있는 자식들(직계 자손) 고른다.
- 선택자 공부 방법
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
선택자를 이미지에 맞게 풀 수 있도록 문제를 내준다. 재미있는것 같다. 여러 가지 문제 유형을 고를 수도 있어서 유용할 것 같다.
-CSS Cheat sheet
- 가상 클래스 선택자
<style>
a:visited {
color: red;
}
a:active {
color: green;
}
a:hover {
color: blue;
}
a:link {
color: black;
}
a:focus {
color: white;
}
input:focus {
background-color: black;
color: white;
}
</style>- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
'개발 > ETC' 카테고리의 다른 글
| CSS 공부 - 4 (0) | 2020.12.09 |
|---|---|
| CSS 공부 - 3 (0) | 2020.12.08 |
| CSS 공부 - 2 (0) | 2020.12.07 |
| [WEB] HTML 학습 -1 (0) | 2020.12.02 |
| [WEB] React ? Vue ? Angular? (0) | 2020.12.01 |