1. CSS란?
Cascading Style Sheets의 약자이다.
HTML에 시각적 표현(디자인)을 입히는 언어이다.
2. CSS 문법
- 선택자(selector)와 선언부(declaratives)로 나뉜다.
- 선택자: 디자인을 입히고 싶은 태그(요소)
- 선언부: 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함한다. 중괄호({ })를 사용하여 전체를 두르고 있다.
선언 => {속성명(property) : 속성값(value);}
3. CSS 선택자
- HTML 요소 선택자
<style>
a {
color:black;
text-decoration: none;
}
</style>
....
<body>
<h1><a href="index.html">WEB</a></h1>
- 그룹 선택자
여러 선택자에 CSS를 적용할 수 있다. 선택자 간에 쉼표(,)로 구분한다.
<style>
h1, ol {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
</style>
....
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
- id 선택자
웹 페이지에 포함된 여러 요소 중에서 특정 아이디를 가진 요소를 선택하여 CSS를 적용한다.
<style>
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
...
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
- class 선택자
특정 집단의 여러 요소를 한 번에 선택할 수 있다. 같은 클래스 이름을 가진 요소들을 모두 선택해 CSS를 적용한다.
<style>
.head { color: lime; text-decoration: none; }
</style>
...
<h2 class="head">프론트엔드</h2>
<h3 class="head">CSS<h3>
* 주석
/* 주석 내용 */
- CSS 선택자 우선순위
1. id 선택자
2. class 선택자
3. HTML 요소 선택자
4. CSS style
- 인라인 스타일(Inline style)
인라인 스타일은 해당 요소에만 스타일이 적용 가능하다
<body>
<h1 style="color:blue;">web</h2>
</body>
- 내부 스타일 시트(Internal style sheet)
내부 스타일 시트는 해당 HTML 문서에만 스타일이 적용 가능하다.
<head>
<style>
body { background-color: black; }
</style>
</head>
- 외부 스타일 시트(External style sheet)
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있다. 외부 스타일 시트는 .css 확장자를 사용하여 저장한다.
<head>
<link rel="stylesheet" href="style.css">
</head>
- CSS style 적용 순위
1. 인라인 스타일 (HTML 요소 내부에 위치함)
2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
3. 웹 브라우저 기본 스타일
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 미디어 쿼리(media query) (0) | 2022.07.21 |
|---|---|
| [CSS] 박스 모델(box model)과 그리드(grid) (0) | 2022.07.19 |
