이번 시간에는 그레디언트에 대해서 정리해보자!!
그레디언트도 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이라는 태그를 사용해서 전체 파일을 스타일링 하는 게 가능하다.
그리고 왜 인지는 모르겠지만, 이렇게 하면, 이 문제가 해결된다고 교육 엔지니어님께서 가르쳐주셨다.
그레디언트에 대해서 더 자세하게 알고 싶다면...
쿨한 그레디언트 샘플링을 주는 웹싸이트,
좋은 길로만 가는 "조은길"입니다😁