스타일이란 ?

스타일 형식 알아보기

CSS소스에서 한 줄이 하나의 스타일에 해당하고, 조금 더 들여다보면 줄마다 형태가 비슷하다는 걸 알게될 것입니다.

CSS스타일의 형식은 다음과 같습니다.

기본형          선택자  { 속성1 : 속성값1;  속성2 : 속성값2;}

 

맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려주는 것이고,

중괄호({ }) 사이에는 스타일 정보를 넣습니다.

 

속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며,

세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있습니다.

 

예를 들어 텍스트 단락의 글자를 강누데로 정렬하고 글자색을 파랑으로 지정하고 싶다면 다음과 같이 작성합니다.

<P>태그에 스타일 적용하기

P  {      text-align : center;      color :  blue;      }

P -> 선택자     text-align -> 텍스트 정렬 속성     color -> 글자색 속성     center; -> 값     blue; -> 값

 

스타일을 텍스트 단락에 적용할 것이므로 선택자를 p로 지정했습니다.

그리고 중괄호({ }) 사이에 텍스트 정렬을 지정하는 text-align 속성과 글자색을 지정하는 color속성을 사용해서

2개의 스타일 규칙을 만들었습니다.

이처럼 CSS를 공부한다는 것은 다양한 속성을 알아보고 각 속성마다 어떤 값을 사용하는지 배워 가는 것입니다.

 

스타일 규칙을 작성하는 방법

스타일 규칙은 세미콜론(;)으로 구분하여 중괄호({ }) 안에 나열한다고 했죠?

이 때 사용할 스타일 속성이 여러 개일 경우 한 줄에 속성을 하나만 적는 것이 이해하기 편하고오른쪽에 주석을 붙여 소스를 관리하기에도 좋습니다.하지만 CSS소스가 길어지지 않도록 중괄호({ })사이에 스타일 규칙을 한 줄로 표기하기도 합니다.다시 말해 다음 2가지 소스는 모두 같은 스타일을 나타냅니다.

CSS 여러 줄로 표기하기

P  {      text-align : center;      color :  blue;      }

CSS 한 줄로 표기하기

P  { text-align : center;  color :  blue; }

 

스타일의 주석을 표기하는 방법

태그에서 주석을 사용한 것처럼 스타일에도 주석을 덧붙일 수 있습니다.

주석을 표시할 때는 /* 와 */ 사이에 내용을 입력하는데 이때 한 줄 또는 여러 줄이 들어갈 수도 있습니다.

CSS 주석 처리하기

/*  CSS에서 주석을 사용하면 소스를 이해하기 쉽고 나중에 수정할 때에도 편리합니다. */ P  {      text-align : center;     /* 텍스트 정렬 - 중앙 */      color :  blue;     /* 글자색 - 파랑 */      }

 

출처 : Do it! 한권으로 끝내는 웹 기본 교과서 HTML + CSS + 자바스크립트 웹 표준의 정석