HTML이란?
Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다.
웹 구성 요소
- HTML - 정보 또는 설계도
- CSS - 디자인 또는 스타일링
- JS - 기능과 효과 (슬라이드 or 팝업 효과 등)
웹사이트 제작 시 고려사항
1. 웹표준 - 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
2. 웹 접근성 - 장애 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식
3. 크로스 브라우징 - 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
HTML 태그 기본 구조
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>- 태그명 : HTML이 갖고 있는 고유 기능
- 콘텐츠 : 열린 태그, 닫힌태그 사이 내용물
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성 값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
</body>
</html>
HTML 기본 태그
- <img>
- <h>
- <p>
- <ul>
<img> 태그
<img src="img.png" alt="이미지제목">- 이미지를 삽입한다 (닫힌 태그 X)
- src 속성 : 삽입할 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지 출력하지 못했을 경우 텍스트로 정보 대체
<h> 태그
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>- heading의 약자로 제목이나 부제목을 표현
- 숫자 값이 클수록 폰트의 사이즈가 작아짐 (숫자는 정보의 중요도를 의미)
- h1 태그는 가장 중요한 정보를 담으므로 html문서에서 한 번만 사용
<p> 태그
<p>Hello World!</p>- paragraph의 약자로 본문 내용을 표현
- 웹사이트의 중요 정보를 담는 태그로, 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력
<ul> 태그
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>- unordered list의 약자로, 순서가 없는 리스트 생성
- 보통 메뉴 버튼을 만들 때 사용
- <li> 태그 필요
HTML 구조 태그
- <header>
- <nav>
- <main>
- <article>
- <footer>
<header> , <nav> 태그
<header> <!-- 상단 영역 -->
<nav> <!-- 메뉴 영역 -->
...
</nav>
</header>- 웹사이트의 목차 담당
- <header> : 웹사이트의 머리글을 담는 공간
- <nav> : 메뉴 버튼을 담는 공간으로 <ul>, <li>, <a> 태그와 함께 사용
<main> , <article> 태그
<main role="main"> <!-- 본문 영역 -->
<article> <!-- 정보 영역 -->
<h#></#h>
...
</article>
</main>- 웹사이트의 본문 담당
- <main> : 문서의 주요 내용을 담는 태그, IE는 지원하지 않으므로 role="main" 속성 필수 입력
- <article> : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그, 태그 내 구역을 대표하는 타이틀 <h#> 태그 필요
<footer> 태그
<footer> <!-- 하단 영역 -->
<div> <!-- 정보 -->
<p>주소: 서울특별시 XX </p>
</div>
</footer>- 웹사이트의 부록 담당
- <footer> : 가장 하단에 들어가는 정보를 표기할 때 사용
- <div> : 임의의 공간을 만들 때 사용
HTML 태그의 성격
- Block 요소
- Inline 요소
Block 요소
- y축 정렬 형태로 출력 (줄 바꿈 현상이 있음)
- 공간을 만들 수 있고, 상하 배치 작업 가능
Inline 요소
- x축 정렬 형태로 출력 (한 줄에 출력)
- 공간을 만들 수 없고, 상하 배치 작업 불가능
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query (0) | 2022.04.07 |
|---|---|
| [CSS] CSS3 애니메이션 - Transform, Transition, Animation (0) | 2022.04.07 |
| [HTML&CSS] 웹사이트 레이아웃 (0) | 2022.04.05 |
| [CSS] CSS 개념 및 구성 요소 (0) | 2022.04.05 |
댓글