티스토리 강좌 / CSS / 문법

문법

CSS 코드는 다음처럼 생겼습니다.

p { color: blue }
  • p : 문단을 뜻하는 HTML 요소입니다.
  • color : 글자색입니다.
  • blue : 파란색입니다.

즉, 문단의 글자색을 파란색으로 만들라는 뜻입니다. 이때 p를 선택자(selector), color를 속성(property), blue를 값(value)이라고 합니다. 선택자로 무엇을 꾸밀지 정하고, 속성으로 어떤 모양을 꾸밀지 정하고, 값으로 꾸밉니다.

selector { property: value }

속성과 값을 합쳐서 선언(declaration)이라고 합니다.

여러 개의 선언

하나의 선택자에 대해서 여러 가지 모양을 꾸미고 싶다면 선언이 여러 개 들어가야 합니다. 이때 선언과 선언은 세미콜론(;)으로 구분합니다. 예를 들어 문단의 글자색은 파란색, 글자 크기는 20px로 정하고 싶다면 다음과 같이 합니다.(마지막 세미콜론은 붙이지 않아도 되지만, 항상 세미콜론으로 선언을 끝내는 게 여러모로 편합니다.)

p {
  color: blue;
  font-size: 20px;
}

CSS에서 줄바꿈이나 여러 개의 연속된 공백은 의미가 없습니다. 따라서 다음과 같이 한 줄로 써도 됩니다.

p { color: blue; font-size: 20px; }

값에 공백이 있다면

값에 공백이 있는 경우가 있습니다. 대표적인 게 글꼴 이름입니다. 그럴 땐 값을 작은 따옴표 또는 큰 따옴표로 감쌉니다.

p { font-family: 'Times New Roman'; }
p { font-family: "Times New Roman"; }

주석

웹브라우저가 해석하지 않는 코드를 주석이라고 합니다. 주석을 만드는 방법은 /*와 */로 감싸는 것입니다.

/* Comment */

/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.

/*
  Comment 1
  Comment 2
*/

티스토리 강좌

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) (문의는 메일로 해주세요.) E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침