728x90
Style 속성은 HTML 태그의 디자인 효과를 주는 속성이다.
색상 변경
- 배경색(background-color)
- 글자색(color)
글자 크기(font-size)
- font-size: 250%
- font-size: 50px
글 정렬(text-align)
- text-align: left -> 왼쪽 정렬
- text-align: right -> 오른쪽 정렬
- text-align: center -> 가운데 정렬
여백(margin)
- margin-left: 100px -> 왼쪽 100px 여백 주기
- margin-bottom: 70px -> 아래 70px 여백 주기
글꼴 스타일(font-style)
- font-style: normal -> 기본 글꼴 스타일
- font-style: italic -> 이탤릭체
- font-style: oblique -> 기울어진 글꼴
글꼴 종류(font-family)
- font-family: 궁서체
- font-family: Arial
- Style 활용 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 주석-코드가 아니라 설명(Ctrl+/) */
/* 1. 코드에 대한 부가적인 설명 */
/* 2. 내가 개발하고 있는 코드를 잠시 실행하지 않게 하고 싶을 때 */
/* 스타일 */
/* html 요소에서 직접 style 속성을 통해 정의하는 것을 inline style */
/* <style> 태그에 작성하는 것을 internal style </style> */
/* 별도의 .css 파일로 만들어서 사용하는 것을 external style */
</style>
</head>
<body>
<p>일반 문장입니다.</p>
<p style="color: red">빨간색 글자입니다.</p>
<p style="background-color: green; color: blue">
초록색 배경에 파란색 글자입니다.
</p>
<p style="font-size: 30px">큰 사이즈 글자입니다.</p>
<p style="text-align: center">가운데 정렬</p>
<p style="text-align: right">오른쪽 정렬</p>
<p style="font-weight: bold">볼드체(굵은)로 보입니다.</p>
<p style="text-decoration: underline">밑줄이 생깁니다.</p>
<p style="text-decoration: line-through">취소선이 생깁니다.</p>
<p style="font-style: italic">이탤릭첼로 보여집니다.</p>
</body>
</html>
728x90
'Frontend > HTML' 카테고리의 다른 글
| 6. 표 태그 (0) | 2024.07.03 |
|---|---|
| 5. 목록 태그 (ol, ul, dl) (0) | 2024.07.03 |
| 4. <div>, <span> (0) | 2024.07.03 |
| 2. 글로벌 속성 (0) | 2024.07.02 |
| 1. HTML 기본 구조 및 기본 요소 (0) | 2024.07.02 |
