목록CSS (11)
이야기앱 세상
글자색은 선명하고 배경색은 투명하게 처리하기 배경색은 투명하게 처리하려고 배경색에 opacity 속성을 사용하면 글자색도 투명도가 적용되어 흐려지는 현상이 일어난다. 이럴 경우 rgba를 이용해서 배경색에 투명도를 지정하면 글자색은 선명하고 배경색을 투명하게 처리할 수 있다. 가을
div 태그에서 수직으로 정렬하기 div 태그안의 내용을 수직으로 정렬할 때 vertical-align를 사용하는데 적용이 안 된다. 그럴 경우 아래와 같은 속성을 명시함으로써 해결할 수 있다. 1. display: table-cell (가로 중앙, 세로 중앙) div{width:500px;height: 100px;border:1px solid orange;text-align: center;vertical-align:middle;display: table-cell;} 하하 2. display:flex (가로 중앙, 세로 중앙) div{width:500px;height: 100px;border:1px solid orange;display:flex;align-items:center; /*세로 정렬*/just..
목록 스타일 이미지 처리 및 위치 이동하기 ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있다. 이미지의 위치와 글자의 위치를 조정해서 자연스럽게 맞추려면 목록 스타일 유형을 안 보이게 처리하고 백그라운드 이미지를 사용해서 조정하는 방법이 유용하다. li{ background: url(../images/bullet.gif) no-repeat 10px 5px; list-style-type: none; padding: 0px 0px 12px 24px;}