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 |