알고리즘
오늘 푼것.
웹
속성 - color
16 진법 ex. #RGB
head에서는 h1 {color: 색상 값;}
body에서는 <h1 style="color: #ff0000"> heading </h1>
또한 color뿐 아니라 색상과 관련된 속성 대부분에 적용된다.
ex) <div style="background-color:rgb(255,0,0)"></div>
컬러 키워드 ex. black, red
CSS 자체에서 사용 가능한 문자 식별자입니다.
red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다.
> 참고 : transparent는 투명을 나타내는 키워드
16 진법 ex. #RRGGBB
6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있습니다.
예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있습니다.
RGB(0,0,0)
RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의합니다.
0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타냅니다.
RGBA(0,0,0,0)
RGBA 값은 기존 RGB에서 A값이 추가된 형태입니다.
rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의합니다.
A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기합니다.
0 → 1은 투명 → 불투명으로 값의 변화를 나타냅니다.
예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 됩니다.
속성 - background
background-color
기본 값 : transparent
배경의 색상을 지정하는 속성입니다.
앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다.
background-image
기본 값 : none
배경으로 사용할 이미지의 경로를 지정하는 속성입니다.
url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다.
만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면,
그 부분에 background-color 색상이 노출됩니다.
background-repeat
기본 값 : repeat
이미지의 반복 여부와 방향을 지정하는 속성입니다.
기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시됩니다.
background-repeat의 값으로 사용할 수 있는 것들은 다음과 같습니다.
< 속성 값 >
repeat
x, y축 으로 모두 반복합니다.
repeat-x
x 축 방향으로만 반복합니다.
repeat-y
y 축 방향으로만 반복합니다.
no-repeat
이미지를 반복하지 않습니다.
background-position
기본 값 : 0%
0% 요소에서 배경 이미지의 위치를 지정하는 속성입니다. x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다.
< 속성 값 >
%
기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다.
px
기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치시킵니다.
*여기서 기준은 이미지의 왼쪽 상단임.
키워드
top, left, right, bottom, center 키워드를 사용할 수 있습니다.
키워드는 선언 순서와 관계없이 top, bottom은 y축 기준으로 하며 left, right는 x축을 기준으로 합니다.
background-attachment
기본 값 : scroll
화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다.
< 속성 값 >
scroll
배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않습니다.
local
배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됩니다.
fixed
배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않습니다. (뷰포트 : 사용자가 시각적으로 볼 수 있는 웹페이지 영역을 의미합니다.)
예시>>>
height: 500px;
background-color: yellow;
background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
background-repeat: no-repeat;
background-position: center top;