image,overflow : hidden

img 같은 경우 부모의 width 사이즈가 얼마던 간에 width를 무시를한다. (자기 본디 사이즈를 찾아가는 성격)

그래서 width : 100% 주자. (부모의 width 100%를 따라가겠다)
display : inline 임에도 불구하고 width, height 주는 것 이 가능하다.

if) 부모의 width 300 height 200
 img 본디 사이즈가 400 400 이라고 가정하고 width 100% , height auto 라면 아래의 사진 처럼 된다.

이럴 경우 부모의 요소에 overflow : hidden 을 사용하자 
자식의 요소가 넘쳐나면 그 요소는 자른다.

img 태그를 사용 할 경우 반드시 src ="" alt ="" 속성을 반드시 추가하자
alt 에트리뷰트는 설정한 이미지가 나오지 않았을 경우를 대비해서 그때 나타나는 텍스트이다.

위와 같은 이미지를 추가했다 가정 하였을 경우, alt 를 무엇으로 해야 할지 이름이 딱히 생각나지 않는다.
그럴 경우 alt 를 적지 않는 것이 아니라  아래 사진과 같이 반드시 alt 를 비워놓자.

alt=""

 

이미지가 정보컨텐츠로써 사용 할 필요가 없다고 느꼈다면?

css로 이미지를 처리하자

브라우저가 렌더를 하지 못하게 주석을 처리 하였다.

이미지를 css로 처리하는 방법이있다.

정보컨텐츠로써 필요가 없다고 판단

---

데탑 이미지 width 425px 일 경우 ,

창을 줄이는 과정에서 width가 425px 일 경우 너무 큰 경우라서 width 100% 으로 설정.