[HTML] HTML 입문

🐳입문자를 위한 HTML5를 보면서 정리한 글 입니다 🐳

1. HTML 이란?

HTML은 화면을 통해 웹 콘텐츠를 표시하는 문서인 ‘웹 페이지’를 만들기 위해 사용하는 언어
웹 상에서 콘텐츠를 표시하기 위해 사용하는 마크업 언어

2. 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>여기에는 문서의 제목을 입력해주세요</title>
  </head>
  <body>
    여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
  </body>
</html>

<!DOCTYPE html> : 문서 형식 선언
<meta charset="utf-8> : 인코딩 방식 설정
<title> : 문서의 제목
<body> : 화면에 표시될 콘텐츠

3. 텍스트 표시

1) 제목

<h1> ~ <h6>

<body>
  <h1>숫자가 1일 때의 제목 텍스트</h1>
  <h2>숫자가 2일 때의 제목 텍스트</h2>
  <h3>숫자가 3일 때의 제목 텍스트</h3>
  <h4>숫자가 4일 때의 제목 텍스트</h4>
  <h5>숫자가 5일 때의 제목 텍스트</h5>
  <h6>숫자가 6일 때의 제목 텍스트</h6>
</body>

2) 문단 표시하기 `<p>`

<body>
  <p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
  <p>하나의 문단에는 일정한 여백이 형성되어 화면 상에서 구분하기가 용이합니다.</p>
</body>

3) 인용구 표시 `<blockquote>`

일반적인 텍스트보다 안쪽으로 들여 써집니다. 또한 <blockquote> 태그에는 선택적으로
cite라는 속성을 추가 가능.
- cite 속성 : 해당 인용구의 출처를 입력하는 속성, 주로 문구를 인용해 온 웹페이지의 주소를 입력

<body>
  <p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
  <blockquote cite="https://wikidocs.net/book/7596">웹 개발 입문자들을 대상으로 하는 HTML 교재입니다.</blockquote>
</body>

4) 수평선 표시하기 `<hr>`

단일 태그
color, size 속성을 사용할 수 있음

<body>
  <p>지금까지 스포츠 뉴스였습니다.</p>
  <hr color="purple" size="10">
  <p>날씨 예보입니다. 오늘은 하루 종일 맑았지만, 내일은 비가 올 예정입니다.</p>
</body>

5) 개행 `<br>`

엔터 키를 대신해 개행을 표시할 수 있는 단일 태그

6) 공백

엔티티 코드 : 기호 '&'로 시작해서 기호 ';'로 끝나는 문자의 조합을 말하는 것으로 HTML 코드 내에서 다양한 특수 문자를 나타내기 위해 사용하는 일종의 약속

7) 있는 그대로 표시하기 `<pre>`

태그 안에 작성된 텍스트를 HTML 코드에 작성된 그대로 화면에 표시하는 태그로써, 개행이나 공백 등도 모두 코드에 쓰여진 그대로 표시

8) 텍스트 표시

<strong> : 두꺼운 텍스트 표시
<em> : 기울어진 텍스트 표시
<mark> : 형광펜 효과가 있는 텍스트 표시

9) 컨테이너 태그

컨테이너 : 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
<div> : 블록 레벨의 컨테이너 요소를 만드는 태그

<body>
  <div>
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div>
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

<span> : 인라인 레벨의 컨테이너를 만드는 태그

<body>
  <p>
    예능 프로그램 즐겨 보시나요?
    저는 <span>골때리는 그녀들</span> 재미있게 보고 있습니다!
  </p>
</body>

10) 전역 속성(Global attributes)

모든 HTML 태그에서 공통적으로 사용할 수 있는 속성
id : 요소에 고유한 이름을 부여하는 식별자 역할을 함

<body>
  <div id="study">
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div id="diet">
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

class : 요소를 그룹 별로 묶을 수 있는 식별자 역할을 함

<body>
  <div>
    <p class="text content">행복하고 즐거워요~</p>
    <p class="text content">HTML 공부!</p>
  </div>
  <div>
    <p class="text content">슬프고 힘들어요</p>
    <p class="text content">적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

title : 요소에 대한 추가 정보를 기입할 수 있는 텍스트 속성으로, 사용자에게 툴팁을 제공함

<body>
  <p title="현재의 심정">화창한 날씨... 어디론가 떠나고 싶다!</p>
</body>

4. 이미지와 링크

1) 이미지 표시하기 `<img>`

<body>
  <h1>위키독스 소개글 대표이미지</h1>
  <img src="https://wikidocs.net/images//book/wikidocs_1_5nYDT0Q.png">
  <p>위키독스라는 훌륭한 플랫폼을 알게되어 영광입니다 ㅎㅎ 이미지는 아마도 화분인 것 같습니다!</p>
</body>

2) 대체 텍스트 추가

URL을 바르게 입력한 경우에만 이미지가 표시되고 잘못 입력했을 때는 대체 텍스트가 표시

<body>
  <img src="penguin.png" alt="이미지를 대신해 내가 등장!"> 
  <img src="no_penguin.png" alt="이미지를 대신해 내가 등장!"> 
</body>

3) 이미지 크기

<body>
  <img src="penguin.png" width="250" height="100"> 
  <img src="penguin.png" width="100" height="100"> 
</body>

4) 자막이 있는 이미지

HTML5에서는 이미지를 비롯해 오디오, 비디오 등의 독립적인 콘텐츠에 자막을 추가해 표시할 수 있는 <figure>와 <figcaption> 태그가 추가

<body>
  <img src="penguin.png"> <br>
  <span>귀여운 펭귄이네요~!</span>
</body>

<body>
  <figure>
    <img src="penguin.png">
    <figcaption>귀여운 펭귄의 따봉</figcaption>
  </figure>
</body>

5) 여러 이미지 중 선택

HTML5의 <picture> 태그 또한 이미지 소스를 감싸는 역할을 합니다. 그리고 그 안에는 여러 개의 <source> 태그를 사용해 화면 크기 별로 사용할 수 있는 여러 개의 이미지를 포함시킬 수 있습니다.

<body>
  <picture>
    <source media="(max-width: 375px)" srcset="image1.png">
    <source media="(max-width: 768px)" srcset="image2.png">
    <source media="(max-width: 1024px)" srcset="image3.png">
    <img src="penguin.png" alt="source의 모든 조건이 맞지 않거나 브라우저 호환 문제가 있을 때">
  </picture>
</body>

하나의 <picture> 태그의 안에 세 개의 <source> 태그를 포함하면, 결과가 렌더링되는 화면의 크기에 따라 세 이미지 중 하나의 이미지 만이 선택되어 화면에 표시

6) 링크 만들기

<a> : 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 링크 요소를 만들어주는 태그

<body>
  <h1>
    네이버 홈페이지로 이동하려면 
    <a href="https://www.naver.com/">여기</a>
    를 클릭 
  </h1>
</body>

새 탭에서 열기

<a href="https://www.naver.com/" target="_blank">새 탭에서 열기</a>

전화 걸기 & 메일 보내기
- href 속성에 전화 번호나 메일 주소를 지정할 때는 각각 "tel:"과 "mailto:" 문자열을 맨 앞에 작성해 해당 값이 전화 번호 또는 메일 주소라는 것을 명시
```
<body>
  <a href="tel:010-1234-5678">
    전화 걸기
  </a>
  <a href="mailto:eansdrawer@naver.com">
    메일 보내기
  </a>
</body>
```

5. 목록과 표

1) 목록

<ul> : 순서 없는 목록(Unordered List)

<ol> : 순서 있는 목록(Ordered List)

start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.

<body>
  <h1>과목명 나열하기</h1>
  <ol start="3" type="a">
    <li>유체역학</li>
    <li>전자회로</li>
    <li>동역학</li>
    <li>마이크로프로세서</li>
  </ol>
</body>

<ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

2) 표 만들기

<table> : 하나의 표를 나타내는 태그
<tr> : 표 안에서 하나의 행을 나타내는 태그
<th> : 행 안에서 제목에 해당하는 셀을 나타내는 태그
<td> : 행 안에서 항목에 해당하는 셀을 나타내는 태그
<thead> : 표의 제목을 나타내는 영역
<tbody> : 표의 본문을 나타내는 영역
<tfoot> : 표의 요약 부분을 나타내는 영역

<body>
  <table border="1">
    <thead>
      <tr>
        <th>한국 선수</th>
        <th>일본 선수</th>
        <th>미국 선수</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김철수</td>
        <td>오오다</td>
        <td>제임스</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>세계 랭킹 5위</td>
        <td>세계 랭킹 8위</td>
        <td>세계 랭킹 2위</td>
      </tr>
    </tfoot>
  </table>
</body>

6. 입력

1) 입력 받기

<input> : 텍스트를 입력할 수 있는 '입력 필드' 를 나타내는 단일 태그

<body>
  <h1>입력 필드를 만든다</h1>
  <input>
  <input>
</body>

2) `<input>` 태그의 핵심 속성 type

text : 한 줄 짜리 일반 텍스트를 입력할 수 있는 유형, 따로 type 속성을 지정하지 않은 경우에도 사용할 수 있는 유형
password : 웹 이용자가 입력한 내용이 화면에 표시되지 않음
number : 숫자를 입력 받을 때 사용
color : 웹 이용자에게 색상표를 제공해 색상을 선택할 수 있게 해줌
button : 클릭할 수 있는 버튼을 만드는 유형
radio : 여러 항목 중 하나의 항목만을 선택해야 할 때 주로 사용
checkbox : 여러 항목 중 몇 가지 동시에 선택할 때 주로 사용

3) `<label>` 태그

입력 요소에 라벨을 붙이는 역할

<body>
  <h1>로그인 해주세요</h1>
  <label>
    아이디
    <input type="text">
  </label>
  <br>
  <label for="pw">비밀번호</label>
  <input id="pw" type="password">
</body>

4) 드롭다운 메뉴 `<select>`

드롭다운 메뉴 : 요소를 클릭했을 때 선택 가능한 항목들이 아래로 펼쳐지는 메뉴
<select> 태그는 드롭다운 메뉴의 개별 항목을 나타내는 <option> 태그와 함께 사용

<body>
  <select>
    <option>커피</option>
    <option>콜라</option>
    <option>쥬스</option>
    <option>생수</option>
  </select>
</body>

size : 화면에 표시될 메뉴 항목의 개수를 지정하고, 드롭다운 메뉴의 형태를 변경합니다.
multiple : 여러 개의 항목을 함께 선택할 수 있도록 합니다.

<body>
  <select size="3" multiple>
    <option>커피</option>
    <option>콜라</option>
    <option>쥬스</option>
    <option>생수</option>
    <option>녹차</option>
    <option>맥주</option>
  </select>
</body>

selected : 화면에 표시될 때 기본으로 선택되어 있을 항목을 지정합니다.
value : 항목을 선택했을 때 최종적으로 반영될 값을 지정합니다.

<body>
  <select>
    <option value="coffee">커피</option>
    <option value="coke">콜라</option>
    <option value="juice">쥬스</option>
    <option value="water" selected>생수</option>
    <option value="tea">녹차</option>
    <option value="beer">맥주</option>
  </select>
</body>

5) 여러 줄의 텍스트를 입력 받기 `<textarea>`

<textarea> 태그는 <input> 태그와 달리 여는 태그와 닫는 태그 함께 사용
코드 작성 시 여는 태그와 닫는 태그 사이에 텍스트를 입력하면 웹 페이지에 렌더링 될 때 이미 텍스트가 입력되어 있는 상태로 렌더링
cols : 텍스트 영역의 가로 너비를 지정, 기준은 문자의 개수
rows : 텍스트 영역의 세로 너비를 지정, 기준은 문자의 개수

<body>
  <textarea cols="10" rows="6"></textarea>
</body>

6) 진척도 `<progress>`

max : 작업 완료를 위해 필요한 작업량을 지정합니다. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
value : 화면에 표시할 진척도를 지정합니다. max의 값보다 작거나 같아야 합니다.

<body>
  <p>작업 진행 중... 60%...</p>
  <progress value="60" max="100"></progress>
</body>

7) 버튼 `<button>`

<input type="button">과 <button>을 통해 만든 요소는 형태나 기능 면에서 차이 X
<button> 태그의 경우, 코드 작성 시 여는 태그와 닫는 태그 사이에 콘텐츠를 입력해 버튼에 표시될 콘텐츠를 지정할 수 있다는 특징이 있다.

<body>
  <!-- value 속성에 콘텐츠를 써 줍니다. -->
  <input type="button" value="PUSH">

  <!-- 태그 사이에 콘텐츠를 써 줍니다. -->
  <button>PUSH</button>
</body>

8) 입력 폼 만들기

<form> : 웹 이용자가 입력 요소에 입력한 값들을 서버로 전송해주는 역할을 하는 '폼 요소(양식)' 를 만드는 태그
action : 폼 요소에 입력된 값들을 전달 받아 처리할 서버의 프로그램을 지정(URL)
method : 사용자가 입력한 내용들을 서버로 전송할 때의 방식을 지정
- get 방식 : 입력 후 전송한 값이 주소창에 표시
- post 방식 : 입력 후 전송한 값이 주소 창에 표시 X

<body>
  <form method="post" action="fake_server.php">
    <label for="id">아이디</label>
    <input type="text" id="id">
    <br>
    <label for="pw">비밀번호</label>
    <input type="password" id="pw">
    <br>
    <input type="button" value="로그인">
  </form>
</body>

9) submit 타입

submit 유형의 <input>은 기본적으로 button 타입의 <input>과 형태가 같지만, 클릭 시 서버로의 값 전송이 이루어진다는 기능이 추가

<body>
  <form method="post" action="fake_server.php">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <!-- 클릭하면 입력 값들이 서버로 전송됩니다 -->
    <input type="submit" value="전송">
  </form>
</body>

7. 외부 파일 및 문서 삽입

1) 외부 리소스 표현 `<object>`

<object> 태그 : 이미지, 중첩된 브라우저 컨텍스트, 플러그인에 의해 표시되는 콘텐츠 등 다양한 외부 리소스를 나타내는 요소를 만드는 태그
data : 외부 파일의 경로를 지정하는 속성입니다.
type : 포함 시킨 내용의 유형을 지정하는 속성입니다.
name : 다른 요소들과 구분할 수 있는 식별자 역할을 하는 속성입니다.

<body>
  <!-- 예제 출처 : MDN -->
  <object type="application/pdf"
      data="/media/examples/In-CC0.pdf"
      width="250"
      height="200">
  </object>
</body>

2) 외부 리소스 표현 `<embed>`

<embed> 태그 : HTML5를 지원하지 않는 브라우저에서 재생할 수 없는 콘텐츠를 삽입할 때 사용하는 태그
src : 외부 파일의 경로를 지정하는 속성입니다.
type : 포함 시킨 내용의 유형을 지정하는 속성입니다.
width : 요소의 너비를 지정하는 속성입니다. <object>에도 사용 가능.
height : 요소의 높이를 지정하는 속성입니다. <object>에도 사용 가능.

<body>
  <!-- 예제 출처 : MDN -->
  <embed type="video/quicktime" src="movie.mov" width="640" height="480">
</body>

3) HTML문서 삽입하기

<iframe> 태그 : 웹 페이지 안에 공간을 마련해 그 안에 또 다른 웹 페이지를 표시

1. HTML 이란?

2. 기본 구조

3. 텍스트 표시

1) 제목

2) 문단 표시하기 <p>

3) 인용구 표시 <blockquote>

4) 수평선 표시하기 <hr>

5) 개행 <br>

6) 공백

7) 있는 그대로 표시하기 <pre>

8) 텍스트 표시

9) 컨테이너 태그

10) 전역 속성(Global attributes)

4. 이미지와 링크

1) 이미지 표시하기 <img>

2) 대체 텍스트 추가

3) 이미지 크기

4) 자막이 있는 이미지

5) 여러 이미지 중 선택

6) 링크 만들기

5. 목록과 표

1) 목록

2) 표 만들기

6. 입력

1) 입력 받기

2) <input> 태그의 핵심 속성 type

3) <label> 태그

4) 드롭다운 메뉴 <select>

5) 여러 줄의 텍스트를 입력 받기 <textarea>

6) 진척도 <progress>

7) 버튼 <button>

8) 입력 폼 만들기

9) submit 타입

7. 외부 파일 및 문서 삽입

1) 외부 리소스 표현 <object>

2) 외부 리소스 표현 <embed>

3) HTML문서 삽입하기

By Dozzing

Related Post

[PHP] 카테고리에 글 개수 추가하기

[JavaScript] 자바스크립트 타이머

[JavaScript] 자바스크립트 정규표현식(regular expression)

답글 남기기 응답 취소

2) 문단 표시하기 `<p>`

3) 인용구 표시 `<blockquote>`

4) 수평선 표시하기 `<hr>`

5) 개행 `<br>`

7) 있는 그대로 표시하기 `<pre>`

1) 이미지 표시하기 `<img>`

2) `<input>` 태그의 핵심 속성 type

3) `<label>` 태그

4) 드롭다운 메뉴 `<select>`

5) 여러 줄의 텍스트를 입력 받기 `<textarea>`

6) 진척도 `<progress>`

7) 버튼 `<button>`

1) 외부 리소스 표현 `<object>`

2) 외부 리소스 표현 `<embed>`