CSS 문법 형식
H1 {
color : red;
}
HTML의 태그(예를 들면 h1, p, form, div)나 class, id 속성등을 선택하는 선택자
그리고 중괄호 내부의 선언부로 이루어진다.
CSS 적용 방법
1. 내부 스타일 시트 사용하기
HTML 파일 내에 CSS 코드를 적는 방법으로,
HTML이 지원하는 태그 중 <style> 태그에 작성하는 방법입니다.
형식:
<style>
/* CSS */
</style>
예시:
See the Pen Untitled by onCloud (@onCloudzz) on CodePen.
2. 외부 스타일 시트 사용하기
HTML 문서 내에 작성하다보면 CSS 부분의 길이가 길어지는 경우가 생길 수 있습니다.
그렇게 되면, HTML 문서의 가독성이 떨어지는 경우가 생겨 문제가 발생합니다.
그래서 <link> 태그에 스타일 시트 파일을 연결해 외부 파일에서 CSS를 작업하는 방법을 주로 사용합니다.
형식:
<link rel="stylesheet" href="css 파일 경로">
예시:
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<h1>This is H1.</h1>
<p>This is a p.</p>
</body>
</html>
/* a.css */
h1 {
color: red;
}
p {
color: blue;
}3. 인라인 스타일 사용하기
태그 내에 선택자 없이 인라인 형식으로 style 속성을 통해 스타일 지정이 가능합니다.
그러나 내부 스타일 시트나 인라인 스타일 모두 실무에서 사용하기엔 가독성을 해치는 경향이 있어
실무에서 거의 대부분의 경우에 외부 스타일 시트를 만들고 적용하는 방식으로 CSS를 만듭니다.
형식:
<태그 style=""></태그>
예시:
See the Pen Untitled by onCloud (@onCloudzz) on CodePen.
총 정리
HTML 문서의 디자인과 가독성 등 여러 방면에서 꾸밀 수 있게 만드는 것이 CSS
CSS의 기본 형식은
H1 {
color : red;
}
CSS를 적용하는 3가지 방법
1. 내부 스타일 시트 작성
2. 외부 스타일 시트 작성
3. 인라인 스타일 작성
하지만 실무에선 2. 외부 스타일 작성 이 대부분이므로 이 방식으로 연습할 것!
'Web > FrontEnd' 카테고리의 다른 글
| [FrontEnd] Ch.6 CSS 필수 속성 알아보기-2 (0) | 2024.07.17 |
|---|---|
| [FrontEnd] Ch.6 CSS 필수 속성 알아보기-1 (0) | 2024.07.15 |
| [FrontEnd] Ch.05 CSS 선택자 다루기 (0) | 2024.07.14 |
| [FrontEnd] Ch.3 HTML 필수 태그 정리 (0) | 2024.07.09 |
| [FrontEnd] CH.2 HTML 기본 구성 (0) | 2024.07.05 |
