질문
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요소를 표시합니다.
프로퍼티와 값은 적용하려는 글꼴, 글자크기, 색상, 너비, 높이, 테두리 등을 명령하는 것입니다.
결론적으로 다양한 선택자와 프로퍼티 명령어를 공부해야 합니다.
이에 관해서도 차후에 기술하도록 하겠습니다.