프로그래밍 공부 노트

이미지의 경우 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변화한다 하더라도 이미지킈 크기 값은 바뀌지 않는다. 그래서 브라우저 화면의 크기가 줄어들면 이미지의 일부가 가려지는 현상이 발생한다. 이러한 문제점을 해결하기 위해서 CSS를 이용하거나 <img> 태그의 srcset 속성을 이용하여 문제를 해결할 수 있다. 그 외에도  <picture> 태그와 <source> 태그를 사용할 수 도 있다. CSS를 이용한 방법 이미지를 변경되는 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소 만큼 커지거나 작아지도록 하면되는데 이때 { max-width: 100%; height: auto; } 를 속성값으로 지정해 주면 된다. max-width 가 아닌 width 속성을 사용해도 된다. <img> 태그의 srcset 속성을 이용하는 방법 <img> 태그의 srcset 속성은 가각의 다른 환경에서 사용될 이미지 소스를 명시한다. css의 { max-width: 100%; height: auto; } 속성을 이용하더라도 모든 상황에서 사용할 수 있는것은 아니다. 고해상도의 이미지의 경우 크기가 줄더라도 파일의 용량은 크기 때문에 모바일에서 다운로드하는데 시간이 오래 걸릴 수 있다.  또한 텍스트가 포함된 이미지일 경우 모바일 화면에 맞게 줄여 표시하면 텍스트가 너무 작아져 내용을 알아보기 힘들어진다. 이때 <img> 태그의 srcset 속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 이미지 파일을 지정할 수 있다. < img srcset = "img1-320w.png 320w, img2-480w.png 480w, img3-800w.png 800w" sizes = "(max-width: 320px) 280px, (max-width: 480px) 440

img alt와 title 속성 역할 간단히 설명하면 여러가지 기능들이 있지만 검색엔진최적화(SEO)를 하기 위해서 사용된다. img의 alt속성은 이미지의 대체문구 역할을 한다. alt는 alternative 대안의 약자이다. 일반적인 웹사이트라면 alt속성이 일반 사람들에게 어떤역할을 하는지 잘 드러나지 않는다.  하지만 이러한 alt 속성은 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 사용되며  웹사이트에 사용된 이미지가 어떤 컨텐츠인지 명시함으로서 스크린 리더가 해당 사진이 무엇인지 장애인에게 내용을 잘 전달해준다. 또한 검색엔진에 사용되어 검색결과를 조금 더 정확하게 도와주며, 사진이 로딩되지 못하고 오류가 발생한 경우 대체 텍스트를 사용자에게 보여준다. 가끔가다보면 사진이 로딩되지 못하고 엑스박스가 뜨는 경우를 볼 수 있다. 이경우 해당 엑스박스 위치에 있는 사진이 무엇인지 alt 속성에 적어두면 사진 로딩오류가 발생하거나 했을 경우 엑스박스 옆에 alt에 적어둔 내용이 표시된다. 또한 컴퓨터가 점점 똑똑해지고 있지만 사람이 올린 이미지 모두를 컴퓨터가 어떤 사진인지 인식하기 어려울 수 있다. 이때 컴퓨터는 alt에 적힌 텍스트를 확인하고 검색시 사용자에게 좀 더 정확한 사진과 자료를 제공하는데 도움을 준다. img의 title속성은 간단하게 말해 이미지의 제목이다.  title 속성을 작성한뒤 이미지에 마우스를 올리면 해당 이미지에 대한 정보가 나타나는것을 볼 수 있다. 즉 title속성의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 조금 더 제공하기 위함이다.  결론적으로 alt 속성과 title 속성은 검색엔진최적화(SEO)에 영향을 미치므로 잘 적어주면 검색엔진 최적화에 도움이 된다. 두가지 속성을 잘 적어주면 이를 통해 얻을 수 있는 효과는 1. 검색유입의 증가 2. 웹사이트에 대한 높은 품질의 검색