[HTML] 문장 관련 요소 / 표 그리기

---

#1. 문장 관련 요소

1. 단어나 문장 강조

1) font 태그

• <font></font> 태그는 잘 쓰이지 않는다. (사용하는 대부분 속성을 CSS에서 처리하기 때문)
• 지정한 글꼴이 접속자에게 없다면 운영체제의 기본 글꼴로 표시된다.
• #RRGGBB 형식의 16진수 모음을 사용하거나 rgb(red, green, blue) 형태를 사용한다.
  • RR, GG, BB : 00~ff의 16진수 숫자값 (00 == 어두움, ff == 밝음)
  • red, green, blue : 0~255 사이의 숫자값 (0 == 어두움, 255 == 밝음)

※ 사용 가능한 속성

• face : 글꼴 지정 
• color : 글씨 색상 지정
• size : 글씨 크기 지정

<font [face="글꼴이름"] [color="색상값"] [size="크기"]>~내용~</font>
<!-- 속성은 생략 가능하다 -->

<font size="1">크기=1</font> <br />
<font size="3" color="#ff6600">크기=3, 색상=오렌지</font> <br />
<font size="5" face="맑은고딕">크기=5, 글꼴=맑은고딕</font> <br />
<font size="7" color="#0000ff" face="바탕">크기=7, 색상=파랑, 글꼴=궁서</font>

 

2) bold 태그

• <b></b>태그를 사용하여 글씨를 굵게(볼드체)로 표시해준다.

<b>볼드체로 화면에 보여진다.</b>

 

3) strong 태그

• <b> 태그는 그냥 글씨를 굵게 표시해주지만, <strong></strong> 태그는 글씨를 굴게 표현하는 것 외에도 강조해서 읽어준다. (장애인을 위함)

<strong>강조하는 글씨체로 화면에 보여진다.</strong>

 

4) italic 태그

• <i></i> 태그를 사용하여 글씨를 기울어 보이게(이탤릭체) 해준다.

<i>이탤릭체로 화면에 보여진다.</i>

 

5) em 태그

• <i> 태그와 같이 기울어 보이게하는 역할을 하지만, <em></em> 태그는 강조를 의미한다.

<em>em 태그는 이탤릭체 처럼 보여지지만, 이건 강조를 의미한다.</em>

 

6) small 태그

• <small></small> 태그를 사용하여 글씨를 작게 만들어 준다.

<p>텍스트가 <small>작게</small> 보이게 된다</p>

 

7) mark 태그

• <mark></mark> 태그를 사용하여 형광펜으로 색칠한 것 같은 효과를 내준다.

<p>이곳을 <mark>형관펜으로 칠한 효과</mark>를 내준다.</p>

 

8) del 태그

• <del></del>(delete) 태그를 사용하여 글자 가운데 선을 그어준다.

<p>제품 할인 <del>3만원</del> 2만원</p>

 

9) ins 태그

• <ins></ins>(insert) 태그를 사용하여 글자에 밑줄을 그어준다.
• <u></u> 태그도 같은 효과를 내준다.

<p>내가 좋아하는 색은 <ins>파란색</ins> 입니다.</p>
<p>내가 좋아하는 색은 <u>분홍색</u> 입니다.</p>

 

10) sup, sub 태그

• (superscript) : 윗 첨자
• (subscript) : 아래 첨자

<p>X<sup>2</sup></p>
<p>X<sub>2</sub></p>

 

11) span 태그

• <span></span> 태그는 문장 단위로 텍스트 영역을 지정하지만, 그 자체로는 아무 역할도 하지 못한다.
• CSS가 적용되기 위한 영역을 구성하기 위해 사용한다.

<span>HTML에서는 아무 역할도 하지 않는다.</span>
<span>CSS 스타일을 지정할 때 사용한다.</span>

 

※ 위 태그들은 서로 다양한 조합으로 사용 가능하다.

 

2. 페이지 이동처리 (링크)

1) anchor 태그 (Link 태그)

• <a></a> 태그를 사용하여 미리 지정된 특정 페이지로 연결시켜준다. (특정 글자에 밑줄이 생기고 링크를 걸어준다)
  • 특정 웹사이트(웹페이지)로 이동
  • 동일한 페이지 내에서 특정 콘텐츠가 있는 위치로 이동
  • 같은 사이트 내의 파일을 지정할 경우는 상대경로, 절대경로 사용 가능하다.
  • 웹에서 절대경로는 http:// 로 시작되는 온라인 상의 주소를 의미 (다른 사이트 주소를 명시할 경우 절대경로 형식만 가능)
  • 자바스크립트 함수 호출

※ 사용 가능한 속성

• href(hyper reference) : 링크의 역할을 한다.
• target
  • _self : 기본 값으로 같은 페이지에서 링크가 열린다.
  • _blank : 새 페이지에서 링크가 열린다.
• stryle
  • text-decoration:none : 링크에 밑줄을 없애준다.

<a href="http://www.naver.com" target="_blank" style="text-decoration:none;">네이버로 이동</a>
<!-- 새페이지로 네이버가 열리는 링크 지정 (밑줄제거) -->

 

2) 스크롤 이동

• 동일한 페이지 내에서 특정 콘텐츠가 있는 위치로 이동
• href 속성에 #을 지정한 경우 현재 페이지의 맨 위(상단)로 스크롤 이동한다.
• href 속성에 #id값 을 지정한 경우 해당 id 값을 갖고 있는 HTML 태그의 위치로 스크롤 이동한다.

<a href="#last">last가 id값으로 있는 태그로 이동</a>

 

3) 데이터 링크

• 이메일 보내기

<a href="mailto:이메일주소">메일보내기</a>

• 전화걸기(스마트폰)

<a href="tel:전화번호">전화걸기</a>

 

4) address 태그

• <address></address> 를 사용하여 주소를 나타낸다.
• adress 태그는 기본적으로 이탤릭체로 나온다.

<address>
  <a href="mailto:loinsective@naver.com">copyright &copy; All right resurved</a>
</address>

 

3. 표 그리기

1) table 태그

• <table></table> 태그를 사용하여 웹상에 표를 넣는다.
• 테이블 태그에는 하위 태그들이 존재한다.
  • 영역 구문이 모호할 경우 아래 하위 태그들은 생략할 수 있다. 
  • <thead></thead> : 각 표에서 열마다 제목을 넣는다.
  • <tbody></tbody> : 실질적인 표의 데이터가 들어간다.
  • <tfoot></tfoot> : 표 전체에 대한 집계를 넣는다.
    • tr,td,th는 필요한 만큼 반복 사용 가능하다. 
    • <tr></tr>(table row) : 하나의 행을 만들어 준다.
    • <td></td>(table data) : 하나의 열을 만들어 준다.
    • <th></th>(tabel heading) : 볼드체로 바꿔준다.
• <caption></caption> 태그는 테이블의 캡션을 정의한다. (표의 제목을 나타난다)
  • 테이블 태그 안에서 사용해야 표의 제목 역할을 한다.

※ 사용 가능한 속성

• border : 표 선의 굵기를 지정한다.
• width : 표의 넓이를 지정한다.
• height : 표의 높이를 지정한다.
• align : 표의 위치를 지정한다. (left / centet / right)
• colsapn : 입력한 숫자 칸 만큼 열을 병합한다. (가로병합, td 나 th 태그에서 사용가능)
• rowspan : 입력한 숫자 칸 만큼 셀 병합을 한다. (세로병합, td 나 th 태그에서 사용가능)
• cellpadding : 칸과 내용 사이의 여백을 조정한다.
• cellspacing : 칸과 칸 사이의 여백을 조정한다.
  • 여백과 관련된 속성은 table 태그에서 사용 가능하며, 일반적으로 0으로 설정하고 CSS로 디자인한다.
  • 최근 웹 브라우저에서 여백관련 속성을 명시하지 않는 경우 기본값이 0으로 지정된다.

<table border="굵기" width="넓이" align="left|center|right">   ← 표의 영역 지정
  <thead>         ← 제목영역
    <tr>          ← 행(줄)
      <th width="넓이" align="left|center|right">내용</th>  ← 열(th=제목용도, td=내용용도)
      <td>내용<td>
    </tr>
  </thead>
  <tbody>         ← 내용영역
    <tr>
      <td>내용</td>
    </tr>
  </tbody>
  <tfoot>         ← 하단영역
    <tr>
      <th>내용</th>
    </tr>
  </tfoot>
</table>

 

4. Block-level 요소와 Inline 요소

1) Block-level

• HTML 크기에 상관 없이 한 줄 전체를 차지한다.
• 사용시 새로운 줄에서 시작하고, 좌우 양쪽으로 모든 너비를 차지한다.
• 대표적으로 h(n), p, div, table, ul, ol, li, address, form 등이 있다.

 

2) Inline

• 자기 자신이 가지고 있는 넓이 만큼 차지한다.
• 사용시 새로운 줄을 만들지 않고 필요한 너비만 차지한다.
• 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없다. (줄 바꿈 유발)
• 대표적으로 a, b, button, del, i, img, input, label, script, select, span, strong 등이 있다.