[HTML] 스타일

728x90

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

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

1. 배경색 변경

<p style="background-color:white;">hi, HTML</p>

2. 글자색 변경

<p style="color:white;">hi, HTML</p>

3. 글자 크기 변경

<p style="font-size:200%;">hi, HTML</p>

4. 문단 정렬

<p style="text-align:center;">hi, HTML</p>

5. 색 표현

HTML에서 색을 표현하는 방법은 여러가지가 있습니다. 여기서는 대표적인 세 가지 방법을 소개합니다.

5-1. 색상 이름으로 표현

<p style="color:white;">hi, HTML</p>

5-2. RGB 색상값으로 표현

<p style="color:rgb(0,0,255);">hi, HTML</p>

5-3. 16진수 색상값으로 표현

<p style="color:#0000FF;">hi, HTML</p>

6. 배경색 변경

HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었습니다. 하지만 HTML5 부터는 bgcolor 속성을 더 이상 지원하지 않으며 CSS를 이용하여 배경색을 변경해야 합니다.

<style>
	p{
    	background-color:gray;
    }
</style>

위 예제는 단편적인 예제이지만 5번 처럼 세 가지의 경우로 모두 변경할 수 있습니다. 단순한 색상이 아닌 이미지로 배경을 설정하고 싶다면 다음 예제처럼 할 수 있습니다.

<body background="../이미지경로"></body>

7. 링크 연결

<a href="https://soominkim.tistory.com/">바로가기</a>

<a> 태그의 target 속성으로 연결된 문서가 어디에서 열릴지 명시할 수 있습니다.

속성값	설명
_blank	링크로 연결된 문서를 새 창이나 새 탭에서 오픈합니다.
_self	링크로 연결된 문서를 현재 프레임에서 오픈합니다. (기본설정)
_parent	링크로 연결된 문서를 부모 프레임에서 오픈합니다.
_top	링크로 연결된 문서를 현재 창의 가장 상위 프레임에서 오픈합니다.
프레임(frame)이름	링크로 연결된 문서를 지정된 프레임에서 오픈합니다.

HTML 링크의 상태(state)는 다음과 같이 구분할 수 있습니다.

HTML에서도 페이지의 책갈피 기능을 제공합니다.

<a href="#markPage"><p>북마크</p></a>

<p><a name="markPage"></a></p>

728x90

티스토리툴바