1 HTML
- Hyper Text Markup Language
- 링크, 교정부호, 태그를 사용하여 의미를 부여
- 문자열 → Content / 문자열 + tag → Element
- 관련 내용에 대해 더 알고싶을 때 : html + 찾고 싶은 내용 + mdn
<p> My cat is very grumpy</p>
<p> Opening tag </p> Closing tag
1) Header Tag
- 제목, 소제목을 달기 위해 사용하는 태그
- h1~h6 까지의 태그가 존재하며 h1부터 순서대로 사용하는 것을 권장
<h1> h1 </h1>
<h2> h2 </h2>
<h3> h3 </h3>
<h4> h4 </h4>
<h5> h5 </h5>
<h6> h6 </h6>
2) Div Tag
- 레이아웃 및 기타 문자를 표기하기 위한 태그
- 가장 많이 남용되는 태그이므로 사용에 유의해야 함
- div 태그를 그 쓰임에 따라 사용을 분리한 것이 sementic태그
<!-- 레이아웃 및 기타 : div -->
<p>---------------</p>
<div>안녕하세요.</div>
<div>반갑습니다.</div>
<div>안녕</div>
<div>hi</div>
3) List Tag
- ul 태그: 순서가 없는 리스트를 표기하는 태그
- ol 태그: 순서가 있는 리스트를 표기하는 태그
- li 태그: 리스트 안의 내용을 표기하기 위한 태그 (ul, ol 공통)
<!-- list : ul ol -->
<p>------------------------</p>
<ul>
<li>태국</li>
<li>영국</li>
<li>프랑스</li>
</ul>
<ol>
<li>물을 끓인다</li>
<li>라면을 넣는다</li>
<li>5분을 기다린다</li>
<li>계란을 푼다</li>
<li>맛있게 먹는다</li>
</ol>
4) Video Tag
- 속성: 텍스트와 달리 주어져야 하는 추가정보 제공, 오프닝 태그 안에 작성
- autoplay: 비디오의 로딩이 완료되면 바로 재생하는 속성
- src: 삽입(embed)할 동영상의 주소(url)
- <video></video> 태그 안의 콘텐츠는 브라우저가 <video> 요소를 지원하지 않을 때 보여짐
- source는 오프닝 태그만 있는 self closing tag '/>'로 태그 닫기
<!-- 비디오 : video -->
<video controls width="250" autoplay>
<source src="/media/cc0-videos/flower.webm"
type="video/webm" />
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
5) Img Tag
- 동영상과 유사하게 <img> 태그 안에 속성값을 추가함
- unsplash(무료 사진 사이트) pixabay(링크만을 다운로드 하는 것은 불가)
<!-- 이미지 : img -->
<p>------------------------</p>
<img
src="https://images.unsplash.com/photo-1647292942371-f4c6bb98a41c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" width="600"
alt="food">
6) 구조
- ! + tap 으로 html 기본 템플릿을 바로 생성할 수 있음
- live server을 사용하여 바로 웹페이지 형식으로 표시할 수 있음
<!DOCTYPE html> // 버전 명시
<html lang="en"> // html임과 언어 명시
<head>
<meta charset="UTF-8"> // 이모티콘 포함 모든 나라 언어 지원하는 인코딩 형식
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>first webpage</title>
</head>
<body> // 눈에 보이는 모든 정보를 담는 태그
<h1>hi</h1>
<h6>hi</h6>
</body>
</html>7) Youtube Clone 만들기 실습
< !DOCTYPE thml >
- 브라우저가 문서를 렌딩할 때 완전 표준 모드를 사용하게 하기 위함
- 브라우저의 렌딩 종류에는 quirks mode(호환 모드) / almost standards mode / standards mode가 있음
< head >
- 기계가 식별할 수 있는 문서의 메타데이터를 담음
- <title> 브라우저의 제목 표시줄이나 페이지 탬에서 보이는 문서 제목을 정의
- <meta> 인코딩에 사용하는 방법이나 전체 페이지에 적용되는 문서 레벨 메타데이터 제공
< body >
- HTML 문서의 내용을 나타내며 한 문서에 하나만 존재함
- CSS로 대체할 수 있는 다수의 태그를 특성으로 가짐
< header >
- 제목, 로고, 검색 폼 등 페이지 소개 및 탐색에 도움을 주는 콘텐츠 표기
< div >
- 콘텐츠를 위한 통용 컨테이너로 CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 아무런 영향을 주지 않음
< span >
- 구문 콘텐츠를 위한 컨테이너로 본질적으로 아무것도 나타내지 않으나 특정 값을 공유하는 요소를 묶을 때 사용
- <div> -> 블록 레벨 요소 ( 언제나 새로운 줄에서 시작하고 좌우 양쪽으로 최대한의 너비를 차지함, body 안에서)
- <span> -> 인라인 요소 ( 새로운 줄을 만들지 않으며 할당된 공간만 차지)
- 아래의 예시에서 <span>은 인라인이기 때문에 개행이 이루어지지 않고 하나의 결과로 나타남
<div>다음 span은 <span class="highlight">인라인 요소</span>로,
영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div>
< svg >
- 2차원 벡터 그래픽을 나타내는 XML 기반의 마크업 언어
- 비트맵 형식과 비교했을 때 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능함
