이미지 넣기 | HTML & CSS 시리즈 009

웹 만들때는 이미지를 삽입은 정말 빼놓을 수 없는 부분인 것 같다.

잘못코드를 작성하여 위와 같은 사진을 보게 될때! 아래의 방법을 다시한번 체크해보자!

 

이미지 삽입 어떻게 하는건데~~~?

 

 

<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone11-select-2019-family?wid=882&hei=1058&fmt=jpeg&qlt=80&.v=1567022175704">

위 와 같은 코드 작성시 웹사이트내에 있는 사진의 주소를 복사해서 삽입이 가능하다!

물론 이렇게 감당 되지 않는 사이즈가 출력 될 것이다.

 

 

그렇다면 사이즈를 설정해주면 된다.

 

	<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/
    is/iphone11-select-2019-family?wid=882&hei=1058&fmt=jpeg&qlt=80&.v=1567022175704" width="300px">

width = "300px" 를 입력시 가로가 300픽셀로 설정되며 세로 길이는 그에 맞게 자동으로 설정되어서 아래와 같이 출력이 된다.

 

그럼 이렇게 작아진다!

 

 

그렇다면 웹페이지가 아닌 컴퓨터내에 저장되어있는 사진파일을 출력할때는 어떻게 하는지 알아보자

 

 

 

---

 

 

컴퓨터내에 저장된 사진 파일 삽입하기!

 

<img src="images/couchcoding.png" width="300">

 

컴퓨터내에 저장된 사진 파일경로는 위와 같다.

동일한 위치의 폴더위치이므로

images/ 로 이미지가 들어있는 폴더로 접속한다.

그후 사진파일이름.형식  입력한다.