[ CSS를 실행하는 방법 ]
- In-line(인라인) 방식
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML과 CSS가 만나는 날</title> </head> <body> <h1 style="color: red">Hello World</h1> </body> </html>
- style 태그
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML과 CSS가 만나는 날</title> <style> h2 { color: blue; } </style> </head> <body> <h2>Hello World</h2> </body> </html>
웹페이지에 CSS를 삽입하는 가장 일반적인 두가지 방법인데
In-line을 style을 사용하면 직관적이고, style 태그를 사용하면 추후에 style을 변경하기 쉽습니다.
head > style이나 In-line style 속성은 HTML 속성입니다.
다만 In-line style에서 "color:red"나 head > style > "h2 { color : red }는 CSS 요소입니다.
'프레임워크 > CSS' 카테고리의 다른 글
| [CSS] @keyframes 사용하기 (0) | 2022.01.18 |
|---|---|
| [생활코딩] 선택자와 선언 (0) | 2022.01.18 |
| [생활코딩] 실습 환경 (0) | 2022.01.17 |
| [생활코딩] CSS 시작하기 (0) | 2022.01.17 |
| [CSS] Flex Box (0) | 2022.01.09 |
댓글