...
CSS(Cascading Style Sheets) 란?
CSS는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있습니다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없습니다.
css 기본 문법
CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.
- 선택자 - CSS를 적용하고자 하는 HTML 요소(element)
- 선언부 - 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다.
CSS 선언 방식
인라인(in-line) 방식
HTML 요소(태그)의 style 속성에 직접 작성하는 방식
<body>
<p style="height:100px; color:blue">
</body>
내장(embedded) 방식
HTML <style></style> 안에 작성하는 방식
<head>
<style type="text/css">
.logo {color: #eeeeee;}
</style>
</head>
링크(link) 방식
HTML <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
@import 방식
CSS @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<head>
<style type="text/css">
@import url(style.css);
</style>
</head>CSS 선택자
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.
<h2>이 부분에 스타일을 적용합니다.</h2>h2 { color: teal; text-decoration: underline; }
아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이때 #을 써서 구분해 줍니다.
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>#heading { color: teal; text-decoration: line-through; }HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작합니다. 하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생합니다. 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋습니다.
클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
<h1>클래스 선택자를 이용한 선택</h1>
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
<h3 class="headings headings2">이 부분에는 다른 스타일과 추가 스타일을 적용합니다.</h3>.headings {
color: lime;
text-decoration: overline;
}
.headings2 {
color: blue;
font-size: 50px;
}
그룹(group) 선택자
그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용합니다. 그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결합니다. 이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줍니다.
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: lightgray; }
전체 선택자
전체 선택자는 * 문자를 사용하며 요소 내부의 모든 요소를 선택합니다.
* { color: teal; text-decoration: underline; }
div * { color: teal; text-decoration: underline; }[스타일 적용 우선순위]
인라인 선언 방식
아이디 선택자
클래스 선택자
태그 선택자
전체 선택자
[CSS] 📚 CSS 선택자 문법 총 정리 (심화편)
CSS 선택자 문법 총 정리 전 시간에서 css 선택자 기초 문법을 훑어 보았다. 이번 시간에는 정말 다양한 css 선택자 조합 문법들을 하나하나 세심히 살펴보는 시간을 가질것이다. 심화편 인 만큼 난
inpa.tistory.com
# 참고자료
http://tcpschool.com/css/css_intro_syntax
https://poiemaweb.com/css3-syntax
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
