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 속성은 텍스트 정렬을 변경한다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다