03. HTML 이미지, 미디어, 링크, 프레임 삽입 관련 태그들

○ 이미지 삽입 태그

    - 이미지 삽입 태그 : <img> 또는 <img/>

<img src="경로명+파일명">

<img src="경로명+파일명"/>

    - 이미지 경로

        ① 상대경로 : 현재 HTML문서가 저장되어 있는 폴더 기준

폴더명/		현재 폴더의 하위폴더 
./폴더명/	현재 폴더의 하위폴더
../폴더명/	현재 폴더의 상위폴더 
../../폴더명/	현재 폴더의 상위상위폴더

<img src="./foldername/imagename.jpg">
<img src="../foldername/imagename.jpg">

        ② 절대경로 : 웹프로젝트의 홈디렉토리(ROOT)부터 시작

 

    - 속성값으로 크기를 조정할 수 있다 (height이 생략되면 width에 맞춰 줄어든다)

 

<img src="../images/image1.jpg" width="200px" height="100px">
<img src="../images/image2.jpg" width="50%" height="50%">
<img src="../images/image3.jpg" width="300px">

 

○ 미디어 삽입 태그

    - 음악 삽입 태그 : <audio></audio>

    - 영상 삽입 태그 : <video></video>    

<audio controls>
	<source src="../폴더이름/파일명.mp3">
</audio>

<video width="400" height="300" poster="../폴더이름/이미지파일명.jpg" controls>
	<source src="../폴더이름/파일명.mp4">
</audio>

    - 미디어 삽입 태그에서 사용되는 속성들

        ① controls : 컨트롤 막대 표시

        ② autoplay : 자동 재생

        ③ width, height : 비디오 크기 조절       

        ④ poster : 비디오가 재생되지 않을 시 표시되는 이미지

 

○ 링크 삽입 태그

    - 링크 삽입 태그 : <a></a>

    - 링크 삽입 속성 : href

 

        ① 다른 페이지로 연결

<a href="링크할 주소">텍스트</a>

<a href="https://binscode.tistory.com/2">HTML 기본문법</a>

        ② 같은 페이지 내에서 연결(북마크)  

            - 여기라는 텍스트의 링크를 누르면 현재 페이지에서 id="seoul"을 가진 서울로 이동한다

            - #은 id를 가르키는 단축키

            - 위로가기버튼을 생각하면 됨

<h1 id="아이디명">텍스트</h1>
<a href="#아이디명">텍스트</a>

<h1 id="seoul">서울</h1>
<a href="#seoul">여기</a>

 

○ 프레임 삽입 태그

    - 프레임 삽입 태그 : <iframe></iframe>  

    - 웹페이지 안에 또 다른 웹페이지를 삽입하는 것

    - 회원가입 시 이용약관이 나오는 창을 생각하면 됨

<iframe src="삽입할페이지명" width="프레임가로크기" height="프레임세로크기"></iframe>