클로스트 이야기

[CSS] linear-gradient() 사용하기 본문

개발이야기/Css

[CSS] linear-gradient() 사용하기

클로스트 2022. 8. 9. 20:09

linear-gradient() 는 지정된 태그에 배경을 그라데이션 하는 용도로 사용합니다.

모던 CSS 에서 아주 중요한 요소라고 할 수 있는데요.

그이유는 홈페이지나 특정 페이지에서 백그라운드 이미지를 자주 쓰는데, 여기에 더해 

linear-gradient() 까지 함께 사용해주면 멋진 그림이 나오기 때문이죠. 

가장 심플한 예제로 보여 드리겠습니다.

간단하게 html을 마크업합니다. 

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    
    <title>linear-gradient | CSS</title>
  </head>
  <body>
    <header class="header">
      여긴헤더
    </header>
    <main>
      여긴메인
    </main>
  </body>
</html>

위와 같이 마크업하고 css를 코딩해줍니다.

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  height: 95vh;
  background-image: linear-gradient(
    to right bottom, 
    rgb(226, 108, 108, 0.5), 
    rgb(121, 34, 34, 0.5)), 
  url(../img/sea.jpg);
  background-size: cover;
  background-position: top;
}

위와 같이 작성합니다.

간단한 reset 코드와 헤더에 백그라운드에 대한 속성을 나열하고 작성합니다.

그리고 띄워보면.

위와 같이 뜨게됩니다

여기서 불투명도를 조절하거나 색상을 변경하거나,

그라데이션 각도를 변경하거나 해서 자연스럽게 수정하시면됩니다.

간단하게 불투명도를 조절해 보겠습니다.

.header {
  height: 95vh;
  background-image: linear-gradient(
    to right bottom, 
    rgb(226, 108, 108, 0.7), 
    rgb(121, 34, 34, 0.8)), 
  url(../img/sea.jpg);
  background-size: cover;
  background-position: top;
}

위와 같이 불투명도를 조절하고 다시 띄워보면

위와같이 됩니다.

이렇게 linear-gradient()를 사용해 보세요. ^-^

더많은 기능과 자세한 설명은 아래 링크에서 확인 하실 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

 

'개발이야기 > Css' 카테고리의 다른 글

[Css] 유용한 css 프레임워크 소개 (Bulma)  (0) 2023.01.23
'개발이야기/Css' Related Articles more
Comments