HTML 글자 색 지정하는 코드와 색상표
- 옛날 리뷰들
- 2020. 5. 2.
16진수 색상 코드를 사용한 글자 색
HTML 글자 색상을 바꾸는 가장 일반적인 방법은 16진수 색상 코드(짧게 16진수 코드)를 사용하는 것이다.
<body> <p style="color:#FF0000";>글자 색상 바꾸는 html입니다.</p> </body>다음과 같은 결과를 얻을 수 있다.
=> 글자 색상 바꾸는 html입니다.
위와 마찬가지로 링크의 색상도 지정할 수 있다.
<body>
<a href="https://chocomii.tistory.com/" style="color:#228b22;">초코미 티스토리 메인 초록색 링크</a>
</body>다음과 같은 결과를 얻을 수 있다.
HTML색 이름을 사용한 글자 색
HTML 글자 색상을 바꾸는 또 다른 방법은 HTML색 이름을 사용하는 것이다. HTML코드는 비슷하다. 이전 단계의 16진수 코드를 사용할 색상의 이름으로 바꾸기만 하면 된다 (이 예에서는 빨간 색). 140개의 명명된 색상 중에서 선택할 수 있다.
HTML <body> <p style="color:red;">글자 색상 바꾸는 html입니다.</p> </body>결과는 위와 동일.
위와 마찬가지로 링크의 색상도 지정할 수 있다.
<body>
<a href="https://chocomii.tistory.com/" style="color:#228b22;">Red Link</a>
</body>역시나 결과는 위 링크 예와 동일
RGB색상 값을 사용한 글자 색
RGB값을 색상 속성 뒤에 propertyb()매개 변수를 넣는다.
<body> <p style="color:rgb(255,0,0);">글자 색상 바꾸는 html입니다.</p> </body>결과 역시 마찬가지로 위와 동일.
RGB값을 사용하는 경우 불투명도를 지정할 수도 있다. rgb()대신 rgba()를 사용하는데 a는 불투명도를 제어하는 색상 채널인 알파를 위한 것이다. 세가지 색상 값을 사용한 후에는 0–1(완전 투명의 경우 0, 완전 불투명의 경우 1)의 척도로 불투명도에 대한 네번째 값을 추가한다.
<body> <p style="color:rgba(255,0,0,0.5);">글자 색상 바꾸는 html입니다.</p> </body>다음과 같은 결과를 얻을 수 있다.
=> 글자 색상 바꾸는 html입니다.
링크 예시는 제외하도록 하겠다.
HSL색상 값을 사용한 텍스트 색상
네번째 방법은 HSL값을 사용하는 것이다. 위에서 설명한 RGB구문과 유사하게 HSL은 HSl()접두사를 사용하고 색조, 채도 및 밝기에 세가지 값을 사용한다. Hue는 0–360의 척도로 표현되며, 채도와 경량은 각각 0%와 100%사이의 비율이다.
<body> <p style="color:hsl(0,80%,30%);">글자 색상 바꾸는 html입니다.</p> </body>다음과 같은 결과를 얻을 수 있다.
=> 글자 색상 바꾸는 html입니다.
RGB와 마찬가지로 HSL도 불투명도를 바로 수정할 수 있다. HSla()접두사를 사용하고 필요한 불투명도 수준에 대해 0에서 1사이 값을 네번재에 넣는다.
<body> <p style="color:hsla(0,80%,30%,0.1);">글자 색상 바꾸는 html입니다.</p> </body>다음과 같은 결과를 얻을 수 있다.
=> 글자 색상 바꾸는 html입니다.
마찬가지로 링크 예시는 제외.
마지막으로 배경색 넣기
배경색은 표에서도 이용할 수 있어서 유용하다.
<body style="background-color:#FF0000;">
</body>머 대충 이런식
개인적으로 body 자체는 잘 안쓰는 편; 그냥 알파벳을 바꿔서
<p style="background-color:#FF0000;">
</p>위와 같이 작성해도 사용에 지장 없다.
이제 티스토리에 맛들리기 시작하면서 좀 꾸미고 싶은데 에디터가 너무x1000000000000 제한적이라서 html까지 공부하게 만든다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
그나마 c언어 공부했던 게 나름 도움이 된다.
참고로 위 내용은 아래 링크가 출처.
아래 링크에 각 색상별 이름과 코드, RGB까지 있어서 개꿀이다.
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
'옛날 리뷰들' 카테고리의 다른 글
| 알레르기까지 유발하는 먼지다듬이에 대한 정보부터 퇴치까지 해보자! (0) | 2020.06.04 |
|---|---|
| 수납에만 집중하는 사람들이 하는 실수 6가지 (0) | 2020.06.04 |
| 소팔소곱창, 곱켓팅 완료하고 맛있게 먹은 후기!(&팁과 구매링크) (0) | 2020.04.27 |
| 경기도 및 수원시 재난기본소득 신청방법 (0) | 2020.04.09 |
| 모서리를 활용한 회전식 수납장 사용 후기 (0) | 2020.03.25 |