냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 플입니다.

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

     


     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도라는 의미예요. 각도를 변경해주면 각도에 따라 방향이 바뀝니다.

     


    그럼 이만.

    총총.

    반응형

    'coding > html + css' 카테고리의 다른 글

    [css] linear-gradient 반반무많이 2탄  (7) 2020.04.20
    [css] 눈누 웹폰트 적용하기  (0) 2020.04.16
    [html] figure 활용하기  (0) 2020.03.27
    [css] 최우선 적용  (0) 2020.02.13
    [html] id / class 구분  (0) 2020.02.12
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바