[HTML] 이미지

웹 페이지에 이미지 넣기

- 이미지를 넣을 때는 img 태그를 사용한다.

- src : 원하는 이미지의 경로 (로컬 또는 외부)

- alt : 해당 이미지에 대한 설명 (웹 표준 필수 속성)

- width : 이미지의 너비 조절

- height : 이미지의 높이 조절

- alt 속성은 쓸모없어 보이지만 Screen Reader 프로그램들이 갖다 쓰는 속성이므로 채워놓아야 한다.

 

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA0MDhfMjc0%2FMDAxNjQ5MzYyMDA0NzM0.0uYmmztCnMXWVfmbNsokjAWSkAlV5G-jizD9Mf5upRwg.7V0_puDTur_OJJaXwAaWeP5Udg6irlBPgD42FCAOgwog.JPEG.yeonju8275%2F2c3d0dde541f08c7f46ee1340ddbbc6a.jpg&type=sc960_832" 
alt="마동석이 창문사이로 쳐다보고있는 사진"
width="300">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA4MThfMjM1%2FMDAxNjYwNzg3NDkyNDUw.EKrAKV3tcWzJ8I7M3SSkiihM79-TqxsvERlGzvkshXEg.a6tvrKtzFjFPc8vwYgHpdppsIOur5joMtnDq7Sr3uBsg.PNG.wonch888%2Fimage.png&type=sc960_832" 
alt="마동석이 활짝 웃고있는 사진"
width="300" height="600">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMjlfMTI5%2FMDAxNjExODg4MzAwMzQw.BJ9Eq7ZlfU_IPjvc5ubpm83zeVvNyHXap0oCpZ-qkpQg.ErqeORdJ9wG5adr0rWR9bw8pMqATMylAXIrTLHDSRDQg.JPEG.sopia3744%2F1611888226672.jpg&type=sc960_832" 
alt="마동석이 주먹을 휘두르는 사진"
height="600">
<!-- 이미지 경로가 틀리는 등의 문제가 있다면 alt 속성에 설정한 값이 나온다. -->
<img src="https://search.pstatic11.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAxMjlfMTI5%2FMDAxNjExODg4MzAwMzQw.BJ9Eq7ZlfU_IPjvc5ubpm83zeVvNyHXap0oCpZ-qkpQg.ErqeORdJ9wG5adr0rWR9bw8pMqATMylAXIrTLHDSRDQg.JPEG.sopia3744%2F1611888226672.jpg&type=sc960_832" 
alt="마동석이 주먹을 휘두르는 사진"
height="600">