[3] 221230 Ch. 2 HTML5 기본 요소: 텍스트 표시, 리스트, 링크, 이미지, 테이블 [K-디지털 트레이닝 3일]

221230 Fri 3rd class

Ch. 2 HTML5 기본 요소
진도: p. 26 ~ p. 64 내외 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

오늘 배운 것 중 기억할 것을 정리했다.

How to save: Ctrl + S (Save)

---

Ch. 2 HTML5 기본 요소

책의 목차
-이번 장의 목표
-텍스트 표시
-리스트
-링크
-이미지
-테이블
-추가 예제

2. 텍스트 표시 p. 27

2.1 단락(paragraph)

- <p>: paragraph, 문단을 나누는 역할을 한다.
- <br>: break, 엔터와 같은 역할을 한다.
새로운 단락을 시작하지 않고 줄 바꿈을 원한다면 <br> 태그를 사용한다. 종료 태그를 가지지 않는다.
<br>를 선호하며, <br/> 및 <br />도 사용 가능하다.

<p> 단락 1 (요소 내용) </p>
<p> 단락 2 (요소 내용) </p>

 

2.2 <pre> 태그

<pre> = 문장이 엔터 친 그대로 나온다.
The <pre> tag defines preformatted(Formatted in advance) text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

예시)

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

 

2.3 헤딩(heading): 제목

<h1>에서 <h6>까지 사용하니까 제목 크기가 달라진다

예시)

<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>

결과)

---

2.4  텍스트 서식

글자 스타일이다.

• <b>: bold
  
  
• <i>: italic
  
  
• <strong>: strong
  문서에 의미 없이 꾸밈을 주려면 Bold를 사용하고 의미가 있어서 강조를 하려면 Strong을 사용한다. 시각장애인 분들이 이용하는 스크린리더라는 프로그램을 사용 시 Strong 부분은 더 강조해서 읽어준다고 한다. 다른 부분과 톤이나 볼륨이 달라서 강조하는 느낌을 준다고 한다.
  
  
• <em>: emphasize
  The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. 강조할 때 쓰이는 데, 이탤릭체로 표시된다.
  
  
• <code>:
  The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
  컴퓨터 코드 정의할 때 쓴다.
  
  
• <sub>: subscript, 아래 첨자
  
  
• <sup> : superscript, 위 첨자
  

 

2.5 수평선

<hr>: Horizontal rule (A horizontal rule is used to provide a visual break and divide content.)
수평선이 그어진다.

---

3. 리스트 p. 34

3.1 번호 없는 리스트

<ul> (Unordered lists)
: 번호 없는 리스트며, 리스트 항목은 앞에 불릿이 붙는다. 동그란 점으로 나온다.
긱 리스트 항목은 <li>(list item) 태그로 시작한다. 

3.2 번호 있는 리스트

<ol> (Ordered lists)
: 번호가 있는 리스트다.
긱 리스트 항목은 <li>(list item) 태그로 시작한다. 
리스트 항목은 앞에 번호가 붙는다.
ex) 1, 2, 3, 4

3.3 정의(설명) 리스트

• <dl> (definition lists): 항목과 함께 항목의 정의(설명)가 표시되는 리스트다.
  
  • <dt> (definition terms): 항목을 나타낸다. 
  • <dd> (definition description): 항목에 대한 설명을 나타낸다.
    

예시)

<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>

<ol>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ol>

<dl>
<dt>에스프레소</dt>
<dd>- 커피의 기본</dd>
<dt>아메리카노</dt>
<dd>- 에스프레소에 물을 넣은 것</dd>
<dt>카페라떼</dt>
<dd>- 커피에 우유를 섞은 것</dd>
</dl>

결과)

---

4. 링크 p. 36

하이퍼 링크(링크)는 다른 문서로 점프할 수 있는 단어나 이미지이다. 
<a>(anchor) 태그가 하이퍼 링크를 정의한다. 
<a> 요소의 가장 중요한 속성은 링크 주소를 정의하는 href 속성이다. 

<a href = "info.html"> 추가 정보 </a>

<a>: 다른 페이지로 링크를 생성할 때, 사용한다.
href: 링크의 목적지를 나타낸다.
추가 정보: 링크 텍스트이다. 클릭할 수 있다는 것을 나타내기 위해 화면에서 밑줄이 그어진다.

툴팁
마우스 댔을 때 title=옆에 쓴 문장 뜨게 한다.
예시)

<a href = "http://www.주소" title="주소로 이동"> 주소로 이동 </a>
<a href = "http://www.naver.com" title="네이버로 이동"> 네이버로 이동 </a>

 

4.1 target 속성

target 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는지를 지정한다.
"_blank"와 "_self"가 중요하다. 

<a href='주소' target="_blank">링크</a>

target="_blank"

새로운 윈도우에서 새로운 페이지를 연다. 기존의 창은 그대로 남겨져 있다.

target="_self"

디폴트 값이다. 현재 윈도우창에서 링크된 웹페이지를 연다. 

target="_parent"

현재 프레임의 부모 프레임에서 새 웹페이지를 연다. 

target="_top"

최상위 프레임에서 열린다. _parent는 바로 이전창(부모창)에서 열리는 반면 _top은 최상위(가장 최고 부모)창에서 열린다.

예시)

<a href="http://www.google.com/" target="_self">google.com 방문1</a>
<!-- 새창 -->
<a href="http://www.google.com/" target="_blank">google.com 방문2</a>

 

4.1 id 속성

<a> 태그를 사용해 사용자를 현재 페이지의 다른 위치로 이동시킬 수 있다.
ex) 보통 홈페이지의 화살표 버튼, TOP 버튼에 쓰인다.

<a> 태그의 id 속성을 이용해 HTML 문서 안에서 북마크를 생성해야 한다. 북마크는 사용자에게 표시되지 않지만 HTML 문서 중에서 어떤 위치를 가리킬 수 있다. 

예시)

<a href="#section1">참고 사항 가려면 여기를 클릭하세요.</a>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>

<a id="section1">참고 사항</a>
<hr>
<p> 동일한 페이지 안에서도 점프할 수 있습니다.</p>

- How to link to an email address:

<a href="mailto:someone@example.com">Send email</a>

---

5. 이미지 p.39

이미지는 <img> 태그로 정의된다.

<img src = "seolak.jpg" width = "300" height = "300">

<img>: 이미지를 웹페이지에 삽입할 때 사용한다.
src: 이미지 파일 이름을 지정한다.
width: 가로 크기를 나타낸다.
height: 세로 크기를 나타낸다. 

 

5.1 width와 height 속성

width = "150" height = "150"처럼 숫자 변경하면서 이미지 크기 조정 가능하다.

 

5.2 Alt (Alternate text) 속성

이미지가 안 떴을 때 표시되는 대체 텍스트를 지정한다. 
alt = "대체 단어나 문장"으로 쓰이다. 
Alt = ""은 대체 텍스트 안 뜨게 비워두는 것이다.

---

6. 테이블 p.49

6.1 테이블의 행과 열

• <tr> (Table row): 행의 시작 태그이다. (가로로 김)
  
• </tr>: 행의 종료 태그이다. 
  한 번 적으면 1행이고 안에 들어갈 열의 수만큼 <td>를 적으면 된다.
  테이블 만들 때 <tr>로 행(row)을 먼저 만들고 그 안에 <td>을 넣어서 열(column)을 만든다.
  
  
• <td> (Table data)
  

구조는 <tr> (행) <td> (열) /<td> </tr> 순서이다.

예시)

<table border=1> //테이블의 선이 보인다. 
<tr> //table row 
<td>홍길동</td> //table data
<td>98</td> //table data
</tr>

<tr> //table row 
<td>김철수</td>  //table data
<td>80</td>  //table data
</tr>
</table>

결과)

6.2 경계와 배경색 설정 

<table border=1>

테이블이 선으로 나온다.

 

6.3 테이블에서 열과 행의 병합 

<th> (Table header)
제일 위에 테이블에 어떤 내용이 들어가 있는지 알 수 있다. 가운데 정렬 및 Bold체가 된다.

<td rowspan="숫자">

상하의 셀들을 병합한다 (세로로 합친다, 세로가 긴 직사각형)
span = extend from side to side of

<td rowspan="2">

행 2개를 합친다.

예제)

<tr>
     <td rowspan="3"> 1행 1열</td>
     <td> 1행 2열 </td>
     <td> 1행 3열 </td>
</tr>

 

<td colspan="숫자">

좌우의 셀들을 병합한다 (가로로 합친다, 가로가 긴 직사각형)

<td colsapn="3">

열 3개를 합친다.

예제)

<tr>
<td colspan="3"> 3행 1열 </td>
</tr>

---

블록 요소, 인라인 요소

블록 요소 (Block element)	인라인 요소 (Inline element)
1. 사용 가능한 최대 가로 너비를 사용한다. (기본 너비값은 100% ) 2. 전체를 차지하기 때문에 각 요소들이 수직으로 쌓인다. (한 줄에 한개만 배치 ) 3. 크기값 가질 수 있다. (가로 너비, 세로 길이 지정 가능하다) 4. 상하좌우 마진, 패딩O 5. 레이아웃을 작업하는 요소로 적합	1. 사용 가능한 필요한 만큼의 영역을 사용한다. (콘텐츠 너비 만큼) 2. 요소들이 수평으로 쌓인다. (한 줄에 여러개 배치 ) 3. 크기값 가질 수 없다. (사이즈 지정 불가능 ) 4. 상하 마진 적용X (좌우 마진, 상하좌우 패딩도 가능 ) 5. 텍스트를 작업하는 요소로 적합

참고: https://www.w3schools.com/html/html_blocks.asp
참고: 블록 요소와 인라인 요소

---

기타)

- 생각보다 교재에 오타가 조금 있다. p. 47의 thumnails 예제의 경우 교재에서 빠진 width = "150" height = "150"를 따로 코드에 넣고 <img src="파일 폴더/파일 이름.확장자" width = "150" height = "150" alt="">로 사용해야 교재 결과물의 썸네일 사진처럼 나온다.

---