[HTML] HTML와 기본태그

📌 웹을 구성하는 요소

📌 웹 제작 시 고려 사항

• 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
• 웹 접근성: 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
• 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

📌 HTML 기본 태그

1. <img> 태그: 정보성을 갖고 있는 이미지를 삽입 (닫힌 태그 X)

• alt 속성: 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체

<img src="logo.png" alt="회사로고">

2. <h> 태그: heading의 약자로 제목이나 부제목을 표현

• <h1> 태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용됨

3. <p> 태그: paragraph의 약자로 본문 내용을 표현

<p>Nice to meet you</p>

4. <ul> 태그: unordered list의 약자로, 순서가 없는 리스트를 생성

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

 

📌 구조를 잡을 때 사용하는 태그

1. <header>, <nav> 태그 : 웹사이트의 목차를 담당

• <header> 태그: 웹사이트의 머리글을 담는 공간
• <nav> 태그: 메뉴 버튼을 담는 공간 (navigation)으로 <ul>, <li>, <a> 태그와 함께 사용

<header> <!-- 상단 영역 -->
    <nav> <!-- 메뉴 영역 -->
    </nav>
</header>

2. <main>, <article> 태그: 웹사이트의 본문을 담당

• <main> 태그: 문서의 주요 내용을 담는 태그 (IE는 지원하지 않으므로 role="main" 속성 필수 입력)
• <article> 태그: 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그로, 태그 내 구역을 대표하는 타이틀 <h#> 태그가 존재해야 함.

<main role="main"> <!-- 본문 영역 -->
    <article> <!-- 정보 영역 -->
        <h#></h#>
    </article>
</main>

3. <footer> 태그: 웹사이트의 부록을 담당

<footer> <!-- 하단 영역 -->
    <div>
        <p>주소: ~ </p>
        <p>이메일: ~ </p>
    </div>
    <div>
        <p>사업자 등록번호: ~ </p>
        <p>통신판매업신고번호: ~ </p>
    </div>
</footer>

📌 HTML 태그의 성격

1. Block 요소

• y축 정렬 형태로 출력 (줄바꿈 현성이 있음)
• 공간을 만들 수 있고, 상하 배치 작업 가능

<!-- Block 요소 -->
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>

2. Inline 요소

• x축 정렬 형태로 출력 (한 줄에 출력)
• 공간을 만들 수 없고, 상하 배치 작업 불가능

<!-- Inline 요소 -->
<a>Hello World</a>
<a>Hello World</a>
<a>Hello World</a>