[Html5+CSS3]CSS 세로정렬방법, Image Replacement(IR), Image sprite(IS)

세로정렬 방법

1. 정렬한 오브젝의 스타일을 position:absolute; top:50%; left:50%; margin-left:정렬할 오브젝의 가로길이의 반; margin-top:정렬할 오브젝의 세로길이의 반;
2. 부모의 position값을 relative로 하고, 정렬시킬 오브젝의 position값을 absolute로 먹인 후에, 1번 방법을 겸용한다.
3. vertical-align:middle; -> display 값이 table-cell 일 경우에만 먹는다

 

[CSS]display 속성 이해하기

http://iyakiggun.blog.me/100162787755

 

[CSS]float 속성 이해하기

http://iyakiggun.blog.me/100165916259

 

[CSS]position 속성 이해하기

http://iyakiggun.blog.me/100171396062

 

 

 

 

Image 대체기법 - IR기법, IS기법

Image Replacement

• "의미가 포함되어 있는 이미지"를 배경으로 처리하고 전경에 상응하는 텍스트를 넣는 방법.
• "접근성을 떨어트리지 않고" 검색엔진으로부터 높은 가중치를 받을 수 있다.
• 의미가 포함된 이미지는 전경으로 처리한다는 원칙!
• ex) text-indent:-9999px; 또는 text-indent:100%; white-space:nowrap; overflow:hidden;(후자가 더 효율적)

Image Sprite

• 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법
• 의미가 있는 이미지는 전경에 상응하는 텍스트를 포함시켜서 접근성을 확보해야 하기 때문에 IR(Image Replacement)기법을 함께 사용해야 함.

• x) background-position