1. Style

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

 

  - Style 속성을 적용하는 방법은 위 코드와 같다.  

 

 

2. Style 적용

<!DOCTYPE html>
<p style="font-size: 200%;">글자 크기 변경</p>
<p style="color: blue;">글자색 변경</p>
<p style="background-color: blueviolet;">배경색 변경</p>
<p style="text-align:center;">문단 정렬</p>
<p style="font-size: 200%; color: brown; background-color: gold;">여러 스타일 설정</p>

 

2-1 "font size: 크기;"

  - 글자 크기를 지정한다.

  - 글자 크기 단위는 rem, em, px, %가 있다. ( 이 부분은 css 공부할 때 알아보도록 하자. )

 

 

2-2 "color: 색깔;"

  - 글자색을 변경한다.

 

 

2-3 "background-color: 색깔;"

  - 텍스트 배경색을 변경한다.

 

 

2-4 "text-align: 위치;"

  - 문단 정렬을 한다.

  - center는 중앙 정렬을 의미하며 오른쪽 정렬과 왼쪽 정렬을 하고 싶으면 right, left를 입력하면 된다. 이외에도 다양한 정렬이 있으니 검색해서 찾아보길 바란다.

 

 

2-5 여러 스타일 설정

  - "속성: 값; 속성: 값; ~~"의 형식으로 세미콜론(;)으로 구분하여 여러 스타일을 설정할 수 있다.

 

'FrontEnd > HTMl' 카테고리의 다른 글

[HTML] 리스트와 테이블  (0) 2021.07.17
[HTML] 링크와 이미지  (0) 2021.07.17
[HTML] 문자셋  (0) 2021.07.17
[HTML] 텍스트 요소  (0) 2021.07.16
HTML 의미와 기본 구조  (0) 2021.07.14