2021. 05. 12(수) TIL

Dylan·2021년 5월 12일

TIL html

HTML

HTML

HyperText Markup Language
- 웹용 문서를 작성할 때 사용되는 언어
- HyperText : 문서의 링크를 클릭하면 연결된 문서로 즉시 이동할 수 있는 기능
- Markup : 문서에서 어느 부분이 제목인지, 본문인지, 링크인지, 그림인지 등을 표시할 때 마크업(태그)을 사용한다.
- 마크업(태그)을 사용해서 작성된 문서이며, 링크를 클릭하면 연결된 다른 문서로 즉시 이동할 수 있는 문서를 작성할 때 사용되는 언어

https://w3schools.com >> HTML 튜토리얼 사이트

HTML의 구성요소

태그
- <와 >를 이용해서 만든다.
- 예) <a>, <p>, <table>, <ul>, <input>, <img>, <h1>, <body>, <html>
- 태그명은 소문자로 적는다.
- 태그는 여는 태그, 닫는 태그가 있다.
  - 여는 태그 : <a> <table> <ul> <h1>
  - 닫는 태그 : </a> </table> </ul>
  - 태그를 작성할 때는 여는 태그와 닫는 태그를 짝을 맞춰서 정확히 입력해야 한다.
    - 올바른 예)
```
  <h1>html 수업</h1>
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>
```
    - 올바르지 않은 예)
```
  <h1>html 수업
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>
```
- 태그들 사이에는 부모태그, 자식태그의 관계를 가지는 태그가 있다.
  - 자식태그는 부모태그 안에서만 사용할 수 있다.
  - 자식태그를 부모태그 안에 적을 때는 들여쓰기 한다.
    - 올바른 예)
      - 부모태그(ul)태그 안에 자식태그(li)를 적었다.
```
  <ul>
    <li>커피</li>
    <li>쥬스</li>
  </ul>
```
    - 올바르지 않은 예)
      - 부모태그 밖에 적었다.
```
  <ul></ul>
  <li>커피</li>
  <li>쥬스</li>
```
      - 부모태그 없이 적었다.
```
  <li>커피</li>
  <li>쥬스</li>
```
- 태그는 속성과 함께 사용할 수 있다.
  - 속성은 태그와 관련된 부가적인 정보, 추가기능을 정의한다.
  - 형식 : <태그명 속성명="속성값" 속성명="속성값">
  - 속성명과 속성값은 붙여서 적고, 속성값은 ""사이에 적는다.
  - 동일한 속성명을 여러 번을 적을 수 없다.
  - 속성명을 적을 때는 특별한 순서가 없다.
    - 작성예)
```
  <img src="images/logo.png" width="160" height="70">
```

속성

태그마다 고유한 속성을 가지고 있다.
속성은 원래 사용목적에 맞게 사용해야 한다.
어떤 속성은 속성값이 미리 정해진 것들도 있다.

  <input type="속성값">
  <!--
    속성값은 text, password, radio, checkbox, date, number, hidden, file, button, submit, reset ...
  -->

data-*로 시작하는 속성은 임의로 추가할 수 있다.

  <img src="images/logo.png" data-title="회사로고" data-creator="홍길동" data-pubdate="2019-10-31">

HTML 문서의 구조

<!doctype html>
<html lang="ko">
<head>
<!-- 웹브라우저가 html문서를 해석할 때 필요한 정보를 정의하는 곳 -->
</head>
<body>
<!-- 실제로 화면에 표시되는 내용이 정의되는 곳 -->
</body>
</html>

<!doctype html>
- html 문서의 유형을 선언하는 선언문이다.
- "이 문서는 html5 작성규칙을 준수하는 HTML 문서다"라는 의미를 나타냄
<html> ~ </html>
- html 문서의 루트 태그
- 모든 html문서는 루트 태그를 오직 하나만 가질 수 있다.
- 모든 태그는 태그 안에 작성해야 한다.
- 태그는 와 태그를 자식태그로 가진다.
- 태그는 lang속성을 가진다.
- lang 속성은 문서에서 사용되는 언어를 지정할 수 있다.
- lang 속성에 지정된 언어와 브라우저의 기본언어가 다르면 번역옵션이 표시된다.
  - 한국어:ko
  - 영어:en
  - 일본어:ja
  - 중국어:zh
  - 프랑스어:fr
  - 독일어:de
<head> ~ </head>
- 웹브라우져가 문서를 해석하는데 필요한 정보를 제공하는 태그
  - 문서의 제목 : <title>문서의 제목</title>
  - 문자 인코딩 방식 : <meta charset="utf-8">
  - 스타일시트 : <link rel="style" href="style.css">
  - 기타 : 자바스크립트소스
- <head>태그에 정의된 태그는 화면에 표시되지 않는다.
<body> ~ </body>
- 웹브라우저에 실제로 표시될 내용을 포함하는 태그
- 앞으로 배우게 될 태그들은 대부분 <body> 태그 안에서 사용하게 될 태그

paragraph 태그(단락 태그)
<p> 태그는 본문의 내용을 담는 태그를 만든다.
웹페이지에서 기사의 내용, 영화의 줄거리, 책의 소개글, 게시글의 본문, 블로그의 내용, 상품의 상세정보 등을 담을 때 사용한다.
<p>태그와 <p>태그는 단락을 구분짓는 빈 줄이 추가된다.

  <p>웹 페이지는 크게 정적페이지와 동적페이지로 나눌 수 있다. 정적 웹 페이지는 컴퓨터에 저장된 텍스트 파일을 그대로 보는 것이고, 
    동적웹페이지는 저장된 내용을 다른 변수로 가공 처리하여 보는 것이다.</p>

목록을 담는 태그

Unordered List 태그(순서없는 목록 태그)
- <ul> 태그는 순서없는 목록을 만든다.
- list item 태그
  - <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
- <ul>태그는 자식태그인 <li>태그를 가진다.
- <li>태그가 컨텐츠를 가진다.
- 뉴스목록, 상점에서 파는 상품목록, 부서에 근무중인 사원목록, 취미 목록

  <h3>국내도서</h3>
  <ul>
    <li>소설</li> 
    <li>시</li> 
    <li>인문</li> 
    <li>국어/외국어/사전</li> 
    <li>학교교재</li> 
    <li>과학기술</li> 
  </ul>

Ordered List 태그(순서있는 목록 태그)
- <ol> 태그는 순서있는 목록을 만든다.
- list item 태그
  - <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
- <ol>태그는 자식태그인 <li>태그를 가진다.
- <li>태그가 컨텐츠를 가진다.
- 검색어 순위 목록, 음원사이트의 음원차트 목록, 요리의 레시피, 게임의 순위

  <h3>영화 얘매순위</h3>
  <ol>
    <li>도굴</li> 
    <li>삼진그룹 영어토익반</li> 
    <li>내가 죽던 날</li> 
    <li>애비규환</li> 
    <li>킹덤 오브 헤븐</li> 
    <li>노트북</li> 
  </ol>

Description List 태그(정의 목록 태그)
- <dl> 태그는 정의목록을 만든다.
- defined term 태그
  - <dt> 태그는 정의 목록의 항목을 담는 태그를 만든다.
- describe term 태그
  - <dd> 태그는 정의 목록의 항목에 대한 데이터를 담는 태그를 만든다.
- <dl>태그는 자식태그인 <dt>와 <dd>를 가진다.
- <dt>와 <dd>가 한 쌍이다.
- <dt>와 <dd>중에서는 <dt>를 먼저 적는다.
```
  <h3>도서정보</h3>
  <dl>
    <dt>제목</dt><dd>이것이 자바다</dd>
    <dt>저자</dt><dd>신용권</dd>
    <dt>출판사</dt><dd>한빛미디어</dd>
    <dt>쟝르</dt><dd>IT/모바일</dd>
    <dt>가격</dt><dd>35,000 원</dd>
    <dt>할인가격</dt><dd>32,000 원</dd>
  </dt>
```

링크를 담는 태그

<a> 태그는 링크를 생성하는 태그다.
형식

  <a href="주소" target="어디에서 오픈할 것인지" title="풍선도움말">화면에 표시될 텍스트</a>

href는 필수 속성입니다.
target, title은 생략가능합니다.

<a>태그의 주요 속성
- href : 연결될 문서의 주소를 정의한다.
  - 외부사이트 주소
```
  <a href="http://www.daum.net">다음</a>
```
  - 내부문서 주소
```
  <a href="/course/best.html">베스트셀러</a>
```
  - 같은 문서내 특정 위치
```
  <a href="#top">문서의 처음으로 이동</a>
```
- target : 연결된 문서를 어디에서 오픈할 것인지를 정의한다.
  - target="_blank" : 링크된 페이지를 새 창이나 새 탭에서 연다.
  - target="_self" : 링크된 페이지를 현재 창이나 탭에서 연다.(기본값)
- title : 풍선도움말에 표시할 내용을 정의한다.

표를 담는 태그

<table> 태그
- 표를 생성하는 태그
<thead> 태그
- 표의 헤더부를 생성하는 태그
<tbody> 태그
- 표의 바디부를 생성하는 ㅐ그
<tfoot> 태그
- 표의 푸터부를 생성하는 태그
<tr> 태그
- 표에 새로운 행을 추가하는 태그
<th> 태그, <td> 태그
- 표의 헤더칸, 표의 데이터칸을 행에 추가하는 태그
<table> 태그는 <thead>, <tbody>, <tfoot> 태그를 자식태그로 가진다.
<table> 태그는 <tr> 태그를 자식태그로 가진다.
<thead>, <tbody>, <tfoot> 태그는 <tr> 태그를 자식태그로 가진다.
<tr> 태그는 <th>, <td>태그를 자식태그로 가진다.

  <h3>도서 주문정보</h3>
  <table>
    <thead>
      <tr>
        <th>순번</th>
        <th>제목</th>
        <th>가격</th>
        <th>구매수량</th>
        <th>구매금액</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>이것이 자바다</td>
        <td>35,000 원</td>
        <td>1 권</td>
        <td>35,000 원</td>
      <tr><tr>
        <td>2</td>
        <td>스프링 인 액션</td>
        <td>28,000원</td>
        <td>2 권</td>
        <td>56,000 원</td>
      <tr>
      <tr>
        <td>3</td>
        <td>정규표현식 핸드북</td>
        <td>10,000 원</td>
        <td>1 권</td>
        <td>10,000 원</td>
      <tr>
    </tbody>
  </table>

이미지를 담는 태그

<img 태그> 태그는 이미지를 표시하는 태그다.
이미지를 표현할 때 사용합니다.
컨텐츠를 가지지 않는 태그다.

  <img src="images/logo.png" alt="로고이미지" width="64px" height="64px">

주요 속성
- src : 표시할 이미지파일의 경로와 파일명을 정의한다.
- alt : 이미지에 대한 설명을 적는다. (웹 접근성)
- width : 이미지의 너비
- height : 이미지의 높이

포맷팅된 텍스트를 담는 태그

<strong> 태그
- 중요한 텍스트는 <strong>태그에 담는다.
- <b&t; 태그를 대신해서 사용된다.
<em> 태그
- 강조하고 싶은 텍스트는 <em>태그에 담는다.
- <i> 태그를 대신해서 사용된다.
<del> 태그
- 삭제된 내용은 <del>태그에 담는다.
<small> 태그
- 작게 표현할 태그는 <small>태그에 담는다.
<mark> 태그
- 하이라이트시킬 내용은 <mark>태그에 담는다.

Dylan

이전 포스트

2021. 05. 11(화) TIL

다음 포스트

2021. 05. 12(수) TIL

HTML

HTML

https://w3schools.com >> HTML 튜토리얼 사이트

HTML의 구성요소

HTML 문서의 구조

태그

html 문서

제목을 담는 태그

본문 내용을 담는 태그

목록을 담는 태그

링크를 담는 태그

표를 담는 태그

이미지를 담는 태그

포맷팅된 텍스트를 담는 태그

2021. 05. 11(화) TIL

2021. 05. 14(금) TIL

0개의 댓글