HTML 스타일(Styles).
HTML 스타일(Styles)은 HTML 요소의 시각적인 표현을 변경하기 위해 사용됩니다.
스타일은 요소에 대한 디자인, 레이아웃, 색상, 글꼴 등의 속성을 지정하는 데 사용됩니다.
HTML 스타일은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트의 세 가지 형태로 지정할 수 있습니다.
The HTML Style Attribute.
HTML의 style 속성은 특정 HTML 요소에 인라인 스타일을 적용하는 데 사용됩니다.
style 속성을 이용하여 요소의 외관을 변경하기 위해 CSS 속성과 값을 직접 정의할 수 있습니다.
<tagname style="property:value;">
Background Color.
배경 색상(Background Color)을 설정하기 위해서는 HTML 요소에 style 속성을 사용하여 background-color 속성을 정의해야 합니다.
background-color 속성은 원하는 배경 색상을 지정하는 데 사용됩니다.
일반적으로 CSS에서 색상은 이름, RGB 값, HEX 코드 등으로 표현될 수 있습니다.
<div style="background-color: blue;">
<p style="color:white;">이 배경은 파란색 입니다.</p>
</div>이 배경은 파란색 입니다.
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>This is a heading
This is a paragraph.
Text Color / Fonts.
텍스트 색상(Text Color)과 글꼴(Fonts)을 설정하기 위해서는 HTML 요소에 style 속성을 사용하여
color 속성과 font-family 속성을 정의해야 합니다.
<p style="color: blue; font-family: Arial, sans-serif;">
이 텍스트는 파란색으로 표시되고 Arial 글꼴을 사용합니다.
</p>이 텍스트는 파란색으로 표시되고 Arial 글꼴을 사용합니다.
Text Size / Text Alignment.
HTML에서는 텍스트 크기를 조정하기 위해 <font> 태그나 <span> 태그와 CSS 속성을 활용할 수 있습니다.
<font> 태그를 사용한 예시: <font size="4">텍스트 내용</font>
<span> 태그와 CSS를 사용한 예시: <span style="font-size: 14px;">텍스트 내용</span>
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<span style="font-size: 18px;">텍스트 내용</span>
<font size="5">텍스트 내용</font>
</body>
</html>This is a heading
This is a paragraph.
텍스트 내용 텍스트 내용HTML에서는 텍스트 정렬을 위해 CSS의 text-align 속성을 사용합니다.
이 속성의 값으로는 left (왼쪽 정렬), center (가운데 정렬), right (오른쪽 정렬), justify (양쪽 정렬) 등이 있습니다.
예시: <p style="text-align: center;">텍스트 내용</p>
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:right;">right paragraph.</p>
<p style="text-align:center;">텍스트 내용</p>
</body>
</html>Centered Heading
Centered paragraph.
right paragraph.
텍스트 내용
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
|---|---|
| HTML 튜토리얼 - HTML Colors (0) | 2023.07.11 |
| HTML 튜토리얼 - HTML 텍스트 서식 / 인용문 / 인용 요소 (0) | 2023.07.07 |
| HTML 튜토리얼 - HTML Basic Examples (0) | 2023.06.22 |
| HTML 튜토리얼 - HTML 소개 (0) | 2023.06.22 |