CSS gradient & 웹디자인 웹싸이트

이번 시간에는 그레디언트에 대해서 정리해보자!!

그레디언트도 background-color 와 같이 배경을 채우는 기법이지만, 그레디언트는 단일 색이 아닌 여러색의 혼합과 다양한 패턴으로 채울 수 있는 스타일링이다.

먼저, 그레디언트를 사용하기 위해서는

" background-image: linear-gradient(); "

" background-image: radial-gradient(); "

중에서 하나를 선택해야 한다. 리니어는 말 그대로 선으로 된 패턴이고 레디얼은 원형으로 둥글둥글한 패턴이 나온다.

( ) 안에 넣을 수 있는 색의 갯수는 몇 개든지 상관 없다.

• 발생하는 문제점과 해결법

현재 body tag에 "background-image: linear-gradient(red, yellow);" 스타일링을 적용한 레이아웃이다. 그러나, 맨 밑에 알 수없는 빨간 색이 등장하는 것을 볼 수 있다.

이 것은 body 테그 범위가 끝나서 배경색이 반복되는 현상이다. 이 현상을 멈추게 하기 위해서,

background-repeat: no-repeat;

을 사용할 수 있겠지만, 그렇게 되면,

이런 식으로 배경색이 끊긴다. 작은 화면으로 본다면, 상황 없겠지만 크고 넓은 화면으로 보게 될 경우, 이 부분을 해결해줘야 한다.

이럴 때, 사용할 수 있는 해결법이

html {
    height: 100%;
} 

이다.

우리는 CSS에서 html이라는 태그를 사용해서 전체 파일을 스타일링 하는 게 가능하다.

그리고 왜 인지는 모르겠지만, 이렇게 하면, 이 문제가 해결된다고 교육 엔지니어님께서 가르쳐주셨다.

---

그레디언트에 대해서 더 자세하게 알고 싶다면...

• W3school 그레디언

쿨한 그레디언트 샘플링을 주는 웹싸이트,

• Grabient