오늘은 html css에서 이미지, 오디오, 비디오를 어떻게 넣는지 알아보겠습니다. 마찬가지로 제가 학습한 내용의 복습겸 공유 입니다.
먼저 이미지를 넣을 때는 img 태그를 사용합니다. 또한 img 태그의 속성 중 하나인 src (source)를 이용하여 특정 이미지를 정할 수 있습니다. src에는 이미지의 웹링크가 들어가도 되며, 같은 폴더내의 이미지 이름으로 가능합니다.
또한 오늘은 아래와 같은 속성들을 배워 볼 것입니다.
- width: 이미지의 너비 사이즈를 정한다
- height: 이미지의 높이 사이즈를 정한다
- alt: 이미지가 표현되지 않았을 시 대체 문구를 정한다.
먼저 img src를 이용하여 이미지를 하나 불러오겠습니다.
<body>
<img src = "naver.jpg">
</body>
위와 같이 코드를 작성한 후, 크롬에서 실행을 해보면 아래와 같이 이미지가 잘 나오는 것을 볼 수 있습니다.
width, height 속성을 이용하여 이미지의 크기도 조절이 가능합니다. 물론 추후 css 스타일로 변경하는 것이 편하긴 합니다.
<body>
<img src = "naver.jpg" width = "320" height = "480" >
</body>이렇게 작성을 하면 이미지 크기가 가로 320, 세로 480 고정이 됩니다. 아래와 같이 아까보다는 큰 이미지가 나오게 됩니다
또한 alt 속성 (alternative 속성) 을 이용하여 이미지가 보이지 않을 때 대체할 수 있는 문구를 작성 할 수 있습니다.
<body>
<img src = "nav.jpg" alt = "이미지가 안보여요" >
</body>
위와 같이 작성을 한 후 크롬을 실행해보면, 이미지의 이름이 naver가 아닌 nav가 되었기 때문에 찾지를 못합니다. 따라서 해당 이미지를 불러 올 수 없고, 이미지를 불러 올 수 없을 때의 대체 텍스트인 alt가 발동되어 "이미지가 안보여요" 라고 하는 문자가 대신 출력됩니다.
다음은 오디오와 비디오를 넣어보겠습니다.
이미지와 동일하게 source를 이용하여 넣을 수 있습니다. 오디오는 audio src, 비디오는 video src를 이용하면 됩니다.
하지만 이미지태그와는 다르게 오디오와 비디오는 닫는 태그( / ) 를 꼭 넣어주어야 하며, 보통 일반적인 경우 재생이 되어야 하기 때문에 controls 속성을 넣어 주어야 합니다.
<body>
<audio src = "audio.mp3" controls ></audio>
<video src = "video.mp4" controls></video>
</body>마찬가지로 width, height 을 이용하여 사이즈 조절도 가능합니다.
<body>
<audio src = "audio.mp3" controls ></audio>
<video src = "video.mp4" controls width = "480" height = "320"></video>
</body>
이렇게 잘 실행이 되는것을 볼 수 있습니다.
오늘 포스팅은 여기서 마치도록 하겠습니다.
'Programming > HTML CSS' 카테고리의 다른 글
| VSCode HTML 파일 단축키로 간단하게 실행하기 - 심코딩 (0) | 2022.11.16 |
|---|---|
| HTML CSS 공간분할태그 (div, span) 알아보기 - 심코딩 (2) | 2022.09.15 |
| HTML 입력 양식 태그 알아보기 (input, action) (3) | 2022.09.01 |
| HTML, CSS 기본 글자 태그 알아보기! (a태그, a href ...) (4) | 2022.08.19 |
| HTML, CSS 시작시 꼭 필요한 확장프로그램! (비쥬얼스튜디오 확장) (5) | 2022.08.16 |
댓글