CSS 기초 문법
Front-End/CSS 2019. 6. 5. 12:20CSS 사용이유 : HTML만 사용하면 문서의 디자인이 한정적이기 때문에 CSS를 사용한다.
-CSS 구문 구성-
CSS의 규칙은 선택자(Selector)과 선언 블록(declaration block)으로 구성된다.
(어떤거? (Selector) 를 어떻게? (Declaration) 꾸며줄 것인가?? 라는 의미)
Selector Declaration Declaration
| h1 | { color : red; font-size : 10; } |
위의 예제에서는 <h1> 태그 요소의 글자 색상은 빨간색으로 하고 글자 크기는 10으로 표시하라는 뜻이된다.
| color <- Property red <- Value font-size <- Property 10 <- Value |
첫번째 선택자(Selector) 은 HTML의 <DIV>나 <P> 태그 같은 스타일을 지정할 HTML 태그나 클래스, ID 등을 가리킨다.
(쉽게 말해서 html의 어떤 요소를 꾸며줄건지 선택하는 부분)
두번째 선언블록은 하나 이상의 선언의 모음을 말하는데, 블록 안에 각 선언들은 세미콜론 ( ; ) 으로 끝마치거나
구분되고 시작과 끝은 중괄호 ({ })로 둘러싸여진다.
(자세한 속성에 대한 값들.. 예를 들면 색깔이나 높이 등등등... 그리고 선언들이 합쳐진것을 선언블록이라고 한다.)
블록안을 살펴보면 개별적인 선언 (declaration)은 속성(Property)과 (Value)으로 구성된다.
속성이란건 어떤 요소에 대한 속성을 말한다.
-em 단위-
em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다.
간단한 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<p class="a">Lorem Ipsum Dolor</p>
</body>
</html>
|
cs |
-rem 단위-
rem 단위는 문서의 최상위 요소, 즉 html 요소의 크기의 몇 배인지로 크기를 정합니다. 위 예제에서
|
1
|
.a { font-size: 2.0em; }
|
cs |
에서 단위를 rem으로 바꾸면
|
1
|
.a { font-size: 2.0rem; }
|
cs |
글자 크기는 32픽셀이 됩니다.
(html 요소의 크기가 16픽셀이고 2.0 배를 해주었기 때문에 32픽셀이 된다.)
참고로 html 요소와 문단 요소 사이에 있는 body 요소의 크기는 영향을 미치지 않습니다.
-정리- CSS는 선택자와 선언모음으로 구성이 되고 각 선언들은 속성과 값으로 구성된다. |
출처
https://www.youtube.com/watch?v=ujzr0nxWb2E
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Front-End > CSS' 카테고리의 다른 글
| HTML 문서에 CSS를 사용하는 방법들 (0) | 2019.08.26 |
|---|