CSS를 사용하려면 CSS의 문법을 알아야 합니다. CSS 코드를 예제로 쉽게 알아보도록 하겠습니다.
CSS의 기초적인 내용에 대해서 알아보겠습니다.
이전 포스팅에선 CSS를 HTML에 적용시키는 방법에 대해 알아보았는데요. 거기에서 몇몇 CSS코드를 이용해서 알아보았습니다.
이번 시간에는 이 CSS코드의 문법은 어떤 방식으로 쓰이는 걸까요?
CSS 기본 문법
아래는 가장 기초적인 CSS 코드입니다.
p { color: red; font-size: 20px; }
여기서 p는 선택자 (selector)이며 color는 속성 (property), red는 값(value) 입니다.
선택자는 스타일을 적용하고 싶은 HTML에서 부여한 id와 class를 적어주시면 됩니다.
(** 선택자에 대한 내용은 추후 포스팅으로 다루겠습니다.)
그리고 선택자안에 여러가지 속성을 추가할 수 있는데 속성별로 세미콜론( ; )을 어미에 두어 속성의 종료를 선언합니다.
주석
주석이란 사용자에게 (코드를 작성하는 주체) 해당 코드의 설명을 적어놓을 수 있는 방법입니다.
아래처럼 사용합니다.
/* 주석 방식1 */
/*
주석 방식2
*/
/*
* 주
* 석
* 방
* 식3
*/
주석이 필요한 이유는 무엇일까요?
개발이 길어지다보면 오래전에 추가해놨던 코드의 쓰임새가 가물가물해질때가 있습니다.
그럴때를 방지하기 위해서 주석을 넣습니다. 파악하기 쉽게요. 그래야 수정요소가 발생할때 빨리 찾을 수 있고 빨리 파악할 수 있게 됩니다.
CSS뿐만 아니라, HTML, JAVASCRIPT에서도 각자의 주석 넣는 방법이 있습니다.
따옴표, 큰따옴표
font-family 속성의 값처럼 공백이 포함된 값이 있는 경우가 있습니다. 예를 들어보면 아래와 같습니다.
p {
font-family: "noto sans";
}
이때 값을 묶을 수 있는 방법으로 2가지가 있는데 하나는 위에서 살펴본 큰 따옴표가 있고,
아래처럼 작은 따옴표가 있습니다.
p {
font-family: 'noto sans'
}
마치며
CSS의 기본문법에 대해 알아보았습니다. 가장 위의 선택자, 속성, 값이라는 것만 알면 되고 밑에 값을 묶는 표현과 주석표현은 부가적인 것입니다. ~
해당 포스팅이 조금이나마 도움이 됐다면 ♡공감 버튼 부탁드립니다.~
