본문 바로가기
HTML

HTML

순두부 호랑이 2022. 8. 15. 20:59
728x90
SMALL

[ HTML(Hyper Text Markup Language)란?

 

- 웹 페이지, 웹 앱을 만들기 위한 기본 요소.

 

- Markup Language 라 함은 태그(tag)로 이루어진 단순한 프로그래밍 언어를 의미한다.

  -> 동적인 기능은 없다.

  -> Look and Feel은 기본형만 제공한다.

 

- 다양한 유형의 태그(tag)가 있어서 레이아웃 및 다양한 정보를 표현할 수 있다.

 

[ HTML 문서의 기본 구조 ]

<!DOCTYPE html>    <-  HTML 5.

<html lang = "en">

<head>

          <meta content = "text/html; charset=utf-8"/>

          <title> Title </title>

</head>

<body>

           <h1> 타이틀. <h1>

           <p> 문단 내용. </p>

</body>

</html>

 

[ HTML에서의 주석 ]

- 주석은 프로그램을 설명하는 용도로 사용되며 실제 실행은 되지 않는다.

- HTML에서 주석은 원하는 위치에서 <!--와-->를 사용해서 삽입할 수 있다.

  <!-- 이것은 HTML 주석 입니다. -->

- HTML에서 주석은 단일 행 또는 여러 행에 걸쳐서 있을 수 있다.

  <!--

    주석 행1

    주석 행2

  -->

 

[HTML의 태그]

- 일반적으로 여는 태그와 닫는 태그의 짝으로 이루어져 있다.       <태그> 내용 < /태그>  예). <h1> Introduction </h1>

 

- 여는 태그와 닫는 태그 구별없이 <img>, <br>, <hr>, 등과 같이 한쪽만 있는 경우도 있다.  예). < img src="hello.png" >

 

- 태그는 다양한 속성(attribute)를 가질 수 있다.  -> 속성은 왼쪽 태그에서만 정의된다.  -> 속성은 항상 key=value 와 같은 형태로 정의된다.예). <p lang = "en"> Let's learn about Python programming. </p>

 

- 태그를 다음과 같은 두 가지 유형으로 구분할 수도 있다.1) Inline level tag: 줄이 바뀌지 않고 가로 방향으로는 필요한 만큼만 차지한다.    예) <span>, <a>, <img>, 등.2) Block level tag: 줄이 바뀌고 가로 방향으로 최대 너비를 차지한다.    예) <div> , <p>, <h1> ~ <h6>, <form> 등

 

[ HTML의 태그: <P> ~ </P> ]

- 단원(paragraph)를 나타내는 태그이다.   예) <p> 파이썬 프로그래밍에 대해서 알아봅시다. </p>- <p> 태그는 다양한 속성(attribute)를 가질 수 있다.   예) <p lang = "en"> Let's learn about Python programming </p>- <span> ~ </span>, <div>~</div>태그도 유사한 용도로 사용된다.=>레이아웃을 잡아주는 역할을 한다.

 

[ HTML의 태그: <h__> ~ </h__> ]

- 폰트크기에 정해서 타이틀로 사용할 수 있다.

- <h1> 에서 <h6>까지 있다.

예) <h1> 제일 큰 폰트 </h1>

      <h2> 두 번째로 큰 폰트 </h2>

      <h3> 세 번째로 큰 폰트 </h3>

                           ---

      <h6> 여섯 번째로 큰 폰트 </h6>

 

[ HTML의 태그: <ul> ~ </ul> ]

- Unordered list를 만들어 준다.

- <li> ~ </li>로 리스트 아이템을 추가할 수 있다.

   예) <ul>

        <li> 하나. </li>

        <li> 둘. </li>

        <li> 셋. </li>

    </ul>

 

->

  • 하나.
  • 둘.
  • 셋.

[ HTML의 태그: <ol> ~ </ol> ]

- Ordered list를 만들어 준다.

- <li> ~ </li>로 리스트 아이템을 추가할 수 있다.

 

예). <ol>

      <li> 하나. </li>

      <li> 둘. </li>

      <li> 셋. </li>

</ol>

 

->

1. 하나.

2. 둘.

3. 셋.

 

[ HTML의 태그: <a> ~ </a> ]

 

- 다른 페이지 또는 사이트로 가는 링트를 만들어 준다.

- href 속성에 이동 링트를 넣을 수 있다.

예). <a href = "http://www.naver.com"> 네이버 </a>     -> 네이버

- target 속성에 "_blank"를 넣어주면 이동시 새로운 탭이 열린다.

예). <a hrefA = "http://www.naver.com" target = "_blank">네이버</a>

 

[ HTML의 태그: 기타 태그들]

 

  • <img src = "~" alt = "~">     이미지 삽입. src= 이미지 파일 경로. alt= 오류 발생시 보여주는 문장.
  • <table> ~ </table>              테이블. <thead>~</tead>는 헤더, <tbody>~</tbody>는 아래 내용 부분                                                                           <th>~</th>로 헤더의 열, <td>~</td>로 내용 부분의 열 구분.                                                                                           <tr>~</tr>로 행 구분.
  • <input>                               입력 필드. <label> ~ </label>을 앞에 두어서 레이블을 적용 할 수도 있다.                                                                       type 속성의 값은 "text", "email", "date", "submit" (버튼) 등이 될 수 있다.
  • <textarea>                         텍스트 전용 입력 필드.
  • <button> ~ </button>         버튼.
  • <select> ~ </select>           Dropdown 선택 메뉴. 개개 아이템은 <option> ~ </option>으로 입력한다.

[ HTML의 태그: 폰트 관련 및 기타 태그들]

 

  • <em> ~ </em>     강조 폰트(이탤릭이 기본형임).
  • <strong> ~ </strong>         <b>~</b>             볼드.
  • <i>~</i>              이탤릭
  • <u> ~ </u>          밑 줄.
  • <strike> ~ </strike>     가운데 가로 줄.
  • <br>                라인 브레이크.

[ HTML의 태그: 인용 태그 등]

 

  • <blockquote> ~ </blockquote>    블록 전체가 들여쓰기로 표현되는 인용.
  • <abbr> ~ </abbr>                        준말 또는 머리글자. title 속성에 설명을 넣을 수 있다.                                                                                                      예). <abbr title="Cascading Style Sheet">CSS</abbr>
  • <cite>~</cite> 이탤릭으로 표현되는 인용.

[ HTML 5의 Semantic태그: ]

- 개발자나 브라우저에 있어서 그 의미가 명확한 태그이다.

- 특별한 기능이 있는 것은 아니지만, SEO, 유지 보수의 용이성 등의 이유로 사용된다.

  • <header> ~ </header>       큰 제목, 주제, 이름 등 표현
  • <footer> ~ </flooter>          페이지 아래에 부가적인 정보 제공. 작성자, 저작권 등 표현
  • <main> ~ </main>             주요 내용.
  • <aside> ~ </aside>           주요 내용과 직접적인 연관성이 없는 내용. (*)                                                                                                                  예). 광고, 연관 페이지로의 링크 등.
  • <section> ~ </section>     <main>안에서의 작은 구분. 여러 개의 연관된 <article>을 묶어주는 역할을 한다.
  • <article> ~ </article>         <main>안에서의 작은 구분. <div>를 사용하는 것보다 명확하다.
  • <nav> ~ </nav>                다른 페이지로의 링크를 보여줌. 메뉴, 목차, 색인의 역할을 하기도 함

(*)  HTML 만으로 오른편 또는 왼편 위치를 임의로 배치할 수는 없다.

 

[실습#0101a]

<!DOCTYPE html>
<html lang="en">
    <!-- 이 행은 주석.-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이 것은 타이틀 태그 내용이다!</title>
</head>
<!-- 여기까지가 헤드.-->

<body>
<h1> 제 1장:개요. </h1>
<h2> 1.1 단원.</h2>
<p>여기에는 개요 내용이 들어감.</p>    

<h2> 1.2. 단원.</h2>
<p> 데이터 분석에 대해서 배워 봅시다.</p>

<h1> 제 2장: HTML.</h1>
<h2> 2.1. 단원. </h2>
<h3> 2.1.1. 소단원.</h3>
<p> HTML을 배워 봅시다.</p> 
</body>
<!-- 여기까지가 바디.-->
</html>
<!--문서 끝~-->

[실습#0101b]

<!DOCTYPE html>
<html lang="en">

<!--이 행은 주석.-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이 것이 타이틀 태그 내용이다!</title>
</head>
<!-- 여기까지가 헤드.-->
<body>
<h1> 헤더 1 </h1>
<h2> 헤더 2 </h2>
<h3> 헤더 3 </h3>
<h4> 헤더 4 </h4>
<h5> 헤더 5 </h5>
<h6> 헤더 6 </h6>
<p> HTML에 대해서 배워 봅시다. </p>
<P> 이제 span 태그로 <span style="color:red;">색을 바꾸어</span>봅시다. </P>

<div>
다음은 unordered list 이다:
<ul>
    <li> 아이템 하나. </li>
    <li> 아이템 둘. </li>
    <li> 아이템 셋. </li>
    <li> 아이템 넷. </li>
    <li> 아이템 다섯. </li>
</ul>
</div>

<div>
다음은 ordered list이다:
<ol>
    <li> 아이템 하나. </li>
    <li> 아이템 둘. </li>
    <li> 아이템 셋. </li>
    <li> 아이템 넷. </li>
    <li> 아이템 다섯. </li>
</ol>
</div>

<div>
다음은 ordered list인데 색상을 넣어 본다:
<ol>
    <li> <span style="color: red;"> 아이템 하나. </span> </li>
    <li> <span style="color: blue;"> 아이템 둘. </span> </li>
    <li> <span style="color: green;"> 아이템 셋. </span> </li>
    <li> <span style="color: orange;"> 아이템 넷. </span> </li>
    <li> <span style="color: violet;"> 아이템 다섯. </span> </li>
</ol>
</div>

<p>
이 것은  <a href="https://www.naver.com" target="_blank"> 네이버</a>로 가는 하이퍼링트이다. <br> <br>
이 것은  <a href=".\ex_0101a.html"> 로컬 파일</a>로 가는 하이퍼링트이다. <br>  <br>
폰트를 <em> 한번 바꾸어 </em> 보도록 한다: 이것은 <strong> 볼드</strong> 폰트이고, 이 것도 <b>볼드</b>폰트이며,
이 것은 <i> 이탤릭 </i> 폰트이고, 또한 이 것은 <u> 밀줄친 </u> 폰트이다. 마지막으로 이것은 <strike>가운데 줄</strike>이다.
</p>

<div>

</body>
<!-- 여기까지가 바디.-->
</html>
<!--문서 끝~-->

[실습#0101c]

<!DOCTYPE html>
<html lang="en">
<!-- 이 행은 주석. -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 여기까지가 헤드.-->
<body>
    
    <div>
        <p> 아래와 같이 테이블을 만들어 보도록 한다.</p>
    </div>

    <table>
    <thead>
    <tr>
      <tr> Column 1</tr> <tr> Column 2</tr> <tr> Column3</tr>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td> (1,1)</td> <td> (1,2)</td> <td>(1,3)</td>
    </tr>

    <tr>
       <td>(2,1)</td> <td>(2,2) </td> <td> (2,3) </td>
    </tr>
    </tbody>
    </table>
    </div>

    <div>

    <hr>

    그리고, 다음 이미지도 출력해 본다. <br>
    <figure>
    <img scr="./image/fig_01.png" width="250" height="200" alt="Figure not found in this folder!!!"> <br>
    <figurecaption>위는 막대그래프를 보여주는 그림.</figurecaption>
    </figure>
    </div>

    <hr>
    <div>
    들여쓰기 인용:
    <blockquote>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </blockquote>

    이탤릭 인용 : <br> <br>
    <cite>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </cite>
    <br> <br>
    준말의 예시: <abbr title="HyperText Markup Language">HTML</abbr>은 HTML 문서의 layout을 정의해 준다.
    <abbr title="Cascading style sheets">CSS</abbr>는 HTML 문서의 look and feel을 정의해 준다.
    </div>

    <hr>

    <div>
        <br>
        마지막으로 <span style="color: blue;">input</span>태그,
        <span style="color: blue;">button</span>태그,
        <span style="color: blue;">textarea</span>태그,
        <span style="color: blue;">select</span>태그를 만들어 본다.
        
        <br> <br>
        <input type="text" value="입력">
        <input type="text" value="입력">
        <input type="text" value="입력">

        <button>버튼 1</button>
        <button>버튼 2</button>
        <button>버튼 3</button>
        <br> <br>

        <textarea>내용</textarea>  <br>

        <select>
            <option value="선택_1">선택_1</option>
            <option value="선택_2">선택_2</option>
            <option value="선택_3">선택_3</option>
            <option value="선택_4">선택_4</option>
        </select>
        <br> <br>
        끝~~
        <br>
        </div>



    </div>
    </div>
    </body>
    </body>
</body>
</html>

[실습#0101d]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic 태그 예시</title>
    <link rel="stylesheet" href="./css/ex_0101d.css">
</head>
<body>
    <!-- Container 시작-->
    <div id ="container">

        <!--Header 시작 -->
        <header>

            <div id = "logo">
                <div>Semantic 태그 예시</div>
            </div>

            <!--Navigation 시작 -->
            <nav>
             <ul id="topMenu">
                <li><a href="#">Navi #1</a></li>
                <li><a href="#">Navi #2</a></li>
                <li><a href="#">Navi #3</a></li>
                <li><a href="#">Navi #4</a></li>
             </ul>
            </nav>
            <!-- Navigation 끝-->
        </header>
        <!-- Header 끝 -->

        <!-- Main 시작 -->
        <main class="contents">

        <!-- Section 1 시작-->
          <section id ="section1">
            <div class="section_title">Section 1:</div>
            <div class-"detail">

                <img src="img_01.png" width="200px">
                <br>
                <b><p>블록체인의 시초 비트코인.</p></b>
                <p> 암호화페인 비트코인 블록체인 어플리케이션으로 가장 처음으로 실용화 된 것은 사실이다. 하지만 블록체인이 암호화폐의 용도로만 사용되는 것은 아니다.</p>

                <ol>
                    <li>아이템</li>
                    <li>아이템</li>
                    <li>아이템</li>
                </ol>
            </div>
          </section>  
          <!--Section 1 끝-->  

          <!--Section 2 시작-->
          <section id ="section2">
            <div class="section_title">Section 2:</div>
            <div class="detail">
                <img src="img_02.png" width="200px">
                <br>
                <b><p>스마트 컨트랙트는 이더리움으로.</p></b>
                <p>Smart contract 중심으로 금융과 경제 산업 전반에 대한 시스템, 서비스 혁신, 거래나 계약 등의 자동화 및 탈 중앙화, 다양한 비즈니스 영경으로 확대되는 단계가 바로 블록체인 2.0. </p>
                  <ol>
                    <li>아이템</li>
                    <li>아이템</li>
                    <li>아이템</li>
                  </ol>
            </div>
          </section>
          <!--Section 2 끝-->
        </main>
        <!--Footer 부분-->
        <footer>
            <section id="bottomMenu"
            <ul>
                <li><a href="#">회사 소개</a></li>
                <li><a href="#">개인정보처리방침</a></li>
                <li><a href="#">약관</a></li>
                <li><a href="#">사이트맵</a></li>
            </ul>
            </section>
        </footer>
    </div>  <!-- Container 끝 -->
</body>
</html>
728x90
LIST

'HTML' 카테고리의 다른 글

이미지 태그 와 테이블, 폼태그  (0) 2022.09.21
WEB,HTML과 태그 속성  (1) 2022.09.20

'HTML' Related Articles

티스토리툴바