HTML 기본 요소-1

HTML 스타일

HTML 스타일(Style)

1. HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다.
   하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있다.

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

배경색 변경

다음 예제는 style 속성을 이용하여 배경색을 변경하는 예제이다.

<h3 style="background-color:gray">
    style 속성을 이용한 배경색 변경
</h3>

style 속성을 이용한 배경색 변경

글자색 변경

다음 예제는 style 속성을 이용하여 글자색을 변경하는 예제이다.

<h3 style="color:maroon">
    style 속성을 이용한 글자색 변경
</h3>

style 속성을 이용한 글자색 변경

글자 크기 변경

다음 예제는 style 속성을 이용하여 글자 크기를 변경하는 예제이다.

<h3 style="font-size:250%">
    style 속성을 이용한 글자 크기 변경
</h3>

style 속성을 이용한 글자 크기 변경

문단 정렬 변경

다음 예제는 style 속성을 이용하여 문단 정렬을 변경하는 예제이다.

<h3 style="text-align:center">
    style 속성을 이용한 문단 정렬 변경
</h3>

style 속성을 이용한 문단 정렬 변경

여러 스타일의 설정

1. style 속성을 이용하여 여러 CSS 스타일을 한 번에 적용할 수 있다.

   <h3 style="background-color:white; color:maroon; font-size:150%; text-align:center">
       style 속성을 이용하여 한 번에 스타일링 하기!
   </h3>

style 속성을 이용하여 한 번에 스타일링 하기!

2. style 속성값에 사용되는 CSS 속성(property)과 속성값들은 세미콜론(;)을 이용하여 구분한다.

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