순식간에 많은 내용을 받아들이느라 걱정했는데, 박규하 코치님과 김주연 코치님의 자료를 보면서 열심히 정리했습니다.😣😣
HTML(Hyper Text Markup Language)은 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어입니다.
HTML 태그 기본 구조
<열린태그 속성 = "속성값"> content </닫힌태그>- 태그명 : HTML이 갖고 이쓴 고유의 기능으로, <열린태그></닫힌태그> 형태로 입력
- 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹사이트 제목</title>
</head>
<body>
웹사이트 내용
</body>
</html>- <!DOCTYPE html> : 문서의 형식을 HTML5로 선언
- html : HTML 문서의 최상위 요소 (HTML 문서의 시작과 끝을 의미)
- head : 문서와 관련된 요약 정보
- meta : 페이지 설명(description), 저자, 초기 크기 설정(content), 컨텐츠를 표현할 너비(e.g.디바이스 크기에 맞추기 등), 인코딩 방법(charset), 웹페이지 프리뷰(property) 등 데이터를 설명하는 데이터
- title : 문서의 제목
- body : 문서의 본문
HTML 요소
HTML은 다양한 요소(element)로 구성되며, 각 요소는 태그(tag)로 표시됩니다.
제목과 단락 요소
<h1>제목</h1>
<p>문단</p>
- h : heading의 약자로 제목 요소입니다. h1 ~ h6 까지 총 6개의 레벨이 있습니다. <h1>태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용됩니다.
- p : paragraph의 약자로 단락 요소입니다.
링크 요소
<a href="링크 주소" target="_blank">링크 텍스트</a>
- a : 링크 요소입니다. href 속성을 이용해 링크 주소를 지정할 수 있습니다. target은 웹페이지를 연결하는 방식입니다.
이미지 요소
<img src="이미지 주소" alt="대체 텍스트">
- img : 이미지 요소입니다. src 속성을 이용해 이미지 주소를 지정하고, alt 속성을 이용해 대체 텍스트를 지정할 수 있습니다.
구조를 잡을 때 사용하는 태그
목차를 담당하는 태그
<header> <!--상단 영역 -->
<nav> <!--메뉴 영역 -->
<ul>
<li></li>
</ul>
</nav>
</header>- header : 웹사이트의 머리글을 담는 공간입니다.
- nav : 메뉴 버튼을 담는 공간(navigation)으로 <ul>, <li>, <a> 태그와 함께 사용됩니다.
- ul : unordered list의 약자로, 순서가 없는 리스트를 생성합니다.
본문을 담당하는 태그
<main role="main"> <!--본문 영역 -->
<article> <!--정보 영역 -->
<h#></h#>
</article>
</main>- main : 문서의 주요 내용을 담는 태그입니다.
- article : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그입니다. 태그 내에 구역을 대표하는 타이틀 <h#>태그가 존재해야 합니다.
부록을 담당하는 태그
<footer> <!--하단 영역 -->
<div> <!--회사 정보-->
<p>주소</p>
<p>이메일</p>
</div>
<div> <!--전자상거래소비자보호법 필수 정보-->
<p>사업자등록번호</p>
<p>통신판매업신고번호</p>
</div>
</footer>- footer : 가장 하단에 들어가는 정보를 표기할 때 사용합니다. (회사 정보, 저작권 등)
- div : 임의의 공간을 만들 때 사용합니다.
HTML 태그의 성격
Block 요소
<p>Hello World</p>
<p>Hello World</p>
y축 정렬 형태로 출력합니다. 공간을 만들 수 있고, 상하 배치 작업이 가능합니다.
Inline 요소
<a>Hello World</a>
<a>Hello World</a>
x축 정렬 형태로 출력합니다. 공간을 만들 수 없고, 상하 배치 작업이 불가능합니다.
📍필요할 때 검색 후 찾아서 사용하기
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
W3Schools Free Online Web Tutorials
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'엘리스 AI' 카테고리의 다른 글
| [1주차] Git 기초 (0) | 2023.03.07 |
|---|---|
| [1주차] CSS 애니메이션, 반응형 웹 (0) | 2023.03.03 |
| [1주차] CSS 레이아웃 (0) | 2023.03.03 |
| [1주차] CSS 기초 (0) | 2023.03.01 |
| [1주차] 사담을 곁들인 웹 시작하기 (0) | 2023.02.28 |