반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (229)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (23)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 언어
  • 전공요약
  • Next.js #graphql #tailwind.css
  • 티스토리챌린지
  • 전공 요약 #네트워크
  • 나의 해방일지
  • GraphQL
  • nextjs
  • 기계식키보드 #nuphy
  • 면접
  • 공간복잡도
  • A형
  • 삼성SDS
  • 백준
  • 삼성SW역량테스트
  • C++
  • 전공 요약 #운영체제
  • 알고리즘
  • 전공 요약 #데이터베이스
  • 오블완

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

CSS - 텍스트 스타일
프론트엔드 개발/HTML CSS

CSS - 텍스트 스타일

2021. 9. 3. 12:17
728x90
반응형

color 속성 : 글자색 지정


color: 색상

색상은 6자리의 16진수, rgb, rgba, hsl, hsla, 색상이름(black,green,orange...) 기입 가능

VS code에서 아주 친절하게 색깔을 보여준다.

자동완성에서 6자리의 16진수까지 보여준다.

 

색상 표현법

  1. 6자리의 16진수
    표기법 : #RRGGBB
    ※ 만약 RR, GG, BB가 각각 같은 숫자면 #RGB 로 축약가능

  2. hsl, hsla (hue(색상), saturation(채도), lightness(명도))
    표기법 : hsl(0, 100% 50%)
    - 색상 : 무지개색을 시계방향으로 동그란원을 만들었을때의 각도 (red : 0도, cyan: 180도)
    - 채도(%) : 회색이 0%, 원래색은 100%
    - 명도(%) : 어두움 0%, 원래색 50%, 흰색 100%

  3. rgb, rgba (red, green, blue, alpha(불투명도))
    표기법 : rgb(0, 0, 255), rgba(0, 0, 255, 1)
    ※ 불투명도는 0~1의 값. 0은 완전 투명상태

  4. 영문 표기
    표기법 : red, blue, yellow 등...

 

 

Color Tool 사이트


원하는 색상을 선택하면 UI에 바로 입혀서 결과물을 확인해볼 수 있는 유용한 사이트다. 

 

 

Color Tool - Material Design

Create and share color palettes for your UI, and measure the accessibility of any color combination.

material.io

반응형
저작자표시 비영리 동일조건

'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글

CSS - Flexbox, Grid 연습 사이트  (0) 2021.09.07
CSS - Flexbox (플렉스 박스)  (0) 2021.09.06
CSS 폰트 적용 방법  (0) 2021.09.03
CSS - Cacading Style Sheet, Selector(선택자)  (0) 2021.09.03
CSS - html 파일에 css 적용시키는 방법  (0) 2021.09.02
    '프론트엔드 개발/HTML CSS' 카테고리의 다른 글
    • CSS - Flexbox, Grid 연습 사이트
    • CSS - Flexbox (플렉스 박스)
    • CSS 폰트 적용 방법
    • CSS - Cacading Style Sheet, Selector(선택자)
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바