HTML, CSS(2)

📒 CSS

• HTML 은 웹사이트의 뼈대를 설정해주는 것, CSS는 그 뼈대를 치장, 즉 사용자들이 보기 좋게 꾸며준다고 생각하면 편하다.

📌 이미지 표현 방법

1. ( 의미 있는 이미지를 사용할 경우) img 태그로 표현한다. alt 태그로 대체 문자를 표현한다.
2. ( 의미 없는 이미지를 사용할 경우) background 속성으로 표현, 대체문자를 사용하지 않는다.
3. 요즘 웹사이트들은 이미지를 background-image 사용한다. 이미지 스프라이트 기법이라는 것을 사용하며 가상으로 대체로 문제를 만들어준다. -> 웹표준을 지켜야하기 때문 ( IR효과 사용 )

이미지 스프라이트 기법

• 한 이미지 안에 모든 사용할 모든 로고 이미지를 넣고 background-position 속성을 사용하여
  x축, y축의 값을 설정하여 원하는 이미지가 웹사이트에 출력될 수 있도록 하는 것이다. 웹 표준을 준수해야 하기 때문에 이미지 스프라이트로 넣은 이미지마다 IR 기법 효과를 넣어줘야 한다.

IR 기법 이란?

• Image Reaplacement/ 이미지의 대체 텍스트를 제공하기 위한 CSS 기법이다. 웹 표준을 준수하기 위하여 사용한다. 아래의 3가지 방법이 있다.

1. Phark Method
   의미 있는 이미지의 대체 텍스트를 제공하는 경우에 사용한다.

.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}

2. WA IR
   의미 있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용한다.

.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}

3. Screen Out
   대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 사용한다.

.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}