[HTML] HTML 기본 태그

🤔 블록 레벨 요소와 인라인 요소

블록 레벨 요소

마크업을 할 때 줄이 바뀌는 특성이 있다.

 

인라인 요소

블록레벨 요소와 달리 줄 바꿈 특성이 없다. 즉, 행이 바뀌지 않고 한 줄로 출력 된다.

 

블록 레벨 요소와 인라인 요소의 특징

요소 유형	특징
블록 레벨 요소	1. 줄 바꿈이 일어난다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다.
인라인 요소	1. 줄 바꿈이 일어나지 않는다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 3. 블록 레벨 요소를 자식 요소로 포함 할 수 없다(예외 : a태그)

 

📑HTML 기본 태그

P태그

• HTML 문서에서 단락(paragraph) 을 정의할 때 사용하는 태그다.
• 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함 할 수 없다.
• 텍스트의 행을 바꾸려면 <br> 태그를 사용한다.

Space bar나 Tab, Enter를 눌러도 공백 1개로 인식한다.

💡 <pre> 태그
줄바꿈과 공백, 들여쓰기 등을 메모장 처럼 있는 그대로 나오게 하고 싶다면 pre태그로 마크업 하는것도 하나의 방법이다

 

h태그

• <h1> ~ <h6> 태그까지 존재한다.
• HTML 문서에서 제목(Heading)을 정의 할 때 사용한다.
• <h1> ~ <h6> 태그는 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다.

💡 스크린 리더에서 주의해야 할 h태그
스크린 리더(음성낭독프로그램)에서 제목의 수준으로 바로 이동할 있기 때문에
<h1> → <h2> → <h3> → <h4> → <h5> → <h6> 순으로 정의하는 것이 좋다.
중간에 제목의 수준이 빠지지 않도록 주의 해야 하며, 보통 <h2> 태그부터는 같은 레벨의 제목 태그를 여러 번 정의할 수 있다.

 

ul, ol, li태그

 

ul

• Unorder List의 약자로 비순서 목록을 정의할 때 사용한다.
• 자식 요소로 반드시 <li> 태그를 정의해 주어야 하며, <li> 태그 외 다른 태그는 자식요소로 올 수 없다.

ol

• Order List의 약자로 순서 목록을 정의할 때 사용한다.
• 자식 요소로 반드시 <li> 태그를 정의해 주어야 하며, <li> 태그 외 다른 태그는 자식요소로 올 수 없다.

li

• list items로 항목을 정의할 때 사용한다. <ul>, <ol> 태그의 자식 요소다.
• 텍스트, 인라인 요소, 블록 레벨 요소 모두 포함 할 수 있다.

<ul>, <ol> 태그 둘다 <li>태그 안에 중첩해서 선언 가능하다.

💡 <ol>태그 속성
순서가 있는 목록인 점에서 start로 처음 시작할 순서값을 줄 수 있으며,
<ol>의 자식태그로 오는 <li>태그에는 value로 값을 정해 줄 수도 있다.

list-style-type 속성은 목록을 보여주는 속성에만 적용되며 목록 스타일을 변경할 수 있다.

 

중첩 선언의 옳은 예시

<ul>
    <li>
        메뉴1
        <ul>
            <li>메뉴1-1</li>
            <li>메뉴1-2</li>
            <li>메뉴1-3</li>
        </ul>
    </li>
    <li>
        메뉴2
        <ul>
            <li>메뉴2-1</li>
            <li>메뉴2-2</li>
            <li>메뉴2-3</li>
        </ul>
    </li>
</ul>

다음 예제는 <ul>, <ol>에서 잘못된 사용 예시다.

 

잘못된 사용 예시

<!-- li가 아닌 태그가 자식태그로 선언된 경우 -->
<ul>
    <p></p>
</ul>

<!-- li태그 안쪽이 아닌 바깥쪽에 li가 아닌 태그가 자식태그로 선언된 경우 -->
<ul>
    <div>
        <li></li>
    </div>
</ul>

 

폰트 스타일을 위한 태그와 유사한 시멘틱 태그

 

시멘틱 의미 없이 스타일만을 위한 태그

• <b> : 단순히 글자만 굵게 한다.
• <i> : 단순히 글자 기울임만 준다.
• <center> : <p>태그와 같으나 가운데 정렬해주는 태그(But, HTML5에서부턴 표준이 아님)

시멘틱 태그(권장하지 않음)

• <u> : 고유명사, 철자 틀렸을 때 사용
• <s> : 문서의 내용이 틀렸을 때 사용
• <del> : 예전 버전에 있었는데 최신 버전에는 삭제된 내용을 표시할 때 사용
• <strong> : 문서에서 중요한 텍스트 표시할 때 사용(<b> 스타일 똑같음)
• <em> : 중요한 텍스트 표시할 때 사용(<i> 스타일 똑같음)

💡 시멘틱 태그 사용하는 이유
명확하지 않으나,
검색포털에서 html을 읽는데 도움이 될 수 있다(SEO검색 마켓팅에 도움이 될수 있다).
개발자끼리 공유하기 좋게 하기 위함이다.
접근성 때문이다 등의 이유들이 있다.

 

브라우저 경로를 표현하는 방식

 

절대 경로

인터넷, url로 접속 가능한 경로

<a href="https://www.naver.com/"></a>

 

상대 경로

(통상적으로) 개발 환경에서 시작되는 경로

<link rel="stylesheet" href="./style.css">

 

▶ . : 현재 파일이 위치한 경로
▶ .. : 이전 경로 / 상위 경로
▶ / : 폴더 구분

 

img태그

• 인라인 요소이며, 이미지를 삽입할 때 사용하는 태그다.
• img태그 필수 속성인 src 속성은 불러올 이미지 경로를 지정한다. 경로는 위에 정리한 절대경로와 상대경로의 개념이 똑같이 적용 된다.
• </img> 종료태그가 없는 빈 요소이다.
• alt속성은 이미지가 나오지 않을때 나오는 대체 텍스트 속성이다

width, height 속성을 style 태그 없이 설정 할 수 있다.

<!-- 스타일 속성을 잡지 않고도 width, height 설정이 가능하다 -->
<img width="200px" height="200px" src="./아무그림" alt="대체텍스트">

<!-- 하지만, 스타일 속성으로 한다해서 다르게 보이는건 아니다 -->
<img style="width: 200px; height: 200px" src="./아무그림" alt="대체텍스트">

 

audio태그

• 음악과 오디오를 삽입할 때 사용하는 태그다.
• mp3, wav, ogg 등의 파일 형식을 지원한다.

속성명	설명
src	오디오 파일 경로를 넣는 속성이다.
preload	1. HTML 문서가 로드될 때 오디오 파일 로드 여부를 판단한다. 2. none, metadata, auto 값이 있다
autoplay	HTML 문서가 로드될 때 오디오를 자동으로 실행한다.
muted	음소거 한다
loop	반복하여 재생한다
controls	컨트롤러를 표시한다 (재생, 멈춤, 뒤로가기, 앞으로가기)

 

video태그

• 동영상을 삽입할 때 사용하는 태그다.
• mp4, webm, ogg 등의 파일 형식을 지원한다.

속성명	설명
src	영상 파일 경로를 넣는 속성이다.
preload	1. HTML 문서가 로드될 때 영상 파일 로드 여부를 판단한다. 2. none, metadata, auto 값이 있다
autoplay	HTML 문서가 로드될 때 영상을 자동으로 실행한다.
muted	음소거 한다
loop	반복하여 재생한다
controls	컨트롤러를 표시한다 (재생, 멈춤, 뒤로가기, 앞으로가기)
width	영상의 가로 크기를 지정한다
height	영상의 세로 크기를 지정한다
poster	영상의 다운로드 중에 표시되는 이미지를 설정해줄 수 있다

요즘 같은 경우 유튜브 같은 플랫폼에서 iframe 태그를 이용하여 영상을 가져오는 경우가 많다.

💡 iframe 이란?
html에 새로운 html 문서를 넣는 태그

 

div태그

• 블록 레벨 요소이며, 요소들을 그룹으로 정의하는 태그다.
• 태그 자체는 아무런 의미를 갖고 있지 않다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 모두 포함 할 수 있다.

span태그

• 인라인 요소이며, 인라인 요소들을 그룹으로 정의하는 태그다.
• 태그 자체는 아무런 의미를 갖고 있지 않다.
• 텍스트, 인라인 요소를 포함할 수 있다.

💡 요소들을 그룹으로 묶어주는 이유?
CSS를 손쉽게 적용하기 위해서다.

 

구조관련 시멘틱 태그

 

header태그

• HTML 문서의 헤더 영역을 의미하는 태그이며, 제목이나 내비게이션, 검색 등의 내용들을 포함 할 수 있다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함 할 수 있지만 <header>, <footer> 태그는 포함할 수 없다.

nav태그

• 메인 메뉴나 목차 등을 정의해 주는 태그다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다.

section태그

• 맥락이 같은 요소들을 주제별로 그룹화해주는 태그다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다.

article태그

• 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사,. 블로그 포스팅 등을 의미하는 태그다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다.

aside태그

• 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그다.
• HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광곧 등의 영역으로 사용된다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다.

footer태그

• HTML 문서의 푸터 영역을 의미하는 태그다.
• 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있다.
• 텍스트, 인라인 요소, 블록 레벨 요소를 포함 할 수 있지만 <header>, <footer> 태그는 포함할 수 없다.