본문 바로가기
IT/HTML & CSS & JavaScript

HTML 스타일(style) - 글자 크기 & 문단 정렬 / 다중 스타일

by 베베야 2021. 8. 26.
728x90

이번시간에는 HTML의 스타일(style) 사용하여 문자의 크기를 변경하는 방법과
문단을 오른쪽 왼쪽 센터로 정렬하는 방법에 대해서 알아보겠습니다.

HTML에서 style속성을 사용하게되면 CSS 스타일을 직접 요소에 적용하는 것이 가능집니다.
대신 이런 방법은 하나의 HTML 요소에만 적용되어 집니다.

 


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

 

1. 글자 크기 변경

font-size 속성을 사용하게 되면 문자의 크기를 변경할 수 있습니다.

<h1 style="font-size:200%">문자의 크기를 2배로 </h1>
<h1 style="font-size:300%">문자의 크기를 3배로 </h1>
<h1 style="font-size:400%">문자의 크기를 4배로 </h1>

 

2. 문단 정렬 변경

text-align 속성을 사용하면 문자를 가운데, 왼쪽, 오른쪽 방향으로 정렬이 가능합니다.

<h1 style="text-align:center">문자 가운데 정렬</h1>
<h1 style="text-align:left">문자 왼쪽 정렬</h1>
<h1 style="text-align:right">문자 오른쪽 정렬</h1>

 

3. 여러(다중) 스타일의 설정

Style에는 여러개의 속성 지정이 가능합니다.
다중 속성의 구분자는 세미콜론(;)으로 표시해야 합니다.
다음과 같이 글자 크기와 문단정렬을 동시 설정한 화면입니다.

<h1 style="font-size:200%; text-align:center">
	문자의 크기를 2배로 하고 가운데 정렬
</h1>

 

이상으로 HTML에서 Style 속성을 사용하여

문자의 크기와 문단을 정렬하는 방법에 대해서 알아보았습니다.

반응형
그리드형

댓글