html hexcode 색상 코드표와 이름표
html hexcode 색상 코드표 사용방법 및 사이트를 소개하도록 하겠습니다.
목차
웹에서 사용하는 색상 설정은 hexcode입니다. 웹에서 우리가 보는 사이트는 html과 css라는 웹 마크업 언어로 만들어져 있습니다. 우리가 이용하는 대부분의 웹 사이트는, 텍스트의 색상을 쉽게 바꿀 수 있도록 만들어져 있는데요~
하지만, 세심하게 원하는 색으로 설정하고 싶다면, 6자리로 표현된 html hexcode를 사용해야 원하는 색상을 설정할 수 있습니다.
The web site is created in web markup languages called html and css. Most of the websites we use are designed to make it easy to change the color of text. However, if you want to fine-tune the color, you can set the color you want by using the 6-digit html hexcode.
웹에서 사용하는 색상 설정은 hexcode와 RGB인데요. 실제로 많이 사용하는 것은 6개의 알파벳 또는 숫자로 색상을 표현할 수 있는 hexcode를 많이 사용합니다. 웹 색상을 표현하는 방식이기 때문에, 인쇄 컬러 색상인 CMYK와는 색상을 표현하는 방식이 많이 다릅니다.
The color settings used on the web are hexcode and RGB, and hexcode is often used. It is a method of expressing web colors. Therefore, it is distinctly different from CMYK, which is a printed color color.
이제 색상코드표 사용 방법에 대해서 알려드리도록 하겠습니다!
색상코드표 사용방법
텍스트 에디터를 예를 들어 설명하도록 하겠습니다. 네이버 블로그에서 포스팅을 쓸 때, 메뉴 중 글자색 바꾸기를 통해 색상을 바꾸고 있는데요.
에디터에서 글자색을 원하는 색으로 바꾸고 싶다면, 글자색 창 아래 더보기를 누르면 색상을 조절하는 창이 하나 뜹니다.
즉, 텍스트 에디터 글자색 > 더보기를 누르면, 아래처럼 색상을 세세하게 설정할 수 있는 창에서 바꿀 수 있는 것인데요.
#000000이라고 되어 있는 부분이 바로 html hexcode코드입니다. #000000라는 색상코드는 완전 블랙을 나타내는 hexcode로, 색상 이름표로 바꾼다면 black으로 할 수 있는데요.
만약 라벤더 색상으로 한 번 바꿔본다면, #e6e6fa가 라벤더 색상을 의미합니다. 아래 스크린샷처럼 라벤더 색상 코드를 입력란에 입력하고 확인 버튼을 클릭하시면, 아래 라벤더 텍스트 색상으로 변경이 가능합니다.
라벤더
따라서, 원하는 대로 텍스트 에디터의 글자색을 변경할 수 있을뿐더러, 다른 웹 페이지 상에 hexcode를 지원하는 모든 곳에서 응용이 가능한데요.
이는, 티스토리 텍스트 에디터도 마찬가지입니다. 글자 색상을 바꾸는 창에 색상 코드를 입력하면 쉽게 바꿀 수 있습니다. 거의 대부분의 글 편집 프로그램에서 가능한 방법으로, 이를 응용하여 사용하고 싶으시다면, html hexcode를 알아야 하는데요.
많이 쓰는 html hex 색상 코드표와 이름을 알려주는 사이트들을 소개해드리도록 하겠습니다.
color hex 색상코드표 사이트
color codes 사이트 제가 제일 애용하는 사이트 중 하나인데요. 사이트 제목은 color hex color codes 사이트입니다.
https://www.color-hex.com/ Color Hex Color Codes Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte www.color-hex.com
이 사이트에서는 색상의 이름을 볼 수 있는데, 원하는 색상에 맞는 hex 색상 코드를 입력할 때도 사용할 수 있고, html 편집기에 이름을 직접 사용할 때 사용할 수도 있는데요!
color: #000000; color: black; 이렇게 많이 쓰는 색상 이름으로 검색하셔서 hexcode를 찾아도 되고, html편집기를 사용하시는 경우는 color name을 입력해도 되니까요. 편한 방법을 사용하시면 될 것 같습니다.
특히, 이 사이트는 최신 인기 컬러들부터, color hex color palettes color schemes라고, 인기 있는 색상 팔레트와 테마를 볼 수 있는데요. 특히나, 이 색상들을 보고 참고해서, 디자인하면 생각보다 예쁜 디자인이 가능합니다.
hex코드 6자리를 입력하거나, 많이 사용하는 색상은 이름을 써도 적용됩니다. 이건 html 코드를 직접 편집할 때만 가능한 기능으로, 우리가 파란색을 하늘색이라고 하는 것처럼, 서양에서 딱 그 색상 이름을 알 수 있는 관용적인 색상들은 이름만 써도 가능합니다.
htmlcolorcodes 색상코드표 사이트
사이트 아래 사이트에 접속하시면, 기본적인 html color codes를 볼 수 있습니다.
Color Chart — HTML Color Codes Never choose the wrong color again. Use our web safe, Material design and flat design color chart to find the perfect color combination for your website.
html hex 색상 코드표를 보시고 원하는 컬러를 선택하면, 위에 hexcode가 나오는데, 그 hex 색상 코드를 보고 적용하면 됩니다. 아래 스크린샷에 메인화면을 보시면 #옆에 hexcode 색상코드표가 나와있는 부분이 보이시나요?
그 부분에서 조금만 밑으로 내려주세요.
색상이름표와 색상코드표가 색상별로 나오는데요. 유명한 html 색상코드표를 보셔도 되고, 보고 마음에 드는 곳을 선택해서 그 색상에 맞는 hexcode와 색상이름표 정보를 얻어오시면 됩니다.
정말 편하게 사이트가 만들어졌기 때문에, 색상 picker로 선택도 가능하고, 라이브러리에서 원하는 색상을 선택하셔도 됩니다.
참고할만한 글
ScreenToGif gif 만들기 화면 캡처 프로그램
ScreenToGif gif 만들기 화면 캡처 프로그램 ScreenToGif는 PC 화면 캡처 화면 녹화 후 Gif 만들기, 움짤 만들기를 할 수 있는 무료 프로그램입니다. 이 프로그램을 제가 자주 사용하는 이유는 화면 캡처
it.sohyun-ing.com
내 PC 돌보미 서비스 이용 방법
내 PC 돌보미 서비스 이용 방법 PC와 스마트폰 보안점검 목차 내 PC 돌보미 서비스 소개 내 PC 돌보미 서비스 신청 방법 내 PC 돌보미 서비스 공식 홈페이지 내 PC 돌보미 서비스 후기 내 PC 돌보미 서
it.sohyun-ing.com
PDF파일 합치기 사이트 소개
PDF파일 합치기 사이트 소개 목차 iLOVEpdf 사이트 소개 Smallpdf 사이트 소개 PDF파일 합치기 사이트를 찾고 계시나요? 사실 굉장히 많이 이용하게 되는 기능인 것 같습니다. 일반 pdf뷰어 프로그램에
it.sohyun-ing.com
녹스 앱플레이어 다운로드 사용법
녹스 앱플레이어 다운로드 사용방법 목차 녹스 앱플레이어 소개 녹스 앱플레이어 다운로드 녹스 앱플레이어 사용법 PC에 프로그램이 없어 모바일앱만으로 작업해야할 때, 모바일앱 게임을 PC
it.sohyun-ing.com
'IT사용서' 카테고리의 다른 글
크롬 다운로드 방법 총정리 (0) | 2022.03.05 |
---|---|
모바일 운전면허증 발급방법 및 pass앱 (0) | 2022.03.02 |
ScreenToGif gif 만들기 화면 캡처 프로그램 (0) | 2022.02.22 |
구글지도 로드뷰 (0) | 2022.02.14 |
큐넷 홈페이지 시험일정 (0) | 2022.02.14 |