CSS | 간단해서 잊어버리기 쉽지만 알면 유용한 CSS

1. 굵은 글자 굵기를 약하게 줄이고 싶을 때

 

font-weight: normal;

 

 

2. 줄간격 설정하고 싶을 때

 

line-height: 150%;

 

3. 원래 이미지의 크기를 유지하되 설정한 이미지 크기보다 화면의 크기가 작아질 때 (그림이 잘리지 않고) 자동적으로 작아지도록 하고 싶을 때

 

img{      max-width: 100%;  }

 

4. 메뉴를 고정시키면서 스크롤 가능하게 하고 싶을 때(스크롤 해도 가장 상위에 보이게 하고 싶을 때)

 

nav{      position: fixed;      z-index: 1;  }

 

5. 헤더의 배경화면을

     - img폴더에 있는 사진으로 지정하면서

     - 그림이 반복되지 않으면서

     - 화면 전체를 꽉 채우도록 하면서

     - 그림이 화면 위로 올라가도록 하고 싶을 때

 

header{     background-image: url('../img/background.png');     background-repeat: no-repeat;     background-size: cover;     background-position-y: -220px; }

 

     + 추가설명+ 다른 폴더 있는 파일을 사용하고 싶을 때 ../ 를 파일명 앞에 붙여주기

                   + 화면의 여백 없지만 이미지 원래의 사이즈를 늘리지 않으면서 최대한 크게하고 싶다면 사이즈를 cover                       로 설정해주기

                   + 배경 이미지가 위로 올라가게 하고 싶다면, 즉 이미지의 아래부분이 더 많이 보이도록하고 싶다면 y축                       상으로 화면이 이동하도록 설정해주기: 아래로 내려가는게 +라면, 위로 올라가는 건 -

 

 

6. 리스트에 임의로 생기는 점을 없애고 싶을때

 

ul li{     list-style: none; }

 

 

7. 마우스 커서를 올렸을 때 줄이 서서히 생기게 하고 싶다면

 

nav li a{       transition: none 1s ease-in-out;  }  nav li a:hover{       text-decoration: underline;  }

 

     + 추가설명+ hover부분이 아닌 부분에 transition 설정해주기

 

 

위의 숫자나 색깔, 이미지 등은 임의적인 것이므로 원하시는 대로 변경시켜서 사용하시면 됩니다!