CSS의 색상 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • CSS의 색상
    learn
    Practice
    learn
    09 CSS 기초
    CSS의 색상

    CSS에서 색과 관련된 값은 일반적으로 3가지 방법이 쓰입니다.

    • 키워드
    • hex code
    • rgb

    HTML 색상표 페이지에서(https://html-color-codes.info/Korean/) 여러 색상 값을 확인할 수 있습니다.


    키워드


    키워드는 색을 지정하는 가장 간단한 방법 중 하나입니다. 내부적으로 지정되어 있는 키워드를 쓰면 쉽게 색을 지정할 수 있습니다. 브라우저는 140가지 색상 이름을 지원합니다. 다른 표현 방식에 비해 수가 제한적입니다. 더 자세한 내용은 Color Name 링크를 참고하시기 바랍니다. 아래 코드를 실습창에서 작성해봅시다.


    RGB


    빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)를 혼합하여 색을 표현하는 방식입니다. RGB 값은 0 ~ 255의 값으로 나타냅니다.

    아래 코드를 실습창에서 작성하여 박스 색이 어떻게 변화하는지 살펴봅시다.


    HEX Code


    HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식입니다. 6자리 코드는 각각 2자리씩 빨간색, 녹색, 파란색에 대한 값을 표현합니다. 예를 들어 빨간색은 #FF0000, 보라색은 #800080으로 표현됩니다. 마찬가지로 아래 코드를 실습 창에 작성하여 박스 색 변화를 살펴봅시다.


    Alpha


    HEX code와 RGB에는 alpha라는 값이 존재합니다. 이는 우리가 흔히 아는 투명도 입니다.

    rgb는 rgba를 통해 alpha 값을 표현할 수 있고, hex code는 6자리에 2자리를 추가하여 alpha 값을 표현할 수 있습니다. rgba에서 alpha 값은 0~1사이의 숫자로 결정됩니다. 투명도 0% ~ 100%와 같습니다. 맨 마지막 0.5 숫자를 조정하여 투명도를 직접 확인해보세요.

    HEX Code에서 alpha 값은 00~FF사이의 16진수 숫자로 결정됩니다. 투명도 0% ~ 100%와 같습니다. 맨 마지막 7~8번째 숫자를 조정하여 투명도를 직접 확인해보세요.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)