CSS란
HTML이나 XML과 같은 구조화된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. HTML의 각 요소(element)의 style을 정의하여 화면에 어떻게 표현할 것인지를 나타냅니다.
CSS 사용 이유
- HTML 요소의 세부 스타일을 일일이 따로 지정하고 유지 보수 해야되는 문제점을 해소하기 위해 만들어진 언어
- 웹 페이지의 스타일을 별도의 파일로 저장해서 사이트의 전체 스타일을 쉽게 제어 가능
- 웹 사이트의 스타일을 일관성 있게 유지해주고 유지 보수 또한 쉽게 가능
CSS 문법
a{ background-color:yellow; font-size: 16px;}CSS 의 문법은 선택자(selctor) 와 선언부 (declaratives)로 구성됩니다.
- 선택자 : CSS를 적용하고자 하는 대상 (HTML 요소)
- 선언부 : 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다.
CSS 선언
- 인라인 스타일(Inline Style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS를 적용하는 방법
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>| ※ 주의! 인라인 스타일 방식은 요소 내부에서 style 속성을 이용하여 CSS를 적용하기 때문에 추후에 스타일을 변경하기가 매우 어려우며, CSS를 사용하는 많은 이점을 읽게 되기 때문에 꼭 필요한 상황이 아니면 사용을 추천하지 않습니다. |
- 내부 스타일 시트(Internal style sheet)
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <head> 태그에 <style> 태그를 사용하여 CSS를 적용하는 방식입니다. 이 방법은 HTML 문서에만 스타일을 적용할 수 있습니다.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>- 외부 스타일 시트(External style sheet)
외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다. 해당 스타일을 적용할 때는 웹 페이지의 <head> 태그에서 <link> 태그를 사용하여 외부 스타일 시트를 포함하면 적용됩니다.
<head>
<link rel="stylesheet" href="경로/파일이름.css">
</head>
위 방식들이 혼합되어 사용되면 인라인 스타일 > 내부/외부 스타일 시트 > 브라우저 스타일 순으로 적용됩니다.
| ※ 주의! 내부 외부 스타일 시트는 더 나중에 적용된 스타일 시트가 적용됩니다. |
CSS 선택자
스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자 종류
- HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 선택할 때 사용합니다.
<head>
<style>
h2 {
color: teal;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>HTML 요소 선택자</h2>
</body>
- 아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상을 특정 요소로 선택할 때 사용합니다. 이때 #을 써서 구분해 줍니다.
<head>
<style>
#heading { color: teal; text-decoration: line-through; }
</style>
</head>
<body>
<h2 id="heading">ID 선택자 예시.</h2>
</body>- 클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
<head>
<style>
.headings {
color: lime;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>클래스 선택자를 이용한 선택</h1>
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
</body>- 그룹(group) 선택자
그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용합니다. 여러 선택자를 쉼표(,) 구분하겨 연결합니다.
<head>
<style>
h1 {
color: navy;
}
h1, h2 {
text-align: center;
}
h1, h2, p {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>제목 1 입니다.</h1>
<h2>제목 2 입니다.</h2>
<p>여기는 단락입니다.</p>
</body>
[출처]
TCPSchool : http://tcpschool.com
mbn web docs
'웹 > CSS' 카테고리의 다른 글
| CSS 박스 모델 (Box Model) Margin, Padding, border (0) | 2023.06.29 |
|---|---|
| CSS - 계단식 ( Cascade ) (0) | 2023.06.28 |
| CSS - 속성(3) (0) | 2023.06.27 |
| CSS - 속성(2) (0) | 2023.06.26 |
| CSS - 속성 (0) | 2023.06.26 |