이야기앱 세상

CSS 목록 스타일 이미지 처리 및 위치 이동하기 본문

IT/CSS

CSS 목록 스타일 이미지 처리 및 위치 이동하기

storya 2018. 12. 14. 16:01

목록 스타일 이미지 처리 및 위치 이동하기 


ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있다. 이미지의 위치와 글자의 위치를 조정해서 자연스럽게 맞추려면 목록 스타일 유형을 안 보이게 처리하고 백그라운드 이미지를 사용해서 조정하는 방법이 유용하다.


li{

    background: url(../images/bullet.gif) no-repeat 10px 5px;

    list-style-type: none;

    padding: 0px 0px 12px 24px;

}


반응형
Comments