smarti,스마트아이

CSS 색, 링크

CSS 색 (Color)

CSS에서 색을 표현하는 방법에는 다음과 같이 세가지 방법이 있다.

1. 색상 이름으로 표현

2. RGB 색상값으로 표현

3. 16진수 색상값으로 표현

색상 이름으로 표현

W3C에서 정의한 16개의 html4 표준 색상 이름은 다음과 같다. 색상 이름은 대소문자를 구분하지 않는다.

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

.blue { color: blue; }
.green { color: green; }
.silver { color: silver; }

RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다.
따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다.

RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가진다.

.blue { color: rgb(0,0,255); }
.green { color: rgb(0,128,0); }
.silver { color: rgb(192,192,192); }

16진수 색상값으로 표현

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가진다.

예를 들면, 녹색을 나타내는 RGB 색상값 rgb(0,255,0)은 16진수 색상값으로는 #00FF00이 된다.

.blue { color: #0000FF; }
.green { color: #008000; }
.silver { color: #C0C0C0; }

CSS3 색

CSS3에서 새롭게 추가된 색 표현 방법은 다음과 같다.

1. RGBA 색상값으로 표현

2. HSL 색상값으로 표현

3. HSLA 색상값으로 표현

4. opacity 속성

CSS3에서 추가된 색상값 및 opacity 속성 지원 버전

CSS3에서 추가된 색상값 및 opacity 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

속성	ie	chrome	firefox	safari	opera
RGBA 색상값, HSL 색상값, HSLA 색상값	9.0	4.0	3.0	3.1	10.1
opacity	9.0	4.0	2.0	3.1	10.1

RGBA 색상값으로 표현

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값이다.

알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널이다. 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

#header_01 {background-color: rgba(0,255,0,0);}
#header_02 {background-color: rgba(0,255,0,0.2);}
#header_03 {background-color: rgba(0,255,0,0.4);}
#header_04 {background-color: rgba(0,255,0,0.6);}
#header_05 {background-color: rgba(0,255,0,0.8);}
#header_06 {background-color: rgba(0,255,0,1);}

HSL 색상값으로 표현

HSL 색상값은 빛의 삼원색으로 색을 표현하는 RGB 색상값과는 달리 색상, 채도, 명도를 사용해서 색을 표현한다.
HSL 색상값에서 HSL은 각각 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미한다.

색상은 0부터 360 사이의 값을 가지며, 색상환(color wheel)의 각도를 나타낸다.
색상 값이 0 또는 360이면 빨간색(red)이 되며, 120이면 녹색(green), 240이면 파란색(blue)이 된다.

#header_01 {background-color: hsl(0, 0%, 50%);}
#header_02 {background-color: hsl(0, 20%, 50%);}
#header_03 {background-color: hsl(0, 40%, 50%);}
#header_04 {background-color: hsl(0, 60%, 50%);}
#header_05 {background-color: hsl(0, 80%, 50%);}
#header_06 {background-color: hsl(0, 100%, 50%);}

명도는 0%부터 100% 사이의 값을 가지며, 색상의 밝고 어두운 정도를 나타낸다.
명도 값이 0%면 검정색이 되고, 50%면 원래 색상, 100%면 흰색이 된다.

#header_01 {background-color: hsl(0, 100%, 0%);}
#header_02 {background-color: hsl(0, 100%, 20%);}
#header_03 {background-color: hsl(0, 100%, 40%);}
#header_04 {background-color: hsl(0, 100%, 50%);}
#header_05 {background-color: hsl(0, 100%, 60%);}
#header_06 {background-color: hsl(0, 100%, 80%);}
#header_07 {background-color: hsl(0, 100%, 100%);}

HSLA 색상값으로 표현

HSLA 색상값은 HSL 색상값에 알파 채널 값을 더한 색상값이다.

#header_01 {background-color: hsla(0, 100%, 50%, 0);}
#header_02 {background-color: hsla(0, 100%, 50%, 0.2);}
#header_03 {background-color: hsla(0, 100%, 50%, 0.4);}
#header_04 {background-color: hsla(0, 100%, 50%, 0.6);}
#header_05 {background-color: hsla(0, 100%, 50%, 0.8);}
#header_06 {background-color: hsla(0, 100%, 50%, 1);}

opacity 속성

opacity 속성은 색상에 대한 투명도를 설정해 준다. opacity 속성값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가진다.

#header_01 {background-color: rgb(0,255,0); opacity:0}
#header_02 {background-color: rgb(0,255,0); opacity:0.2}
#header_03 {background-color: rgb(0,255,0); opacity:0.4}
#header_04 {background-color: rgb(0,255,0); opacity:0.6}
#header_05 {background-color: rgb(0,255,0); opacity:0.8}
#header_06 {background-color: rgb(0,255,0); opacity:1}

◆ opacity 속성과 알파 채널의 차이점

위에서 살펴본 opacity 속성과 알파 채널 모두 투명도를 조절한다는 공통점을 가지고 있다.

opacity 속성은 투명도를 설정했을 때 설정한 요소의 모든 자식(child) 요소까지 전부 같은 투명도로 설정한다.
하지만 알파 채널은 투명도를 설정한 요소에만 투명도를 설정하는 차이점이 존재한다.

다음 예제는 opacity 속성과 알파 채널과의 차이점을 보여주는 예제이다.

#para_01 {background-color: rgb(255,0,0); opacity:0}
#para_06 {background-color: rgb(255,0,0); opacity:1}
#para_07 {background-color: rgba(255,0,0,0);}
#para_12 {background-color: rgba(255,0,0,1);}

CSS 링크 (link)

CSS를 사용하면 링크에 다양한 효과를 설정할 수 있다.

링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있다.
또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있다.

a {
    background-color: #FFFFE0;
    color: darkslategray;
    font-size: 1.3em;
    text-decoration: none;
}

링크(link)의 상태

링크는 총 5가지의 상태를 가지며, 각 상태마다 다른 스타일을 적용할 수 있다. - link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태이다.
 - visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태이다.
 - hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태이다.
 - active : 사용자가 마우스로 링크를 클릭하고 있는 상태이다.
 - focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태이다.

a:link { color: olive; }
a:visited { color: brown; }
a:hover { color: coral; }
a:active { color: khaki; }

링크를 활용한 버튼 (Button)

CSS를 이용하면 간단하게 링크를 버튼처럼 만들 수 있다.

a:link, a:visited {
    background-color: #FFA500;
    color: maroon;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active { background-color: #FF4500; }

 

 

[세상살이] - 입동, 겨울 배경 이미지 무료 다운로드 받기

입동, 겨울 배경 이미지 무료 다운로드 받기

[세상살이] - 2020 삼성화재배 월드 바둑 마스터스 결승 2국 결과

2020 삼성화재배 월드 바둑 마스터스 결승 2국 결과

[세상살이] - 색으로 대표되는 컬러푸드 - Black (블랙푸드)

색으로 대표되는 컬러푸드 - Black (블랙푸드)

[코딩공부] - HTML5 멀티미디어

HTML5 멀티미디어

[디자인공부] - 포토샵으로 야구공 같은 문자 만들기

포토샵으로 야구공 같은 문자 만들기