반응형
# <style> 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정이 가능합니다.
# 하지만 이러한 style 속성을 이용한 방법은 오직 하나의 HTML 요소에만 스타일을 적용할 수 있습니다.
# tag 목록을 볼 수 있는 페이지로 이동합니다.
# 비전공자가 이해한 HTML
HTML 스타일(style) 속성
1) 문법
<태그이름 style="속성이름:속성값">
2) 배경색 변경
<!-- 배경색 -->
<h1 style="background-color:white">
style 속성을 이용한 배경색 변경
</h1>
3) 글자색 변경
<!-- 글자색 -->
<h1 style="color:maroon">
style 속성을 이용한 글자색 변경
</h1>
4) 글자 크기 변경
<!-- 글자 크기 변경 -->
<h1 style="font-size:250%">
style 속성을 이용한 글자 크기 변경
</h1>
5) 문단 정렬 변경
<!-- 문단 정렬 변경 -->
<h1 style="text-align:center">
style 속성을 이용한 문단 정렬 변경
</h1>
6) 여러 스타일 설정
style 속성값에 사용되는 CSS 속성과 속성값들은 세미콜론(;)을 이용하여 구분
CSS 속성을 하나만 사용할 때나, 여러 개의 CSS 속성 중 맨 마지막 CSS 속성은 세미콜론(;)을 생략할 수 있음
<!-- 여러 스타일 설정 -->
<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기
</h1>
해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.
반응형
'FrontEnd > HTML' 카테고리의 다른 글
#4-3. HTML 링크(link) 설정 방법(<a>) (0) | 2021.07.16 |
---|---|
#4-2. HTML 배경(Background) 설정 방법 (0) | 2021.07.16 |
#3. HTML 공간 분할 요소:: iframe과 HTML 레이아웃(layout) (0) | 2021.07.15 |
#2. HTML 공간 분할 요소:: 블록과 인라인(Block, Inline) (0) | 2021.07.15 |
#1. HTML TEXT(텍스트) 요소 (0) | 2021.07.14 |