HTML 독학하기 HTML 기본 요소-스타일(Style)

 

HTML 스타일(Style)

HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있습니다.

하지만 style 속성을 이용한 방법은 지정한 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다.

 

style 속성값에 사용되는 css 속성(property)과 속성값들은 세미콜론을(;) 사용해 구분합니다.

<tagname style="속성이름:속성값"

스타일 속성 특성

특성	설명
유형	String
적용 대상	Scalar 태그, list 태그, orgnodes 태그
필수	선택사항입니다.
기본값	없음
겹쳐쓰기 가능 여부	예
색인 가능 여부	아니오

스타일- 글자 크기 변경

글자의 크기를 변경하는 스타일입니다.

 

입력

<h1 style="font-size:200%">
    
    200%

</h1>

 

스타일-글자색 변경

글자 색을 변경하는 스타일입니다. 

 

입력

<h1 style="color:purple">
보라색
</h1>

 

스타일-배경색 변경

글자의 배경색을 지정하는 스타일입니다.

 

입력

<h1 style="background-color:red">

  붉은색

</h1>

문단 정렬 변경

문단 정렬을 변경하는 스타일 입니다. left(왼쪽정렬), right(오른쪽정렬), center(가운데정렬) , justify(양쪽정렬) 등이 있습니다.

 

입력

<h1 style="text-align:right">

    오른쪽정렬

</h1>

style 한번에 적용

style 속성값에 사용되는 css 속성(property)과 속성값들은 세미콜론을(;) 사용해 구분합니다.

CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있습니다.

 

입력

<h1 style="background-color:red; color:purple; font-size:200%; text-align:left">

    200%보라색

</h1>