-
HTML - links 관련 태그 / iframe / 이미지,동영상프로그래밍/HTML & CSS 2021. 9. 16.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3> a 태그 </h3> <p> <!-- 현재 브라우저 창에 표시 --> <a href="ul-list.html">게시판</a> </p> <p> <!-- 새로운창에 표시 --> <a href="https://www.google.com" target="_blank">구글</a> </p> <p> <a href="cat.png" type="image/png">고양이 사진</a> </p> </body> </html>- a태그는 하이퍼 링크 태그이다 (다른 곳 으로 이동하는)
- href로 경로를 지정해준다.
- href="ul-list.html" 이건 같은 경로내 ul-list.html을 연다는 뜻
- 그 밑에 구글 주소는 역시 클릭하면 구글 홈페이지를 여는데 옵션에 보면 target="_blank"라고 적혀있다
이건 새로운 창에서 열겠다는 의미이다.
- 마찬가지로 웹페이지 뿐만 아니라 같은 경로내에 있는 사진들도 띄울 수 있다.
- 타입은 이미지 png 파일만 열게끔 하는건데 의미는 크게 없다.
<iframe 태그>
iframe은 한마디로 인터넷창 안에 인터넷창을 여는거다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>iframe 예제</h3> <iframe src="ul-list.html" width="500" height="500" style="border: none;"></iframe> <hr> <iframe src="http://www.naver.com" width="500" height="500" style="border: none;"></iframe> <hr> </body> </html>
- src로 오픈할 주소나 경로 입력해주고 옆에 폭이랑 높이를 지정할 수 있다. 물론 style도 적용 가능
- 문제는 이런 iframe에서 오픈 못하도록 막아놓은 사이트들이 많다. 네이버도 막아 놨음
이미지 및 동영상 관련
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>이미지</h3> <!-- img태그는 인라인 태그임/ 이미지를 화면에 출력 --> <img src="cat.png"> <!-- 이미지가 존재하지 않으면 alt에 있는 메세지 출력 --> <img src="dog.png" alt="강아지"> <hr> <img alt="고양이" src="cat.png" title="고양이" style="width: 200px; vertical-align: top;"> <img alt="고양이" src="cat.png" title="고양이" width= "500"> <img alt="고양이" src="cat.png" title="고양이" style="width: 100px; vertical-align: middle; border: 5px solid"> </body> </html>- src로 경로 지정하고 만약에 경로에 없으면 alt에 있는 문구가 출력됨
- 이미지의 폭 높이 위치 등등 조절 가능함.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>video</h3> <video src="video.mp4" controls="controls"></video> <hr> <h3>audio</h3> <audio src="test1.mp3" controls="controls"></audio> <br> <audio controls="controls" loop="loop" preload="auto"> <source src="test1.mp3" type="audio/mp3"> </audio> </body> </html>- 동영상이나 오디오 첨부도 비슷함.
- src로 경로 잡고 첨부
controls 옵션 => 동영상이나 이미지를 말 그대로 컨트롤 할 수 있는 UI를 제공함. 필수임
controls 옵션 loop로 무한 재생 기능이나
preload로 페이지 로딩 될때 동영상이나 오디오고 같이 로딩 되게 하는 기능이 있다.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS 기초(1) / 외부css 파일 가져오기 (0) 2021.09.16 HTML - form 관련 태그 / 파일 태그 (0) 2021.09.16 HTML - 리스트 관련 태그 (1) (0) 2021.09.14 HTML - 테이블(table) 태그 (0) 2021.09.14 HTML - 레이아웃 / 시멘틱 태그 (0) 2021.09.14
