1. HTML 색상(colors)
이미 정의된 색상의 이름을 사용하거나 RGB, HEX, HSL, RGBA, HSLA 등이 있다.
색은 배경색, 글자색, 글자의 경계선 색(border color) 등에 적용할 수 있다.
<h1 "style=background-color:indigo;">color</h1>
<h1 "style=color:indigo;">color</h1>
<h1 "style=border:2px indigo;">color</h1>
- 지정된 색 이름
이 외의 다양한 색상의 이름을 참고하고 싶다면?
https://www.w3schools.com/colors/colors_names.asp
HTML Color Names
HTML Color Names Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): Click here to see the 140
www.w3schools.com
- RGB value
RGB 값(red, green, blue)과 RGBA 값(red, green, blue, alpha) 으로 색을 설정한다. 중학교 때 미술시간에 배웠던 3원색인 빨강, 녹색, 파랑의 조합에 따라서 다양한 색을 표현한다. 각각의 값은 숫자 0~255의 범위 내에서 표현한다.
예를 들면, 빨강은 rgb(255, 0, 0). 검정은 rgb(0, 0, 0). 흰색은 rgb(255, 255, 255)
- HEX value
RGB와 같은 원리이지만 표현방식이 약간 다르다. rrggbb값을 00부터 ff(가장 높은 값, 255)로 표시한다.
예를 들면, 빨강은 #ff0000. 흰색은 #ffffff. 검정은 #000000. 워드프레스에서는 이 값을 더 많이 활용한다고 한다.
- HSL value
HSL각각은 hue, saturation, lightness를 의미한다. Hue는 0부터 360까지 색깔을 지정한다. 0은 빨강, 120은 녹색, 240은 파랑이다. Saturation은 포화도를 의미하는데, 퍼센트로 표시하며, 0%는 회색빛을 띄고 100%는 선명한 색이다. Lightness도 퍼센트로 표시하며 0%로 갈수록 검은 물감을 더 더한듯한 효과가 나타난다. 반대로 100%는 흰색이다.
2. HTML CSS
CSS는 Cascading Style Sheets의 약자로 웹 브라우저, 미디어 등에 표현되는 방식을 정의하는 방법이다.
세 가지 방식으로 HTML에 CSS를 추가할 수 있다.
- Inline - HTML 요소에 스타일 속성을 사용하기
- Internal - <head>섹션에 <style>요소를 사용하기
- External - 외적인 CSS 파일을 사용하기
CSS를 추가하는 가장 흔한 방법은 분리된 CSS파일을 유지하는 것이다.
- Inline CSS
하나의 HTML 요소에 적용가능한 방식이다. 이전의 예시에서 본것처럼 헤딩이나 문단 등의 opening tag에 style을 통해 CSS를 추가하는 방식이다.
<h1 style="color:blue;">This is CSS</h1>
- Internal CSS
하나의 HTML 파일 전체에 적용가능한 방식이다. 때문에 <head>안에 <style>요소를 포함시킨다. 중괄호로 나타낸다.
<html>
<head>
<style>
body {background-color:indigo;}
h1 {color:powderblue;}
p {color:white;}
</style>
</head>
</html>
- External CSS
가장 흔하게 CSS를 적용시키는 방법이다. <head>안에 CSS 링크를 연결시킨다. 링크는 .css 확장자로 저장된 파일이며 HTML 코드를 절대 포함하면 안된다.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
style.css파일은 다음과 같은 형태를 지닌다.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
2-1. HTML CSS
- CSS 폰트(fonts)
color(글자색), font-family(폰트), font-size(글자크기)
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
</style>
</head>
- CSS 보더(border)
HTML 요소 주변의 경계선을 설정한다.
p {
border: 1px solid powerblue;
}
- CSS padding(패딩)
텍스트와 패딩 사이의 경계 사이의 거리를 정의한다.
p {
border: 1px solid powderblue;
padding: 30px;
}
- CSS margin(여백)
경계선 바깥의 여백을 정의한다.
p {
border: 1px solid powderblue;
margin: 50px;
}
- id 속성
특정한 요소에 특정한 id를 설정한다. 스타일 속성에 특정 요소를 먼저 정의하고 특정하게 적용하고 싶은 부분에 id를 사용해서 지정한다.
#p01 {
color: blue;
}
<p id="p01">I am different</p>
- class 속성
특정한 요소에 class 속성을 추가한다.
<p class="error"> I am different </p>
대신 <style>요소에서 error의 특성을 정의해야 한다.
<style>
p.error {
color: blue;
}
</style>
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 표, 목록 (0) | 2020.03.18 |
|---|---|
| HTML 링크, 이미지, 이미지맵, 배경이미지, 그림요소 (0) | 2020.03.17 |
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
| HTML 스타일, 텍스트 형식 (0) | 2020.03.15 |
| HTML 헤딩, 헤드, 문단 (0) | 2020.03.14 |
댓글