css의 기본 작성 문법은 매우 간단합니다. css를 간단하게 정의 하면 '대상을 선택하고, 구며준다'라는 아주 간단하고 심플한 정의 입니다. 먼저 꾸미고자 하는 대상을 선택해야 합니다. 이를 '선택자(selector)'라고 부릅니다. html코드에서 사용한 body부분을 꾸미고자 하는 대상으로 선택합니다. 'body'라고 입력을 하면 됩니다.
| body | 꾸미고자 하는 대상인 <body>요소를 선택합니다. 이를 '선택자'라고 부릅니다. |
다음은 꾸미고자 하는대상을 서낵해서 명을 을 입력합니다. 각 대상마다 명령문이 달라질 수 있기때문에 구분을 해야 합니다. 이 구분으로 각 대상의 영역을 나누게 됩니다. css에서는 이 구분을 중괄호({ })로 나눠줍니다.
| body { } |
{ '여는 중괄호'는 대상 선택자를 꾸밀 명령을 담은 선언 구간의 시작을 랇니다. 중괄호 내부에 대상을 꾸밀 명령문이 들어오게 됩니다. } '닫는 중괄호'는 대상 선택자를 꾸밀 명령을 담은 선언 구간의 끝을 알립니다. |
대상을 선택하고 선언 구간을 만들었드므로 이제는 꾸미면 됩니다. 글자 크기와 행간을 꾸며보겠습니다. 글자 크기는 font-size라고 선언 합니다. 글자의 크기값은 75%를 부여합니다. 이때 선언된 font size를 '속성(property)'이라 부르고, '75%'를 '속성값(value)'이라고 부릅니다. 대부분의 웹 부라우저에 기본적으로 설정된 글자 크기는 16px이므로, 여기서 설정한 75%는 16px에 0.75를 곱한 값이 나오게 됩니다. 즉, 12px로 설정이 됩니다. 그리고 송성과 송석값을 구분하기 위해 콜론( : )을 사용하고, 명령 선언문의 마침을 알리기 위해 세미콜론( ; )을 사용하여 선언문장이 끝났음을 알립니다.
| body { font-size : 75% } |
글씨의 크기를 75%(12pz)로 설정합니다. 웹 브라우저의 기본 글씨 크기는 16px입니다. |
행간은 line-height라고 선언하고, 값은 1.5로 설정합니다. 웹 브라우저는 기본적으로 설정된 스타일 값을 가지고 있습니다.행간에 설정된 기본 값은 약 1.2정도입니다. 글자의 기본 설정 크기가 16px이므로, 기본 행간은 16px에 1.2를 곱한 값에 가깝습니다. 약 19px정도가 됩니다. 여기서 1.5를 설정했으므로 우리가 설정한 글자 크기 12px에 1.5를 곱한 값인 18px이 설정 됩니다.
| body { font-size : 75% line-height: 1.5; } |
줄간의 간격(행간)을 글자 크기의 1.5배로 설정합니다. |
@charset "utf-8;
body {
font-size : 75%
line-height: 1.5;
}
'IT > css' 카테고리의 다른 글
| php 변수 타입 변환과 연산자 (1) | 2024.01.08 |
|---|---|
| PHP 변수(variable) (0) | 2024.01.07 |
| PHP 문법 (0) | 2024.01.07 |
| PHP 개요!!! PHP 기초 (1) | 2024.01.06 |