PROGRAMMING/Web

01 HTML

yuujoeng 2022. 5. 3. 22:12

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 기반의 마크업 언어

- 비트맵 형식과 비교했을 때 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능함