이전 글:
2020/03/08 - [HTML and CSS] - [HTML] 6. HTML 제목
2020/03/09 - [HTML and CSS] - [HTML] 7. HTML 문단
어느새 HTML에서 스타일을 배울 때가 왔다.
여기까지 왔으면 대략적으로 HTML이 어떻게 작성되는지 이해하고 있을 것이다.
이제는 '어떻게 하면 더 잘 꾸밀 수 있을까?'
'어떻게 하면 세련되게 꾸밀 수 있을까?'
와 같은 질문이 생각날 때이다.
HTML 스타일은 매우 배울 내용이 많다.
하지만 어디에나 기초적인 문법은 있기 때문에,
가장 기본적으로 쓰이는 것부터 차차 알아가 보도록 하자.
다음 예시로 이번 장을 시작하도록 하자.
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
위의 예시를 실행시키면,
결과로부터 style의 color는 글씨의 색깔을,
font-size는 글씨의 크기를 결정한다는 것을 알 수 있다.
HTML 스타일 속성은 어떻게 구현될까?
HTML 스타일은 style 속성으로 구현된다.
그리고 style 속성은 다음과 같은 문법을 가진다.
<tagname style="property:value;">property는 CSS 속성을 의미하며,
value는 CSS 값을 의미한다.
//
계속 CSS라는 표현이 나와서 어리둥절 할 수 있다.
나중에 CSS에 대해서 배우겠지만
미리 개념을 설명하자면
CSS는 "Cacading Style Sheets"의 앞 글자를 딴 것으로
웹 문서의 전반적인 스타일을 구현하기 위해 만들어진 것이 스타일시트인데
CSS는 이러한 스타일시트를 표준화한 것이다.
크게 글자의 크기, 글자체, 줄간격, 배경 색상, 배열 위치 등을 자유롭게 바꿀 수 있다.
//
웹의 배경 색깔은 어떻게 구현할까?
CSS의 background-color 속성을 통해서 HTML로 작성된 사이트의 배경을 정의할 수 있다.
배경을 "powderblue"로 지정한 예시를 보자.
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
웹 페이지에 배경 색깔이 지정된 것을 확인할 수 있을 것이다.
글씨 색깔은 어떻게 정의할까?
앞의 예시에서 사용하였지만 글씨 색깔은
CSS의 color속성으로 구현된다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
위의 코드를 실행시킨 결과로 파란 글씨와 빨간 글씨의 본문을 얻을 수 있다.
글씨체를 정의해보자.
글씨체는 CSS font-family로부터 구현할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
만약 html에 기본적으로 사용가능한 글씨체가 아니라면
다운로드하여서 사용해야 한다.
글씨 크기를 정해보자.
그러면 이제 글씨 크기를 정하기 위해서
CSS font-size 속성을 사용해보자.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
글씨 크기는 ~ %로 배수를 정해줄 수도 있지만
~ px로 정확한 수치로 정의를 해줄 수도 있다.
글씨 배열은 조절 가능할까?
물론 가능하다.
CSS text-align 속성을 사용하면 HTML 요소들의 배열을 정의할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
위의 예시로부터 요소들이 화면 중앙에 위치해 있음을 알 수 있다.
이 장에서는 간단히 HTML 스타일이 어떻게 구현되는지 설명하였다.
- background-color: 웹의 배경색
- color: 글씨 색깔
- font-family: 글씨체
- font-size: 글씨 크기
- text-align: 글씨 배열
각 style에 대해 실제로는 더 많은 선택권이 있다.
그 선택권 자체가 각 style마다 몇 백개 되는 경우도 있기 때문에
여기서는 대표적인 예시만 나타냈다.
앞으로 style도 사용하는 예시들이 자연스럽게 나올 것이니
서서히 배워나가도록 하자.
'HTML & CSS' 카테고리의 다른 글
| [HTML] 10. HTML 인용과 인용구 (0) | 2020.03.12 |
|---|---|
| [HTML] 9. HTML 텍스트 서식 설정 (0) | 2020.03.12 |
| [HTML] 7. HTML 문단 (0) | 2020.03.09 |
| [HTML] 6. HTML 제목 (0) | 2020.03.08 |
| [HTML] 5. HTML 속성 (0) | 2020.03.04 |