날짜 : 2018. 01. 22.(월)
HTML, CSS 기존코드 개선하기 2
적용전 코드구조
<div>
<span></span> <!-- 엘리먼트 안에 이미지 background 삽입 -->
</div>
적용후 코드구조
<div>
<span></span> <!-- 엘리먼트 안에 이미지 background 삽입 -->
<span>테스트 이미지</span>
</div>
방법1. 글자위에 이미지 덧 씌우기
- 첫번째 span에 absolute를 적용하여 글자를 숨겨버림
div { position: relative; }
span:nth-of-type(1) {
position: absolute;
width: 100px;
height: 100px;
background: url('./이미지.jpg') no-repeat;
}
span:nth-of-type(2) {
<!-- 이미지가 작은 경우 글자를 중앙 정렬을 하여 숨김 -->
line-height: 100px;
text-align: center;
}
방법2. oveflow를 이용하여 글자 숨기기
- 이미지의 x 혹은 y축 만큼 padding을 이용하여 밀어낸다.
- x 혹은 y축에 따라 width, height를 0을 준다.
- 범위를 벗어난 값을 숨기기 위해 overflow:hidden을 적용한다.
div { }
span:nth-of-type(1) {
}
span:nth-of-type(2) {
width: 100px;
height: 0;
background: url('./이미지.jpg') no-repeat;
padding-top: 100px;
overflow: hidden;
}
참고사이트