태그 보관물: 글자색

HTML 스타일(Style) 속성 지정 방식

댓글 남기기

스타일(Style)
스타일은 어떠한 것을 표현하기 위한 방식이다. 예를들어 글자색, 배경색을 바꾼다던지, 글짜크기를 바꾸는 방식 같은것이다.

HTML 스타일은 아래와 같은 것을 뜻한다.

기본 예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 기본 Styles 개념</title>
</head>
<body>

<p>나는 그냥 평범하다.</p>
<p style="color:red;">난 빨강이야</p>
<p style="color:blue;">난 파랑이야</p>
<p style="font-size:50px;">난 글짜가 아주 크다.</p>

</body>
</html>

HTML 스타일(Style) 속성

HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있도록 되어 있다. HTML style 속성을 문법(구문)은 아래와 같이 표현한다.

<태그이름 style="속성이름:속성값">

배경색(background-color) 속성

CSS background-color 속성은 HTML 요소의 배경색을 정의한다. 아래 예제에서는 페이지의 배경색을 powderblue로 설정한 것이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 배경색</title>
</head>
<body style="background-color:powderblue;">

	<h1 style="background-color:white">
		style 속성을 이용하여 배경색 변경하기. 이부분은 흰색으로 표시된다.
	</h1>

</body>
</html>

글자색(Text Color)

CSS color 속성은 HTML 요소의 텍스트 색상을 변경한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 글자색</title>
</head>
<body>

<h1 style="color:blue;">제목은 파란색으로 표현했다.</h1>
<p style="color:red;">여기는 단락을 나타내는데 빨강색으로 표현했다.</p>

</body>
</html>

글꼴(Fonts)

CSS font-family 속성은 HTML 요소에 사용할 글꼴을 변경한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 글꼴</title>
</head>
<body>

<h1 style="font-family:verdana;">제목의 글꼴은 verdana 이다.</h1>
<p style="font-family:courier;">단락의 글꼴은 courier 이다. </p>

</body>
</html>

글자 크기(Text Size)

CSS font-size 속성은 HTML 요소의 텍스트 크기를 변경한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 글자크기</title>
</head>
<body>

<h1 style="font-size:300%;">제목의 글자크기는 기본값에서 300% 늘린것이다.</h1>
<p style="font-size:160%;">단락의 글자크기는 기본값에서 160% 늘린것이다.</p>

</body>
</html>

텍스트 정렬(Text Alignment)

CSS text-align 속성은 HTML 요소의 텍스트 정렬(문단 정렬)을 변경한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 텍스트 정렬</title>
</head>
<body>

<h1 style="text-align:center;">제목을 가운데 정렬해본것이다.</h1>
<p style="text-align:center;">단락도 가운데 정렬해본것이다.</p>

</body>
</html>

※기본적으로 HTML 문서 작성시 왼쪽정렬을 원칙으로 한다.

여러 스타일 설정

style 속성을 이용하여 여러 CSS 스타일 여러개를 한 번에 표현할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Styles</title>
</head>
<body style="background-color:#33CCFF">

	<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
		style 속성을 이용하여 한 번에 여러개의 스타일링을 표현할 수 있다.
	</h1>

</body>
</html>

※style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분한다.
※CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있다.

요약 정리

  • HTML 요소에 사용되는 스타일은 style 속성이다.
  • background-color 속성은 배경 색상을 변경한다.
  • color 속성은 텍스트 색상을 변경한다.
  • font-family 속성은 텍스트 글꼴을 변경한다.
  • font-size 속성은 텍스트 크기를 변경한다.
  • text-align 속성은 텍스트 정렬을 변경한다.