[CSS3] CSS란? 기초 용어 및 표기 방법

 

1. CSS란?

 

 - CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에

   넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상 등 디자인 요소를 담당합니다.

 

2. 스타일 형식

 

 p {text-align:center;} /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */

<사진 1.1>

 

p : 맨 앞에 나와 있는 부분 즉 위의 예시에서 'p'부분을 '선택자(selector)' 라고 합니다. 이는 앞으로 만들 스타일 규칙을 어디에

     적용할 것인지 나타냅니다. <p> 태그가 적용된 요소에 중괄호( { } ) 사이의 스타일을 적용하겠다는 의미입니다.

 

text-align : 해당 위치에 있는 것을 '스타일 속성' 이라 부릅니다.

 

center : 해당 위치에 있는 것을 '속성 값' 이라 부릅니다.

 

* '스타일 속성'과 '속성 값'은 콜론( : )으로 구분하여 '스타일 속성' : '속성 값' 형식으로 표현합니다.

  '스타일 속성'과 '속성 값' 다음에는 세미콜론( ; )으로 구분합니다. 그래서 만약 두 개의 속성을 적용한다면 다음과 같이

  작성할 수 있습니다.

 

p{ color:blue; font-size:16px;} /* 텍스트 단락의 글자 색 파란색, 글자 크기 16px */

<사진 1.2>

 

3. 스타일을 표기하는 방법

 

 스타일 규칙은 세미콜론( ; )으로 구분하여 중괄호( { } ) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이

 여러 개일 경우, 구분하기 어렵다는 단점이 있습니다. 그래서 공백을 최소화 시켜 파일 크기를 작게 만들 거라면 한 줄로

 표기하지만 개발자가 읽기 쉽고 유지/보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋습니다.

 다시 말해 아래의 두 코드는 모두 같은 코드입니다.

 

 

h2{font-size:20px; color:orange;}

<사진 1.3>

 

한줄로 작성한 코드입니다.

 

h2{
    font-size:20px;
    color:orange;    
}

<사진 1.4>

 

여러 줄로 작성한 코드입니다.

한줄로 작성한 코드를 여러줄로 작성한 코드입니다. 다시 강조하지만 <사진 1.3>, <사진 1.4> 코드는 모양새는 다르지만 같은 기능을 하는 코드입니다.