HTML 스타일 (Style)
HTML 요소의 style 속성(attribute)을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다.
하지만 이러한 style 속성을 이용한 방법은 오직 단 하나의 HTML 요소에만 스타일을 적용할 수 있다.
1
2
문법
<태그이름 style="속성이름 : 속성값"></태그이름>
1
2
3
4
5
<p style="background-color:white">style 속성을 이용한 배경색 변경</p>
<p style="color:maroon">style 속성을 이용한 글자색 변경</p>
<p style="font-size:250%">style 속성을 이용한 글자 크기 변경</p>
<p style="text-align:center">style 속성을 이용한 문단 정렬 변경</p>
<p style="background-color:white; color:maroon; font-size:150%; text-align:center">style 속성을 이용하여 한 번에 스타일링</p>
style 속성을 이용한 배경색 변경
style 속성을 이용한 글자색 변경
style 속성을 이용한 글자 크기 변경
style 속성을 이용한 문단 정렬 변경
style 속성을 이용하여 한 번에 스타일링
style 속성값에 사용되는 css 속성과 속성값들은 세미콜론(;)을 이용하여 구분하며 마지막 css속성 세미콜론(;)은 생략할 수 있다.
HTML 색 (Color)
HTML에서 색을 표현하는 방법은 3가지가 있다.
- 색상 이름으로 표현
- RGB 색상값으로 표현
- 16진수 색상값으로 표현
색상 이름으로 표현
W3C에서 정의한 표준 색상 이름을 이용하여 색상을 지정하는 방법이다.
아래 링크에서 정의된 표준 색상들을 확인할 수 있다.
W3C 색상 키워드1 2 3 4 5
<p style="color:blue">색상 이름으로 표현된 파란색</p> <p style="color:green">색상 이름으로 표현된 녹색</p> <p style="color:silver">색상 이름으로 표현된 은색</p> <p style="color:teal">색상 이름으로 표현된 청록색</p> <p style="color:red">색상 이름으로 표현된 빨간색</p>
▶ 실행결과색상 이름으로 표현된 파란색
색상 이름으로 표현된 녹색
색상 이름으로 표현된 은색
색상 이름으로 표현된 청록색
색상 이름으로 표현된 빨간색
RGB 색상값으로 표현
모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.
RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.1 2 3 4 5
<p style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색</p> <p style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색</p> <p style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색</p> <p style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색</p> <p style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색</p>
▶ 실행결과RGB 색상값으로 표현된 파란색
RGB 색상값으로 표현된 녹색
RGB 색상값으로 표현된 은색
RGB 색상값으로 표현된 청록색
RGB 색상값으로 표현된 빨간색
16진수 색상값으로 표현
16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다.
따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 ff까지의 범위를 가진다.
예를 들면, 빨간색을 나타내는 RGB 색상값인 rgb(255,0,0)은 16진수 색상값으로는 #ff0000이 되는 것입니다.1 2 3 4 5
<p style="color:#0000ff">16진수 색상값으로 표현된 파란색</p> <p style="color:#008000">16진수 색상값으로 표현된 녹색</p> <p style="color:#c0c0c0">16진수 색상값으로 표현된 은색</p> <p style="color:#008080">16진수 색상값으로 표현된 청록색</p> <p style="color:#ff0000">16진수 색상값으로 표현된 빨간색</p>
▶ 실행결과16진수 색상값으로 표현된 파란색
16진수 색상값으로 표현된 녹색
16진수 색상값으로 표현된 은색
16진수 색상값으로 표현된 청록색
16진수 색상값으로 표현된 빨간색
HTML 배경 (Background)
HTML 문서의 기본 배경(background)은 흰색이며, HTML 요소들도 각자 자신만의 배경을 가지고 있다.
HTML에서는 이러한 배경을 다음과 같이 변경할 수 있다.
- 배경을 다른 색으로 변경
- 배경을 다른 이미지로 변경
배경을 다른 색으로 변경
HTML5 이전까지는 bgcolor 속성을 이용하여 HTML 요소의 배경색을 다른 색으로 변경할 수 있었으나
HTML5부터는 bgcolor 속성을 더 이상 지원하지 않으며, CSS를 이용하여 배경색을 변경하도록 하고 있다.1 2
body { background-color: lightblue; } p { background-color: #FFFFCC; }▶ 실행결과단락 태그
배경을 다른 이미지로 변경
background 속성을 이용하면 HTML 요소의 배경을 이미지(image)로 설정할 수 있다.
배경으로 이미지를 사용하면 웹 페이지의 로딩시간이 증가한다.
따라서 보통은 작은 사이즈의 이미지를 패턴(pattern)으로 만들어 배경 이미지로 반복 설정한다.1
<p style="background: url(https://cdn.pixabay.com/photo/2020/09/09/02/12/smearing-5556288_960_720.jpg);">단락 태그</p>
▶ 실행결과단락 태그