[CSS]이미지 위에 글자 올리기

position의 absolute와 relative를 알면 쉽게 할 수 있다.

http://www.w3schools.com/Css/pr_class_position.asp

absolute는 자신을 감싸고 있는 엘리먼트를 기준으로 자리를 잡는 것이고, relative는 가장 근접해 있는 엘리먼트를 기준으로 자리를 잡게 된다.


겹칠글자

이런 구조로 HTML을 잡았다고치자. 나름 깔끔한 구조라고 생각한다. writer_box라는 영역에 글쓴이의 아바타를 이미지로 보여주고 그 이미지 위에 태그로 감싼 이름을 올리고 싶다.

그럼 img와 span이 div를 기준으로 자리를 잡도록.. 즉 absolute로 만들어 버리면 그 둘은 겹쳐지게 된다.

#writer_box img, #writer_box span {
position: absolute;
}

그런데 아마도 이렇게 하면 span으로 감싼 글자가 이미지 위쪽에 겹쳐있을 것이다. 이때는 바닥을 기준으로 위치를 잡도록 span에다가 bottom: 0px; 을 추가할 수 있다.

그리고 img와 span을 감싸고 있는 div의 크기를 정해주는게 좋겠다. 어떨땐 짜부되서 이미지와 span을 알아볼 수 없을 때도 있으니 height 값을 설정해주면 되겠다.

흠냐.. 예전부터 해보고 싶었는데.. 이제사 해보네;


Leave a Reply

Your email address will not be published. Required fields are marked *