[css] 배경색 반반 무많이

안녕하세요. 플입니다.

오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요.

 

---

 1.  크기 정하기

이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요?

심지어 내가 만든 시안이 아닐 때는 더욱더 난감하겠죠.

 

css3가 된 뒤로는 코딩으로도 만들 수 있으니 배경을 나눠봅시다!

 

.visual{ height:1000px; border:1px solid red; }

먼저 배경이 들어갈 영역의 크기를 정해주세요. 저는 한 1000px 정도 줬고요.

테두리는 아래가 흰색이라 잘 보이라고 넣어줬습니다. 테두리는 없어도 괜찮아요.

 

---

 2.  linear-gradients

.visual{ background: linear-gradient( #fff5bf 80%, #fff 10%  ); }

background: linear-gradient( 색 색상영역, 색 색상영역 );

 

background에서 linear-gradient를 이용해서 색을 넣어줘요. linear-gradient는 그러데이션을 넣을 수 있는 코드인데

이렇게 퍼센트를 정확히 지정해주면 색을 나눠줄 수 있어요. 그러데이션으로 활용하고 싶다면 퍼센트를 빼면 됩니다.

 

위아래로 다른 색 넣기 어렵지 않죠?

 

 

---

 3.  방향 바꾸기

만약 위아래가 아닌 좌우로 색을 나누고 싶다면 어떻게 해야 할까요?

 

.visual{ background: linear-gradient( 90deg, #fff5bf 80%, #fff 10%  ); }

앞에 각도를 추가해주면 됩니다. 

deg는 degrees의 약자로 90도라는 의미예요. 각도를 변경해주면 각도에 따라 방향이 바뀝니다.

 

---

그럼 이만.

총총.