step02. img
(...전략)
<title>Step02_img.html</title>
<style>
#one{
width: 200px;
}
</style>
</head>
<body>
<!--
하나
둘
셋
이 사이사이에 '\'가 존재함
근데 이걸 보통은 무시함
=> <br> element가 필요
-->
<h1>이미지입니다.</h1>
<!--
img element의 src value로는 loading할 image의 path
alt의 value로는 image에 대한 자세한 정보를 적는다.
-->
<img src="images/kim1.png"
alt="김구라가 왼손에는 확성기를 들고, 오른손에는 책을 들고 있는 이미지">
<br>
<img id="one" src="images/1.jpg"
alt="한효주씨가 웃으며 카메라를 들고 올려다보며 촬영하는 사진">
</body>
</html>web browser에 이미지 표시하기
- <img> 도 '단독 요소'.
- img를 작성하고 tab을 치면 src와 alt 요소가 등장한다. src에는 이미지의 경로를 작성한다.
- alt는 alternative. 즉, 대체하는 요소이다. 이것이 왜 필요할까? 그것은 시각장애인의 사용 접근성 때문이다. 시각 장애인의 경우, 인터넷을 사용하면서 웹사이트를 눈으로 확인할 수 없다. 때문에 그림을 확인할 수 없어서 시각 장애인은 웹사이트에서의 사진에 대한 정보를 alt에 해당하는 설명으로 대신 얻게 된다. 따라서 alt에 들어가는 이미지 설명에 대한 정보는 조심스러워야 한다. 공부할 때는 생략하지만 실제로 front-end를 주력으로 한다면 web 접근성에 대한 공부를 많이 해야한다.
- 이미지를 그냥 나열하게 되면 좌우로 출력된다. 위아래로 출력하고자 한다면 <br> 요소가 필요하다.
- 만약 이미지의 경로가 맞지 않으면 이미지가 출력되지 않고, alt의 내용이 대신 표시된다.
- 이미지의 크기를 바꾸려고 한다면 css를 이용한다. width는 너비, height는 높이. 단위는 pixel(px).
- 이미지 일괄 조정이 아니라 특정 이미지를 바꾸고 싶다면 img에 id를 부여한다.
그래서 <style> 안에 img 대신 one을 적는다면 <one>을 찾는 것이기 때문에 #one이라고 표기한다.
'뒷북 정리 (국비 교육) > html' 카테고리의 다른 글
| [html] step08. table (0) | 2021.12.07 |
|---|---|
| [html] step05~07. ul / ol / dl (0) | 2021.12.07 |
| [html] step03~04. block / inline element (0) | 2021.12.07 |
| [html] step01. hello (0) | 2021.12.07 |
| [start] front-end와 back-end란? (0) | 2021.12.07 |
댓글