CSS란?
CSS(Cascading Style Sheets)는 스타일을 정하고 시각적으로 보이는 형태를 만든다.
프로그램 언어는 아니지만 문서를 시각적으로 표현하고 나태나기 위한 언어
즉 페이지에 입력된 HTML 콘텐츠를 시각적으로 표현한 것
CSS는 규칙이 중요하다.
selector { property: value; }
(특성, 콜론, 값, 세미콜론 순서이다.)
선택자가 있고 선택자 옆에는 중괄호가 있다.
➡ 선택자를 입력하고 특성을 설정한다.
➡ 특성을 선택하면 스타일이 정해진다.
CSS를 올바르게 작성하는 방법
1. Inline styles | HTML 요소에 직접 스타일을 작성하는 것 ➡ 좋은 방법 X
<!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>Document</title>
</head>
<body>
<h1 style="color: purple">Hello World</h1>
<button style="background-color: palegreen;>I AM BUTTON</button>
</body>
</html>➡ 좋은 방법 X
why?
각 요소에 따옴표를 사용해 스타일을 작성해 유사한 모든 요소에 대한 해당 스타일을 복제해야 했다.
문서간 스타일 속성을 공유 할 수 없다.
2. The <style> element → Internal CSS | 요소와 중첩되거나 포함되지 않는 스타일 요소를 사용해 문서 대신 CSS를 직접 작성하는 방법
<!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>Document</title>
<style>
h2 {
color: palevioletred;
}
</style>
</head>
<body>
<!-- 1. NOT GOOD CSS STYLE (Feat. INLINE STYLE) -->
<!-- <h1 style="color: purple">Hello World</h1> -->
<!-- <button style="background-color: palegreen;>I AM BUTTON</button> -->
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
</body>
</html>2번째 방법 또한 좋은 방법이 아니다.
why? 여러 문서나 페이지에 동일한 스타일을 적용하려면 복사를 해 각각 붙여 넣는 문제가 있다.
3. External stylesheet | 외부 스타일 시트에서 스타일을 작성하는 것
CSS 작성을 위해 별개인 새 파일을 만든다. 파일의 확장자는 .css로 끝나야한다.
어떤 점이 좋냐? 그 파일은 우리 문서나 다른 문서에 포함시킬 수 있다.
<link> 요소가 필요한다.
<link> ?
<link> 요소는 <head>에 들어간다. 즉 <link> 요소를 사용하여 스타일 스트를 포함하게 한다.
<link> 를 쓴 다음에 href 속성을 특정해야한다. 넣어야 할 스타일시트의 경로나 위치가 된다.
<head>
<title>Forms Demo</title>
<link rel="stylesheet" href="my_style.css">
</head>
<!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>CSS Intro</title>
<link rel="stylesheet" href="app.css">
<!-- <style>
h2 {
color: palevioletred;
}
</style> -->
</head>
<body>
<!-- 1. NOT GOOD CSS STYLE (Feat. INLINE STYLE) -->
<!-- <h1 style="color: purple">Hello World</h1> -->
<!-- <button style="background-color: palegreen;>I AM BUTTON</button> -->
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
</body>
</html>h2 {
color: indigo;
}➡ 스타일시트를 만들때는 .css로 끝나야 한다. (VSCode에서 구문 강조 표시 잊지 말기!) 그 후 별도의 문서인 HTML 파일에 추가할 때 <link> 요소를 사용하고 href 속성을 지정한다. 그리고 새로운 스타일 시트를 만들때마다 <link> 요소로 연결해야 한다.
'📦 CSS > CSS' 카테고리의 다른 글
| [CSS] ⭐ CSS Selectors(3) | Persudo Elements(가상 요소) (0) | 2022.11.01 |
|---|---|
| [CSS] ⭐ CSS Selectors (2) | Persudo Classes (가상 클래스) (0) | 2022.11.01 |
| [CSS] ⭐ CSS Selectors(1) | CSS 기본 규칙 |Universal Selector | ... (0) | 2022.08.26 |
| [CSS] 일반 텍스트 속성 | font-size | font-family (0) | 2022.08.25 |
| [CSS] CSS 특성 | CSS에서 ;(세미콜론)이 중요한 이유 (0) | 2022.08.24 |