HTML, CSS 기존코드 개선하기 2 - IR 적용

날짜 : 2018. 01. 22.(월)

HTML, CSS 기존코드 개선하기 2

부제 : IR 적용하기

적용전 코드구조

<div>
    <span></span> <!-- 엘리먼트 안에 이미지 background 삽입  -->
</div>

적용후 코드구조

<div>
    <span></span> <!-- 엘리먼트 안에 이미지 background 삽입  -->
    <span>테스트 이미지</span>
</div>

방법1. 글자위에 이미지 덧 씌우기

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를 이용하여 글자 숨기기

1. 이미지의 x 혹은 y축 만큼 padding을 이용하여 밀어낸다.
2. x 혹은 y축에 따라 width, height를 0을 준다.
3. 범위를 벗어난 값을 숨기기 위해 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;
}

참고사이트

• CSS Zen Garden