TIL 02___HTML basic 2(tag)

Young A·2021년 10월 18일
0

html

목록 보기
2/3
post-thumbnail
  • 웹 페이지에 다양한 내용을 담을수 있는
    자주 사용되는 태그들에 대해 알아본다.

▶︎ 텍스트 입력하기

기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그 알아보기

<hn> 제목 </hn>
heading을 줄임말, n의 자리에는 1(가장 큰 제목)~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.


<p>텍스트 단락 </p>
텍스트 앞,뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.

  • 에디터에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.
  • 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄 바꿈된다.

<br>줄바꿈
줄바꿈, 단독으로 사용하므로 닫는 태그가 필요없다.


<blockquote>내용 인용 </blockquote>
다른 사람의 말이나 책의 내용을 인용할 때 흔히 큰 따옴표("")를 대신하여 사용


<strong> 굵게 강조할 텍스트 </strong>
경고나 주의 사항처럼 중요한 내용을 강조할 때 사용


<b> 굵게 표시할 텍스트 </b>
단순히 글자만 굵게 표시할 때 사용


<em> 이탤릭체로 강조할 텍스트</em>
emphasis의 줄임말, 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용한다.


<i> 이탤릭체로 표시할 텍스트</i>
생각이나 용어, 관용구 등에 사용한다.


<ins> 내용을 편집할 때 추가한 내용을 표시 </ins>


<del> 내용을 편집할 때 삭제한 내용을 표시 </del>


▶︎ 목록 만들기


<ol>순서 있는 목록을 만들때 </ol>
<li>순서 있는 목록의 각 항목을 만들때 </li>

<ol>ordered list의 줄임말, 어떤 과정을 순서대로 설명할 때 사용한다.
기본적으로 숫자가 자동으로 넘버링됨.

  • <ol>태그의 속성값 (ex.<ol type="a"> </ol>)
    type = "1" 숫자(기본값)
    type = "a" 영문 소문자
    type = "A" 영문 대문자
    type = "i" 로마 숫자 소문자
    type = "I" 로마 숫자 대문자

* 단축키: ol>li * 반복횟수 + tab


<ul>순서 없는 목록을 만들때 </ul>
<li>순서 없는 목록의 각 항목을 만들때 </li>

<ul>unordered list의 줄임말, 항목의 순서가 중요하지 않을 때 사용한다.
항목 앞에 작은 원인 블릿(∙)표기됨.

* 단축키: ul>li * 반복횟수 + tab


<dl>설명 목록 </dl>
<dt>설명 목록의 이름(제목)부분을 지정 </dt>
<dd>설명 목록의 값(설명)부분을 지정 </dd>

<dl>
  <dt>이름(제목)</dt>
  <dd>값(설명)</dd>
</dl>

▶︎ 표 만들기

표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다.
셀(cell)은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미한다.

<table>표의 시작과 끝을 알려주는 </table>


<caption>표의 제목(표 위쪽 중앙에 표시됨) </caption>

<table>
  <caption>표 제목</caption>
</table>

<tr>표의 행을 만드는 </tr>


<td>행 안에 있는 셀을 만드는 </td>

<table>
  <tr>
    <td>1행 2열</td>
    <td>1행 2열</td>
  </tr>
</table>
  • 표의 제목 행에 셀을 만들때는 <th> 태그 사용
    진하게 표시되고, 셀 안에서 중앙에 배열되므로 가독성이 좋아진다.

<thead>표의 구조(제목)를 지정하는 </thead>
<tbody>표의 구조(본문)를 지정하는 </tbody>
<tfoot>표의 구조(요약)를 지정하는 </tfoot>


<rowspan>표의 행을 합치는 </rowspan>
<colspan>표의 열을 합치는 </colspan>

  • 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로,
    <td>태그나 <th>태그에서 이루어진다.

<col>표의 열(1개만)을 묶어주는 </col>
<colgroup>표의 열(2개 이상)을 묶어주는 </colgroup>

<colgroup>
  <col>
</colgroup>
  • <colgroup>, <col>태그는 반드시 <caption>태그 다음에 사용해야 한다.
    그리고 <col>태그를 사용할 때는 <colgroup>태그 안에 <col>태그를 포함해 표 전체 열의 개수만큼 <col>태그를 넣어야 한다.

▶︎ 이미지 삽입하기


<img>이미지 표시 </img>

  • src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할을 한다.
  • alt속성에는 화면 낭독기등에서 이미지를 대신해서 읽어줄 텍스트를 입력한다.
<img src="강아지 이미지.jpg" alt="강아지">
  • 이미지 크기를 조절하는 width(너비), height(높이)속성
    이미지 크기를 표현하는 단위: %, px (width="50%", width="50")

▶︎ 오디오와 비디오 삽입하기


<object>오디오, 비디오, 자바애플릿, PDF 등 멀티미디어 표시 </object>

<object width="너비" height="높이" data="파일"></object>
  • data속성에 보여줄 멀티미디어 파일을 지정하고 width,height 속성을 사용해 플레이어의 크기를 지정한다.

<embed>오디오, 비디오, 이미지 등 다양한 멀티미디어 표시

<embed src="파일 경로" width="너비" height="높이">
  • 닫는 태그가 없다.
    HTML초기 버전부터 사용해 <audio>,<video>,<object>태그를 지원하지 않는 웹브라우저를 고려해야 한다면 <embed>태그를 사용한다.

  • 멀티미디어 파일 종류
    비디오(확장자: mp4, webm)
    오디어(확장자: mp3, mp4, m4a)


<audio>오디오 표시</audio>
<video>오디오 표시</video>

<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
  • <audio><video>태그의 속성
controls: 플레이어 화면에 컨트롤 바를 표시한다.
autoplay: 오디오나 비디오를 자동으로 실행한다.
loop: 오디오나 비디오의 반복 재생한다.
muted: 오디오나 비디오의 소리를 제거한다.
preload: 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 사용할 수 있는 값은 auto,metadata,none이다. 기본값은 preload="auto"
width,height: 비디오 플레이어의 너비와 높이를 지정한다. 둘 중에서 하나만 지정할 경우 자동으로 계산해서 표시된다.
poster="파일 이름": <video>태그에서 사용되는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.
<audio src="오디오 파일 경로" controls></audio>
<video src="비디오 파일 경로" controls width=100%></video>
<video src="비디오 파일 경로" width=100% muted autoplay loop></video>

▶︎ 하이퍼링크 삽입하기


<a>링크를 삽입한다 </a>
웹 사이트에서 링크의 기능은 가장 많이 사용되며, 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.

<a href="링크할 주소"> 텍스트 또는 이미지 </a>
  • 링크를 새 탭에서 열어주는 target(_blank)속성
  <p><a href="링크할 주소" target="_blank"> 텍스트 또는 이미지 </a></p>
  • 링크를 열기 전에 툴팁으로 알려주는 title속성
  <p><a href="링크할 주소" target="_blank" title="naver.com"> 텍스트 또는 이미지 </a></p>

★ 태그는 BOX와 ITEM(사용자들에게 보여지는 부분)으로 구분할 수 있다.

  • BOX:
    header section footer article nav div aside span
    main form...

  • ITEM:
    a video button audio input map label canvas
    img table...

[참조 링크 1]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
[참조 링크 2]
https://validator.w3.org/#validate_by_input



🙂 태그 정리를 해놓으니 머릿속이 정리가 조금은 되는것 같다. 오..좋은것 !

profile
야금야금. 즐겁게, 개발 🙂

0개의 댓글