HTML Css를 이용해서 이미지 넣기 , 아이콘 넣기 background-image

///이미지 사용하기


1.img tag (html)
    이미지 -> 컨텐츠(정보)

    갤러리 -> 사진
    배너 -> 사진
    슬라이드 -> 사진


2.background-image (css)
    이미지 -> 디자인요소 

    아이콘, 로고 , 심볼

// head요소안에서 css파일 연결하기

<link rel="" href="">
rel = relationship (관계설정)
href = 대상지정

//브라우저에서 이미지적용시 (글자로 취급)
이미지 하단에 디센더 생성 ( Desender )
이미지 하단에 패딩이 생김

    -> 이미지를 block으로 바꾸기

    -> vertical-align을 수정하기 

        vertical

//이미지 크기 수정시
    w,h 가능 (비율도 수정할 수 있음)

    w만 적용시 비율을 유지한 상태로 h가 자동 수정됨


비트맵

gif ---------------- 최근에는 사용안하는 추세
    색상수 최대 256
    애니메이션 저장 (움짤)

jpeg(jpg)
    일반사진용(압축 포맷)

png 
    무압축 포맷
    배경투명 저장

벡터

svg
    아이콘

///인라인 안에 블럭을 넣지 않는다

///IR기법 (Image Replacement)

HTML -> 텍스트 정보 제공
CSS -> 이미지 제공 (텍스트 show, hide 선택)

웹 접근성

시작장애인 -> 그림 못봄. (텍스트 요소 정보 전달)

IR text + image
    image (text는 숨겨야 함)



1) text-indent : -9999px;
    (성능이슈 문제로 사용을 권장x)

2) color: transparent;
    (글자 색상값을 투명처리) - 실제로는 존재함

3) z-index:-1 (브라우저 배경뒤로 숨기기) (포지션속성 필수)

4) width:0; height:0; overflow:hidden; 

5) font-size:0; line-height:0; overflow:hidden;

6) display : none;

4,5,6 번은 속석이 0이 되면 스크린리더프로그램이 낭독X

IR기법시 글자감추기 (현재 가장 많이 사용하는 방법)

position:absolute;
width:1px;
height:1px;
overflow:hidden;
margin:-1px;
clip-path:polygon(0 0,0 0,0 0)  //레이어마스크
                첫번째꼭짓점, 두번째, 3번째
                삼각형을 만들려면
                (0 0, 50 100, 100 0)

//배경이미지 크기 설정하기

1. px

    background-size:x y;
    x만 입력하는 경우 y는 자동계산
    이미지의 크기를 직접 지정

2. %

    %는 부모박스의 크기를 기준으로 계산
    background-size:x y;



3. 예약어 (cover, container)

    background-size: cover; //이미지의 y크기가 박스의 높이에 맞춤 (높이에 맞춰줌)
    background-size: contain; //이미지의 x크기가 박스의 가로크기에 맞춤 (가로크기에 맞춰줌)

    
///////////// before,after (가상요소)

    사용법

    선택자 ::before
        박스안의 컨텐츠의 제일 앞쪽을 선택

    선택자 ::after
        박스안의 컨텐츠의 제일 뒤쪽을 선택


    content:"문자" 속성을 이용하여 문자등을 입력

    ===> 선택후 컨텐츠 생성시 ---> 인라인 요소

    content:'' : 아무것도 입력안함 : 인라인박스만 생성됨.
        <span></span> -> 똑같은 효과