여러가지 Tips

그라데이션 텍스트 만들기

배경에 linear-gradient로 그라데이션을 주고

webkit을 사용해 글자를 파낸다.

background: linear-gradient(90deg, #6f019c 0%, #c6017e 135.12%);
-webkit-background-clip: -webkit-text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

 

배경이미지 설정

background-image: url(http://...);
background-size: cover;
background-repeat: no-repeat;
background-position: center;

/* 단축버전 */
background: #000 url() no-repeat center

 

figure는 언제 쓸까

이미지, 이미지에 대한 설명을 보여줄 때 쓸 수 있다.

<figure class="card">
  <img src="" alt="" />
  <figcaption></figcaption>
</figure>

 

여백 없애기

display는 inline을 디폴트로 가지고 있어서 틈이 생긴다.

이럴때 display: block으로 틈을 없앨 수 있다.

• display: inline-block
• 상위에 font-size: 0px
• <div class= ... ><div>~</div></div> 이런식으로 띄어쓰기나 들여쓰기, 줄바꿈 없이 붙여쓰기

 

부분적 border-radius

border-radius: 15px 15px 0px 0px;

calc()

 

스크롤바 숨기기

.city {
  -ms-overflow-style: none; /* ie */
  scrollbar-width: none; /* firefox */
}

/* chrome */
.city::-webkit-scrollbar {
  display: none;
}