국비지원 JAVA 풀스택 과정/HTML+CSS3

[HTML+CSS3] 웹 컨텐츠를 담는 태그 (HTML)

ODaram 2022. 9. 20. 16:08

03. 웹 콘텐츠를 담는 태그

· 텍스트 태그

텍스트를 저장할 때 사용하는 태그 : h1~h6 (타이틀), p(문단)
 - 중요도에 따라 가장 중요한 타이틀을 h1에 저장함
<p>텍스트를 저장할 때 사용하는 태그는 h1 ~ h6, p 태그이다.</p>

· 이미지 태그

이미지를 저장할 때 사용하는 태그 : img
 - 필수 속성 src를 이용해 이미지를 html 문서에 포함 시킨다. ( 상대 or 절대 경로를 부여함 )
 - 상대 경로 : 내가 작성하는 파일의 위치에서 경로가 시작하는 것 ( none, ./, ../ ) ( / : 해당 파일 하단으로 이동)
   절대 경로 : 루트 디렉터리에서 경로가 시작하는 것 (
 - 필수 속성이 아닌 alt를 이용해 이미지에 대한 설명을 작성, 웹 접근성을 향상시키기 위해 웹 표준에서는 권장

<img src="./joayong.png" alt="조아용"> // 상대 경로 <!-- none, ./, ../ : 상대경로 -->
<img src="images/joayong_hate.jpg" alt="하기시러용"> // 상대 경로 <!-- (슬래시 / : 해당 파일 하단으로 이동하는 뜻) -->
<img src="../../imgs/joayong_back.png" alt="조아용뒷태"> // 상대 경로 <!-- ../ : 현재 파일 위로 이동하는 뜻 (이동하는 횟수대로 반복)-->
<img src="D:/오선영/{01.HTML5}/joayong.png" alt="조아용"> // 절대 경로
<img src="/오선영/{01.HTML5}/joayong.png" alt="조아용"> // 절대 경로 <!-- / 시작 : 웹서버의 절대경로 -->

· 비디오 태그

동영상 저장할 때 사용하는 태그 : video
<video autoplay preload controls loop muted>
 - 자동재생/자동불러오기/동영상진행바표시/무한반복/음소거
 -  preload 없으면 사용자가 재생 버튼 눌렀을때 불러오기 시작함

· 오디오 태그

오디오 저장할 때 사용하는 태그 : audio
<audio autoplay preload controls loop muted>