[HTML] HTML 요소에 스타일을 적용해보자

HTML 요소에 스타일을 적용해보자

 

스타일 (CSS, Cascading Style Sheet)

 

여기서 언급되는 스타일이란 HTML문서의 스타일과 레이아웃을 결정짓는 언어인 CSS3를 지칭합니다.

 

 

스타일 적용하기 (Inline Style)

 

HTML 문서에 스타일을 적용하기 위해 "style" 속성을 사용할 수 있습니다.
글자나 요소를 가운데로 정렬하거나 배경, 요소의 크기 등을 조절할 수 있습니다.
여러가지 스타일을 적용하고 싶다면 값을 세미콜론으로 구분해 지정할 수 있습니다.

---

HTML에 스타일 적용하기!

HTML에 스타일 적용하기!

HTML에 스타일 적용하기!

<div style="text-align:center">
    <p>HTML에 스타일 적용하기!</p>
    <p style="color:#6bacce; margin-top:10px">HTML에 스타일 적용하기!</p>
    <p style="background-color:#6bacce; color:#fff; margin-top:10px">HTML에 스타일 적용하기!</p>
</div>

---

글씨색을 변경하고 바로 위 요소와 10 Pixel 만큼 거리를 띄우는 스타일을 적용한 예제입니다.
또한 모든 <p> 태그를 포함하는 <div> 태그에는 글씨 가운데 정렬 스타일을 적용했습니다.

• color : 글씨색을 지정합니다
• margin : 지정한 수치만큼 외부 요소와 거리를 둡니다. (사회적거리두기 아님.)
• background-color : 요소가 가지는 영역의 배경색을 지정합니다.
• text-align : 텍스트 요소의 좌, 우, 가운데 정렬을 지정합니다.

 

 

HTML 문서에서 색 표현하기

 

잘 만들어진 웹사이트나 프리젠테이션 자료는 내용이나 구성도 물론이지만 색을 잘 활용한 경우가 정말 많습니다.
저도 색을 이용해 스타일을 설명했구요. 🙂

HTML 문서나 Style Sheet에서 색을 표현하는 방법은 크게 세가지로 분류할 수 있습니다.

 

1. 색상 이름으로 색을 표현합니다.
2. RGB 값으로 색을 표현합니다.
3. 16진수 색상코드를 이용해 색을 표현합니다.

---

HTML에 스타일 적용하기!

HTML에 스타일 적용하기!

HTML에 스타일 적용하기!

<div style="text-align:center">
    <p style="color:SteelBlue;">HTML에 스타일 적용하기!</p>
    <p style="color:rgba(70, 130, 180); margin-top:10px">HTML에 스타일 적용하기!</p>
    <p style="color:#4682b4; margin-top:10px">HTML에 스타일 적용하기!</p>
</div>

---

색을 명시한 방법은 모두 다르지만 같은 색을 표시하고 있음을 알 수 있습니다.

 

현재 웹 브라우저에서 지원하는 색상의 이름은 약 140여개 정도라고 하는데 아래 사이트에서 확인할 수 있습니다.🙂
(세세한 색상표현을 하기엔 한계가 커서 색상명으로 색을 지정하는 방법은 잘 사용되지 않는다고 합니다.)

https://www.w3schools.com/cssref/css_colors.php

CSS Colors

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/