[HTML] 기본 익히기 PART 3

스터디일지

[HTML] 기본 익히기 PART 3

똥쟁이핑크 2024. 3. 12. 10:57

이미지 태그 <img>

<img src="이미지 경로" alt="대체텍스트" width="너비" height="높이">

src에는 이미지의 경로를 지정한다.
alt에는 이미지에 대한 설명을 적는다. 이로 인해 웹 접근성 증가하게 된다
절대경로 VS 상대경로
- 상대 경로 - 현재 문서를 기준으로 경로를 인식한다 ex) ./, ../(상위 디렉토리 이동)
- 절대 경로 - 절대적인 고유한 경로를 말한다. ex) http~,

오디오 태그<audio>와 비디오<video> 태그

오디오 <audio>

 <audio src="오디오 경로"></audio>

소리 컨텐츠를넣을 때 사용하는 태그
source element를 사용할 때는 1개 이상 있을 때 사용하는 것이 좋다
controls 요소는 집어 넣지 않으면 재생 막대바가 뜨지 않는다.

비디오 <video>

<video src="비디오 경로" poster="재생 전 나타낼 이미지 경로" type="비디오 타입"></video>

비디오 컨텐츠를넣을 때 사용하는 태그
controls 요소는 집어 넣지 않으면 재생 막대바가 뜨지 않는다.

오디오 태그와 비디오 태그에서 사용하는 속성

controls - 플레이 화면에 컨트롤 바를 나타낼때 사용한다.
autoplay - 오디오 혹은 비디오를 자동 실행할 때 사용한다.
(크롬 & 파이어 폭스는 자동재생 지원하지 않지만 자동재생을 하고 싶으면 muted 속성을 사용해야 한다.)
loop - 반복 재생할 때 사용한다.
muted - 소리 제거시에 사용한다.
preload - 페이지를 불러올 때 마다 어떻게 로딩 할 지 지정할 때 사용한다.
auto(default), metadata, none이 있다.
width, height - 비디오의 가로와 세로 높이를 지정할 때 사용한다.
둘 중 하나의 값만 입력해도 나머지는 자동으로 계산되어 진다.
poster="파일이름" - 비디오 태그 속성이며, 재생하기전 나오는 포스터 이미지를 지정할 때 사용한다.

하이퍼링크

<a href="경로">

href 속성을 사용한다.
다른 페이지 혹은 특정 위치로 연결할 때 사용한다
하이퍼 링크는 꼭 http 기반 url일 필요는 없다.
속성값은 tel(url을 사용하는 전화번호), mailto(url을 사용하는 이메일)가 있다.
target=_blank 속성을 사용하면 새 탭에서 해당 위치가 열린다.

원본 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>img media</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: chartreuse;
        border: 1px solid darkslategray;
      }
    </style>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img
      width="200px"
      src="../assert/images/galaxy-3608029_1280.jpg"
      alt="우주"
    />
    <img
      height="200px"
      src="../assert/images/galaxy-3608029_1280.jpg"
      alt="우주"
    />
    <h2>오디오 태그</h2>
    <audio src="../assert/audio.mp3" controls></audio>

    <h2>비디오 태그</h2>
    <video
      src="../assert/video.mp4"
      poster="../assert/images/galaxy-3608029_1280.jpg"
      controls
      type="video/mp4"
    ></video>

    <h2>하이퍼링크</h2>
    <a href="http://www.naver.com" target="_blank"> 네이버</a>와
    <a href="http://www.google.com">구글</a>은 포털 사이트이다.
    <a href="#target">target으로 이동</a>
    <a href="mailto:teresa881016@gmail.com">이메일 보내기</a>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div id="target">19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
  </body>
</html>

참고한 사이트

https://www.youtube.com/@gymcoding

짐코딩 GYM CODING

【실전코딩 짐코딩 클럽 💪🏋️‍♀️】 👉 https://gymcoding.co (짐코딩 사이트, 강의교안 등등) 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 👉 모든 유료강의 구독자 할인 쿠폰코드

www.youtube.com

https://dinfree.com/lecture/frontend/121_html_3.html#m1

HTML 프로그래밍 기초

HTML 이미지와 테이블 태그에 대해 배웁니다.

dinfree.com

무료 이미지 사이트

https://pixabay.com/ko/

무료 오디오 & 비디오 사이트