HTML Style 은 어떤 기능일까요? HTML 태그의 디자인 효과를 주는 태그 또는 속성입니다. 이 페이지에서는 속성으로써의 기능만 살펴보겠습니다.
HTML Style
HTML Style 기능은 문서의 디자인 효과를 주기 위해서 사용됩니다.
style 속성(html attributes) 뒤에는 css 속성(css property)이 와서 구체적인 디자인 명령을 내립니다.
또는 <head> 태그 사이에서 <style> 태그로써 CSS 효과를 주기도 합니다.
HTML 배경색
background-color 속성으로 HTML 태그의 배경색을 변경합니다. 배경색 변경을 원하는 태그 뒤에 style 속성을 삽입합니다.
style 속성 뒤에 background-color 를 입력 후 green, gray, yellow 등 원하는 색을 입력합니다.
<body style="background-color:green;">
<h1>html 배경색 변경</h1>
<p style="background-color:gray;">html 배경색 변경은 style 속성에 background-color 속성을 추가해서 사용합니다.</p>
<p style="background-color:yellow;">변경을 원하는 태그 뒤에 style과 background-color를 동시에 삽입합니다.</p>
</body>HTML 글자색
color 속성으로 HTML 태그의 글자색을 변경합니다. 글자색 변경을 원하는 태그 뒤에 style 속성과 >color 속성을 입력합니다.
color 속성 뒤에는 변경을 원하는 색(blue) 또는 색 코드(#A744DE)를 입력합니다.
<h1>HTML 글자색 변경</h1>
<p style="color:blue;">글자색 변경은 style 속성과 color 속성을 사용합니다.</p>
<p style="color:#A744DE">color 속성 뒤에 원하는 색 또는 색상 코드를 입력합니다.</p>HTML 글꼴
HTML 글꼴 변경은 font-family 속성을 사용합니다. style 속성과 font-family 뒤에 변경을 원하는 글꼴(궁서, 굴림)을 입력합니다.
<h1>HTML 글꼴 변경</h1>
<p style="font-family:궁서체;">HTML 글꼴 변경은 font-family 속성을 사용합니다.</p>
<p style="font-family:굴림">font-family 뒤에 글꼴 값을 입력합니다.</p>HTML 글자 크기
HTML 글자 크기 변경은 font-size 속성을 사용합니다. 변경을 원하는 태그 뒤에 style 속성을 삽입합니다. font-size 속성 뒤에 원하는 글자 크기 값을 px, % 등으로 삽입합니다.
<ul>
<li style="font-size:20px;">html 글자 크기 변경은 원하는 태그 뒤에 style 속성을 추가합니다.</li>
<li style="font-size:15px;">font-size 속성을 style 속성 뒤에 사용합니다.</li>
<li style="font-size:10px;">글자 크기는 px로 변경합니다.</li>
<li style="font-size:100%;">글자 크기는 퍼센트로도 변경할 수 있습니다.</li>
</ul>HTML 글자 정렬
HTML 글자 정렬은 text-align 속성을 사용합니다. style 속성 뒤에 text-align 속성을 입력합니다. left center, right 원하는 포지션을 입력합니다.
<h1 style="text-align:center;">HTML 글자 정렬</h1>
<p>글자 정렬은 text-align 속성을 사용합니다.</p>
<p style="text-align:left;">왼쪽 정렬입니다.</p>
<p style="text-align:center;">가운데 정렬입니다.</p>
<p style="text-align:right;">오른쪽 정렬입니다.</p>