[HTML 강좌] HTML Styles : Background Color, Fonts, TextColor/Size/Alignment
HTML Element(요소)의 모양을 꾸미는 Styles Attribute(속성)과 Attribute의 값을 의미하는 properity를 지정하고 활용하는 방법을 습득합니다.
HTML Styles의 정의
HTML의 Styles Attribute는 element(요소)의 글자의 색, 배경색, 글자 크기와 폰트등 HTML Element(요소)의 서식을 지정하는데 사용됩니다.
HTML Element(요소)에 Style 속성 문법
Style의 문법은 properity와 value로 이루어진다.
prperity는 Style 안에서 사용되는 값을 가리키는 명칭입니다. 전문적인 용어로 정리를 할려면 HTML 을 구성하는 DOM트리라는 기술에 대해서 설명해야 하나, 본 강좌는 HTML의 기본적인 사항의 전달을 목적으로 하기 때문에 Javascript등에 대한 강좌에서 자세히 설명하겠습니다.
<tagname style="property:value;">tagname 는 HTML 태그의 이름 예를 들면, <p> 태그의 "p"를 의미하며, 속성은 style 를 그대로 사용합니다.
property는 style을 구성하는 구성요소의 명칭으로 "background-color"등을 의미하고, value는 구성요소에 할당되는 "red"값을 의미한다. property와 value는 쌍으로 구성되며, ";"으로 여러개의 property를 사용할 수 있습니다.
style에 사용되는 property는 CSS 라고 불리우는 별도의 문법을 따르는 표기를 사용합니다.
즉, style는 CSS(Cascading Style Sheets)라고 불리우는 언어로 구성되어 있습니다. CSS는 HTML 뿐만 아니라 웹에서 사용되는 문서(Document)에서 서식의 모양을 꾸미는데 사용되는 언어로 이후 강좌에서 자세히 다루도록 하겠습니다.
Style에서 주로 사용되는 기본적인 Property
Style을 지정할 때 많이 사용되는 기본적인 property에 대해서 예제를 통하여 알아보겠습니다.
background Color
background color property는 HTML Element(요소)의 Background color(배경색)을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9 강 연습 페이지.</title>
</head>
<body style="background-color:powderblue;">
<h1>오늘은 style에 대해서 알아봅니다.</h1>
<p>body의 배경색을 지정하여 봅니다.</p>
</body>
</html>
소스를 확인하여 보시면 <body> 태그에 style 을 주고, background-color property에 색을 지정하였습니다.
그럼 위 소스에서 Text<h1>과 <p>라는 태그에도 style 속성에 background-color property를 색을 지정하여 보십시요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9 강 연습 페이지.</title>
</head>
<body style="background-color:powderblue;">
<h1 style="background-color:red;">오늘은 style에 대해서 알아봅니다.</h1>
<p style="background-color:yellow;">body의 배경색을 지정하여 봅니다.</p>
</body>
</html>
Text color
text color은 HTML에 표현된 문장의 글자 색을 지정할 때 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9 강 연습 페이지.</title>
</head>
<body style="background-color:powderblue;">
<h1 style="background-color:red; color:white">오늘은 style에 대해서 알아봅니다.</h1>
<p style="background-color:yellow;color:springgreen">body의 배경색을 지정하여 봅니다.</p>
</body>
</html>
두 개 이상의 property를 지정할때는 ";"로 연결합니다. 잊지마세요.
fonts
fonts는 html 문서의 폰트를 지정하는 font-family, font의 크기를 지정하는 font-size등이 주료 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9 강 연습 페이지.</title>
</head>
<body">
<h1 style="font-family: 굴림체;font-size:300%">오늘은 style에 대해서 알아봅니다.</h1>
<p style="font-family: 고딕체, Arial, Helvetica, sans-serif;font-size:150%">body의 배경색을 지정하여 봅니다.</p>
</body>
</html>
property에 value가 여러개가 지정 될 때는 ","로 구분합니다. 의미는 고딕체가 없으면 Arial이 적용되고 상위 폰트가 없으면 다음 폰트를 찾아서 적용하라는 의미를 지니고 있습니다.
폰트의 크기는 font-size 라는 property로 지정되며, %는 기본폰트 크기의 %율로 표현됩니다. 글자크기는 픽셀로 표현할때는 "%"를 삭제하면 되고, "em", "cm", "ch" 다양한 표현 단위가 존재합니다.
폰트의 크기 단위는 CSS를 설명할때 자세히 다루도록 하겠습니다.
Text Alignmnt
Text Alignmnet 는 문자의 정렬 방식을 의미합니다. 가운데 정렬, 왼쪽정렬의 값을 지정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>9 강 연습 페이지.</title>
</head>
<body">
<h1 style="font-family: 굴림체;font-size:30;text-align: center;">오늘은 style에 대해서 알아봅니다.</h1>
<p style="font-family: 고딕체, Arial, Helvetica, sans-serif;font-size:15;text-align: right;">body의 배경색을 지정하여 봅니다.</p>
</body>
</html>
마무리
이번 포스팅에서는 Style이라는 속성을 사용하는 방법에 대해서 알아봤습니다. Style 속성의 값을 배정할때 사용하는 property와 value는 매우 다양하여 외우려고 하지마세요. Visual Studio Code를 사용하는 이유중 하나가 바로 코딩 가이드가 매우 잘 되어 있다는 점입니다.
지금 우리는 기본에 대해서 알아가고 있습니다. 기본을 알면 어려운 코딩도 접근이 편해질 수 있습니다.
제가 포스팅하고 있는 내용은 한번도 코딩을 하지 않는 분들이 쉽게 접근할 수 있도록 길잡이를 하고자 하는 내용 구성되어 있으니, 너무 쉽다고 생각이 드신다면 잘하고 저의 포스팅하는 목적은 성공입니다.
다음 포스팅에서는 text 를 꾸미는 방법에 대해서 몇 가지를 더 알아보고 가겠습니다.
내용이 도움이 되셨거나 글쓴이를 응원하고 싶으신 분은 하트♥공감 버튼을 꾹 눌러주세요.
내용이 수정이 필요하거나, 도움이 필요하시면 댓글을 남겨주세요!!!
댓글