쌓고 쌓다

[HTML] <audio>, <video>, <ul>, <ol>, <a> 태그 본문

프로그래밍/html & css

[HTML] <audio>, <video>, <ul>, <ol>, <a> 태그

승민아 2023. 1. 15. 15:47

오디오

<audio controls>
    <source src="music.mp3">
</audio>

 

속성 설명
src 오디오 파일명(경로) 설정
controls 화면에 플레이어 표시
autoplay 자동 재생
loop 무한 반복

 

비디오

<video width="200" height="200" controls>
    <source src="movie.mp4">
</video>

 

속성 설명
src 비디오 파일명(경로) 설정
width 너비
height 높이
controls 화면에 플레이어 표시
autoplay 자동 재생
loop 무한 반복

 

순서 없는 목록 (Unordered List)

<ul>
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ul>

 

글머리 기호가 기본적으로 점으로 나온다.

CSS를 이용해 글 머리 기호를 변경하거나 아이콘 이미지로 사용 가능하다.

 

순서 있는 목록 (Ordered List)

<ol>
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ol>

각 목록의 앞에 항목의 순서를 의미하는 일련번호가 붙는다.

 

하이퍼링크

<a> 태그를 이용해 텍스트나 이미지 등 요소에 링크를 걸어둘 수 있다.

이것을 이용하여 다른 페이지로 이동하게 만들어 웹 서핑이 가능하게 만들 수 있다.

<body>
    <ul>
        <li><a href="page1.html">방법1</a></li>
        <li><a href="http://naver.com">방법2</a></li>
        <li><a href="http://youtube.com" target="_blank">방법3</a></li>
    </ul>

    <a href="page1.html"><img src="tree.jpg" width="200"></a>
</body>

href 속성은 이동할 페이지의 URL 주소를 갖는다.

target 속성을 '_blank'로 설정하면 새 창을 생성하여 열게 한다.

 

href="page1.html"은 동일 폴더에 있는 걸로 간주하여 상대 경로로 html 파일을 연다.

href="http://naver.com"은 절대 경로를 이용하여 웹 페이지를 연다.

하이퍼 링크로 메인 페이지(index.html)와 서브 페이지(page1.html)간에 서로 이동이 가능하다.

 

속성 설명
href 이동할 페이지의 URL 주소 설정
target target='_blank'로 새창에 페이지 표시

 

 

저작자표시 비영리 변경금지

'프로그래밍 > html & css' 카테고리의 다른 글

[CSS] 선택자  (0) 2023.01.23
[CSS] 박스 모델  (0) 2023.01.20
[CSS] CSS 삽입 방법 및 기본 문법  (0) 2023.01.19
[HTML] 폼 양식  (0) 2023.01.15
[HTML] <h1>, <p>, <br>, <img> 태그 + 특수 문자 사용  (1) 2023.01.12
'프로그래밍/html & css' Related Articles more
Comments