1. 구조 파악

• DOCTYPE, html, head, body, meta, title
  • DOCTYPE : document type으로 우리가 사용할 문서의 언어를 나타냅니다. 웹 문서의 유형을 지정하기 위해 맨 처음 선언합니다.
  • html : 웹 문서의 시작과 끝을 나타내며, 웹 브라우저는 html 시작과 끝을 보고 이 사이의 값을 읽어 나타냅니다.
    • 속성 lang : language로 korea의 ko로 지정시 검색문서를 한국어로 제한하거나, 낭독기에서 한국어로 자동되는 등의 이점이 있습니다.
  • head : 웹 브라우저가 웹 문서를 해석할 때 필요한 정보를 나타냅니다.
  • body : 웹 브라우저가 실제로 화면에 나타낼 본문입니다.
  • meta : 데이터에 관한 데이터로, 웹 문서에 대한 정보를 저장하고 표시합니다. 가장 대표적인게 어떤 인코딩시 어떤 문자세트를 사용할지 등의 내용을 담을 수 있습니다.
    • [meta name="keywords" content="html의 구조"]
    • [meta name="author" content="이장훈"]
  • title : 문서 제목을 설정합니다.
    • 실제 웹 브라우조의 등장하는 태그 이름이 변경됩니다.
    • [title] 제목 [/title]로 나타냅니다.

html 배우기

2. 텍스트 입력

2.1 제목 입력

• h : heading태그를 사용합니다.
• 숫자는 1~6까지 사용합니다.

첫번째 제목입니다.

두번째 제목입니다.

세번째 제목입니다.

네번째 제목입니다.

다섯번째 제목입니다.

여섯번째 제목입니다.

<h1> 첫번째 제목입니다. </h1>
<h2> 두번째 제목입니다. </h2>
<h3> 세번째 제목입니다. </h3>
<h4> 네번째 제목입니다. </h4>
<h5> 다섯번째 제목입니다. </h5>
<h6> 여섯째 제목입니다. </h6>
<h7> 일곱째 제목입니다. </h7>  < 일반 본문 내용과 차이가 없네요

2.2 단락 및 줄바꾸기

• p : paragraph
  • 단락을 나누기 때문에 기본적으로 위 아래의 한 줄을 더 띄운다.
  • p가 없다면 enter 입력이 되어있더라도 단락이 나눠지지 않는다.
  • 닫는 태그는 필수이다.
  • align 속성 : 배열 left, right, center 등이 가능하다
• div :
  • p와 동일한 역할을 하지만 위 아래의 한 줄을 띄우지 않는다. 이는 br과 같다.
  • 하지만 단락을 나누는 속성은 동일하기 때문에 p와 동일한 면모를 가진다.
  • align 속성 : 배열 left, right, center 등이 가능하다.
• br
  • br과 p를 굳이 구분하는 이유는 추후 CSS로 단락 스타일 적용시 필요하므로 반드시 구분하는 것이 좋다.

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?

눈에 살 같은 길지 오아이스도 그들은 이상은 얼마나 가는 것이다.

그러므로 하는 끝에 같은 미묘한 속에 것이다.

<p>새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?</p>
<p align="center">눈에 살 같은 길지 오아이스도 그들은 이상은 얼마나 가는 것이다.</p>
<p align="right"> 그러므로 하는 끝에 같은 미묘한 속에 것이다.</p>

<div>새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?</div>
<div align="center">눈에 살 같은 길지 오아이스도 그들은 이상은 얼마나 가는 것이다.</div>
<div align="right"> 그러므로 하는 끝에 같은 미묘한 속에 것이다.</div>

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?
눈에 살 같은 길지 오아이스도 그들은 이상은 얼마나 가는 것이다.
그러므로 하는 끝에 같은 미묘한 속에 것이다.

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?<br>
눈에 살 같은 길지 오아이스도 그들은 이상은 얼마나 가는 것이다.<br>
그러므로 하는 끝에 같은 미묘한 속에 것이다.

2.3 단락 심화

• span
  • 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.
  • div와 비슷하지만 블록 타입 요소인데 반해, span은 인라인 타입 요소이다. 따라서 그 해당 문장 안에서 변경하는데 사용된다.
  • 따라서 CSS를 적용할 때나, 일부 속성, 너비나 높이 조절과 같은 내용을 문장안에서도 처리가 가능하다. div는 별도의 div로 분리해야만 가능하다.

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?

2.4 글자 강조

• strong
  • 닫기 필요

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?

새가 인간이 않는 인생을 칼이다. <strong>위하여서 위하여서</strong>, 창공에 있으랴?

2.5 이텔릭체

• i / em
  • em : emphasis
  • i : italic
  • em은 특정 부분 강조시, i는 마음속 생각이나 용어, 관용구에 사용(단순 텍스트와 구분 용도)

새가 인간이 않는 인생을 칼이다. 위하여서 위하여서, 창공에 있으랴?

새가 인간이 않는 인생을 칼이다. <i>위하여서 위하여서</i>, 창공에 있으랴?

3. 목록만들기

3.1 순서 있는 목록 만들기

• ol, li
  • 순서가 있다는 말은 반드시 순차적으로 진행되는 과정을 이야기하며, 넘버링이 반드시 포함된다.
  • 타입을 통해서 넘버링을 할 수 있는데, 종류는 1(숫자), a(소문자), A(대문자), i(로마자 소문자), I(로마자 대문자)이다.
  • ol : ordered list
  • li : list

1. 항목1
2. 항목2

<ol type = "A">
  <li> 항목1</li>
  <li> 항목2</li>
</ol>

3.2 순서 없는 목록 만들기

• ul
  • ul : unordered list

• 항목1
• 항목2

<ul>
  <li> 항목1</li>
  <li> 항목2</li>
</ul>

4. 이미지 삽입하기

• img
  • img src="이미지 경로" alt="대체용 텍스트"
  • 속성 src : 이미지 파일 경로를 웹 브라우저에 알려줌
  • 속성 alt : 화면 낭독기, 혹은 페이지에 이미지 표시가 안되는 경우 등에 대신하여 텍스트로 해당 이미지를 알려줌.
  • 속성 width : 이미지의 너비
  • 속성 height : 이미지의 높이
  • % : 웹 사이즈의 비율에 맞춰 계산됨, px 픽셀로 계산됨

<img src="https://images.velog.io/images/exljhun307/post/457a899c-e38a-4649-9da7-e457d4055690/image.png">

5. 하이퍼링크 삽입하기

5.1 링크 삽입

• a
  • [a href="링크 주소"] 텍스트 또는 이미지 [/a]
  • 속성href : 이동할 링크 주소를 적어준다.
  • a는 열고 닫는다.
  • 속성 target : 새창으로 띄울경우 _blank를 준다.

6.

• link

  • link : 해당 웹 문서와 외부 소스와의 관계를 정의한다.
    • head 안에만 들어갈 수 있다.

• script

  • 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용합니다.
  • http://www.tcpschool.com/html-tags/script