프로그래밍 공부 일기

2020년 7월 2일 Progate Lv.148
포트폴리오 작성 중
배경에서 2색 사용법을 조사했지만, 이 방법을 사용하여 그라데이션도 가능하다.

목표물

아래와 같이 배경색을 2색 사용하고 싶다.

코드

CSS의 backgrouund 속성에 linear-gradient를 지정하면됩니다. 이 방법을 사용하면 그라데이션도 만들 수 있습니다.background:linear-gradient(色を変える方向,色　位置,色　位置,...); 로 지정한다.

색상을 변경하는 방향은 다음 키워드 또는 각도를 지정합니다.


키워드
각도
그라데이션 방향


to top
0deg
아래에서 위

to right
90deg
왼쪽에서 오른쪽

to bottom
180deg
위에서 아래

to left
270deg
오른쪽에서 왼쪽

/* 左から50％まで青、右から50％まで赤 */
background:linear-gradient(to right,blue 0%,blue 50%,red 50%,red 100%);

/* 青から赤のグラデーション */
background:linear-gradient(to right, blue 0%, red 100%);

위치는 "첫 번째 색"에서 "다음 색"의 그라데이션 백분율을 나타냅니다.
위의 예에서 첫 번째 예에서는 0%에서 50%까지는 파란색에서 파란색 그라데이션(=계속 파랑)을, 50%에서 100%까지는 빨간색에서 빨간색 그라데이션(=계속 빨간색)을 나타내고 있다.
그래서 두 번째 예에서는 0~100%까지 파란색에서 빨간색 그라데이션을 나타내고 있다.

각도를 바꾸면 아래와 같이 대각선으로 색을 구분할 수도 있다.

background: linear-gradient(45deg, blue 0%, blue 50%, red 50%, red 100%);

샘플 코드

목표물이 되도록 하기 위해서는 이하의 코드를 이용했다.

CSS 파일

.skill{
background:linear-gradient(to right,rgb(227, 246, 245) 0%,rgb(227, 246, 245) 60%,rgb(255, 246, 199) 60%,rgb(255, 246, 199) 100%);
}