CSS 문법, 선택자와 프로퍼티(값)을 알면 ok!



  질문    


HTML에 CSS를 적용하려면 어떻게 해야하나요?


  답변  


두 가지를 알아야 합니다.

첫째, CSS 문법

둘째, HTML에 CSS를 적용하는 3가지 방식

하나씩 풀어가죠. 오늘 포스팅에서는 CSS 문법에 관해 기술하겠습니다.


아래와 같은 HTML 문서가 있습니다.

<DOCTYPE! html>

<html>

<head>

<title>CSS 맛보기</title>

</head>

<body>

<p>여기에 있는 한글내용에 글꼴, 글자크기, 글자색깔을 정해 본다.</p>

</body>

</html>



P태그 안의 한글내용을 CSS를 이용하여

글자크기(12px), 글자색깔(red)을 지정하려면 

아래와 같은 CSS문법을 사용합니다.


CSS 문법 풀이



1. CSS가 적용될 HTML 요소를 지정 -> 선택자

P{


 }



2. 글꼴, 글자크기, 글자색깔의 값을 지정 -> 프로퍼티(property)와(value)

P{

 font-size : 20px;

 color : red;

 }

※중괄호{ } / 콜론 : / 세미콜론 ; 을 놓쳐서는 안됩니다.


3. 이렇게 작성한 CSS를 HTML에 적용하면 됩니다.

(HTML에 CSS를 적용하는 3가지 방식에 대해서는 다음 포스팅에서 기술)




CSS 문법 정리



    P      {  font-size : 12px;      color : red; }

선택자         프로퍼티               프로퍼티   값         


선택자는 CSS를 적용할 HTML요소를 표시합니다.

프로퍼티 은 적용하려는 글꼴, 글자크기, 색상, 너비, 높이, 테두리 등을 명령하는 것입니다.

결론적으로 다양한 선택자프로퍼티 명령어를 공부해야 합니다.

이에 관해서도 차후에 기술하도록 하겠습니다.



  Comments,     Trackbacks