HTML, CSS

[HTML] #5 html 기본 요소 스타일 적용 (스타일, 배경색, 글자색, 글자크기, 문단 정렬)

권락현 2021. 11. 30. 00:17

 

html 기본 요소 중 스타일에서 변경할 수 있는 간단한 것들을 정리해보겠습니다

 


스타일 적용

기본적인 스타일 적용방법 : <태그 이름 style="속성:속성 값">

사용 예시) <div style="color:gray:"> 회색 글자 </div> - div 안의 글자는 회색으로 표현

 

 

배경색 속성 : background-color

 

글자색 속성 : color

 

글자크기 속성 : font-size

 

문단 정렬 속성 : text-align

문단 정렬 속성 값 : center, left, right

 

 

*구분을 위해 스타일 태그에 외각선을 그렸습니다*

<style>
    h1{border: 1px solid black;}
</style>

<!-- 색상 -->
<h1 style="background-color:lightgray">제목</h1>
<h1 style="color:red">제목</h1>
<h1 style="background-color:lightgray; color:red">제목</h1>

<!-- 글자 크기 -->
<h1 style="font-size:100px">제목</h1>
<h1 style="font-size:20px">제목</h1>

<!-- 문단 정렬 변경 -->
<h1 style="text-align:center">제목</h1>
<h1 style="text-align:left">제목</h1>
<h1 style="text-align:right">제목</h1>