마흔 여섯 번째 수업

정혅·2024년 4월 19일

더 조은 아카데미

목록 보기

51/76

HTML

html은 시작헤드와 끝헤드가 대부분 있다.
확장자는 html 과 htm으로 둘 다 줄 수 있다.
대소문자 구분하지 않는다.
title을 이용해 창의 제목을 설정할 수 있다.
body속성을 이용해 창에 띄울 내용을 설정할 수 있다.

<!-- 가장 기본적인 틀-->
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <!--html 파일 인코딩 -->
                <title>Hello HTML</title>
        </head>
        <body>
                안녕하세요.
        </body>
</html>

단축키

\ -\ : 싸이트 배경 흰색 안에 넣게 된다.
ctrl + u : 사이트에서 해당 단축키를 누르면 코드가 보인다. / F11 : 개발자 모드
\
: 개행
\ : 해당 싸이트의 이름
\ : 해당 싸이트의 내용
\ : 주석처리 형식 >> ctrl+x
ctrl + L : 해당 줄 선택 계속 누르면 줄단위로 선택됌

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <!--html 파일 인코딩 -->
                <title>Hello HTML</title>
        </head>
        <body>
            <img src ="funny.jpg"><br>
            <a href="hello.html">밥을 먹으면서 마음을 다스린다.</a> 
        </body>
</html>

사진은 같은 디렉토리 안에 있어야, 이름만 주면 바로 불러올 수 있다.
: 하이퍼 링크라는 의미

html 제목 - h1~6

<!DOCTYPE html>
<html>
<head>
    <title>html 제목</title>
</head>
<body>
    <h1>제목 1</h1>
    <h2>제목 2</h2>
    <h3>제목 3</h3>
    <h4>제목 4</h4>
    <h5>제목 5</h5>
    <h6>제목 6</h6>
</body>
</html>

태그 이름 설명
h1 첫 번째로 큰 제목 글자 태그
h2 두 번째로 큰 제목 글자 태그
h3 세 번째로 큰 제목 글자 태그
h4 네 번째로 큰 제목 글자 태그
h5 다섯 번째로 큰 제목 글자 태그
h6 여섯 번째로 큰 제목 글자 태그

태그부터 h6 태그의 h는 header를 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다.

글자 형태

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1><b>Lorem ipsum dolor sit amet</b></h1>
    <h1><i>Lorem ipsum dolor sit amet</i></h1>
    <h1><small>Lorem ipsum dolor sit amet</small></h1>
    <h1><sub>Lorem ipsum dolor sit amet</sub></h1>
    <h1><sup>Lorem ipsum dolor sit amet</sup></h1>
    <h1><ins>Lorem ipsum dolor sit amet</ins></h1>
    <h1><del>Lorem ipsum dolor sit amet</del></h1>
    <hr />
    <b>Lorem ipsum dolor sit amet</b><br />
    <i>Lorem ipsum dolor sit amet</i><br />
    <small>Lorem ipsum dolor sit amet</small><br />
    <sub>Lorem ipsum dolor sit amet</sub><br />
    <sup>Lorem ipsum dolor sit amet</sup><br />
    <ins>Lorem ipsum dolor sit amet</ins><br />
    <del>Lorem ipsum dolor sit amet</del><br />
</body>
</html>

HTML5는 글자 형태 태그를 사용해 웹 페이지의 글자에 형태와 의미를 부여합니다.

b 굵은 글자 태그
i 기울어진 글자 태그
small 작은 글자 태그
sub 아래에 달라 붙는 글자 태그 > 밑첨자
sup 위에 달라 붙는 글자 태그 > 위첨자
ins 밑줄 글자 태그
del 가운데 줄이 그어진 글자 태그

과거에는 이 절에서 배운 태그를 많이 사용했다. 하지만 글자를 기울이거나 굵게 만드는 기능은 모두 스타일시트로 처리하므로 현대에는 잘 사용하지 않는다.

이들은 \
을 따로 명시해서 개행을 해줘야 한다.

루비 문자

루비문자는 일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미한다. 일본어에서 자주 사용하지만 한국어도 한자어가 많으므로 사용할 수 있는 태그이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <ruby>
        <span>大韓民國</span>
        <rt>대한민국</rt>
    </ruby>
</body>
</html>

ruby 루비 문자 선언 태그
rt 위에 위치하는 작은 문자 태그
rp ruby 태그를 지원할 경우 출력되지 않는 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <ruby>
        <span>大韓民國</span>
        <rp>(</rp>
        <rt>대한민국</rt>
        <rp>)</rp>
    </ruby>
</body>
</html>

정의 목록

정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Basic Page</title>
</head>
<body>
    <dl>
        <dt>HTML5</dt>
        <dd>Multimedia Tag</dd>
        <dd>Connectivity</dd>
        <dd>Device Access</dd>
        <dt>Milk</dt>
        <dd>Animation</dd>
        <dd>3D Transform</dd>
    </dl>
</body>
</html>

dl(definition list) 정의 목록 태그
dt(definition term) 정의 용어 태그
dd(definition description) 정의 설명 태그

웹 표준과 실제

실제로 존재하지 않는 태그이나, 유연하게 무시하면서, 정상적으로 출력할 수 있도록 하는 것이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <food>Custom food Tag</food>
    <rice>Custom rice Tag</rice>
</body>
</html>

앞에 코드를 보면서 다음과 같이 생각할 수도 있는데 "ruby 태그를 지원하지 않는 웹 브라우저에서 ruby 태그를 쓸 수는 있네?"
웹 브라우저는 유연하게 태그를 해석하므로 자신이 지원하지 않는 태그도 정상적으로 출력한다. 예를 들어서 위에 코드처럼 food 태그와 rice 태그를 사용해보면 알수있다.
food 태그와 rice 태그는 웹 표준에서 정하지 않은 태그이다. 하지만 코드는 문제없이 실행된다. 하지만 인터넷 익스플로러 8버전 이하에서는 태그 이름을 마음대로 지정할 경우 스타일을 적용할 수 없으니 주의해야 한다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dolor nisi, laoreet nec varius sed, congue venenatis tellus. Quisque nisi lectus, egestas et euismod eget, dapibus id nibh. In eleifend placerat vulputate. Sed tincidunt tortor ac nunc sagittis at condimentum lorem suscipit. Mauris gravida sodales nunc, non vehicula lorem feugiat quis. Aenean elit ante, placerat eget semper ut, fringilla blandit ipsum. Aliquam erat volutpat. Suspendisse in odio metus. Suspendisse potenti. Mauris porta magna diam.</p>
    <p>Suspendisse tortor purus, tempor id vestibulum ac, pulvinar vitae sem. Nullam sit amet urna id nibh tincidunt semper. Morbi in leo hendrerit nisi elementum feugiat. Donec sagittis erat quis orci ullamcorper aliquam nec sed erat. Aenean ultricies pellentesque velit, sit amet aliquet tellus elementum et. Proin id ornare tortor. Donec non nibh at nulla sagittis aliquet tempus vitae diam. Nulla facilisi.</p>
</body>
</html>

\
: 단락 태그
- p 태그는 paragraph 태그의 줄임말이다. paragraph는 단락을 의미하므로 p 태그를 사용하면 하나의 단락을 만들 수 있다.
  
  Lorem ipsum
  웹 페이지 디자인과 관련된 글을 읽으면 Lorem ipsum으로 시작하는 글을 굉장히 많이 볼 수 있다. 이 글자는 라틴어로 키케로가 지은 최고 선악론 De finbus bonorum et malorum에 나오는 단어를 마구잡이로 추출하여 만든 글이다.

수평, 개행 태그- hr, br

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h2>dolor sit amet</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <br />
    <p>In porttitor lorem at justo feugiat aliquet.</p>
    <br />
    <p>Nunc id massa at magna semper hendrerit.</p>
    <br />
    <p>Vivamus rhoncus eros vel ante suscipit non facilisis risus rutrum.</p>
</body>
</html>

\
:개행 태그
\
: 수평 줄 태그

앵커 태그 - 하이퍼 링크 a

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="http://hanb.co.kr">Hanbit</a><br />
    <a href="https://github.com/">Github</a><br />
</body>
</html>

HTML Hypertext Markup Language에서 가장 중요한 단어는 H를 의미하는 하이퍼텍스트이다. 하이퍼텍스트는 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미한다.
- HTML 웹 페이지가 이렇게 조직화된 문서 형태를 가질 수 있는 이유는 앵커 Anchor 태그 때문이다. 앵커 태그는 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그이다.
\ : href 속성을 사용하여 이동하고자 하는 웹 페이지를 지정합니다. >> 앵커 태그
- href속성은 다양한 값을 가질 수 있다. URL을 직접 지정할 수 있고, 이메일 주소나, 파일 경로를 지정할 수 있다.

앵커태그를 이용해 머릿글로 이동

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <a href="#alpha">Move to Alpha</a> <!--아이디가 alpha 인 곳으로 이동-->
    <a href="#beta">Move to Beta</a>
    <a href="#gamma">Move to Gamma</a>
    <hr />
    <h1 id="alpha">Alpha</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <h1 id="beta">Beta</h1>
    <p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>
    <h1 id="gamma">Gamma</h1>
    <p>Nullam porta, felis sit amet porttitor vestibulum.</p>
</body>
</html>

a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 하이퍼링크 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야 한다. 따라서 웹 표준을 지키면서 이동하지 않는 a 태그를 만들때는 href 속성에 #을 입력한다. >> 빈 링크라고 부른다.
<a href="#">언론사 전체보기</a>
페이지 내부 이동
- a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이때는 원하는 장소에 id 속성을 부여해야 한다. 이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 #아이디 형태의 문자열을 입력한다.
- id 속성을 중복해서 사용하는 것은 웹 표준에 어긋나는 행위이다.

목록 태그 : - 중요

일반적으로 페이지를 이동할 때 사용되는 메뉴를 네비게이션 메뉴라고 부른다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>ol tag</h1>
    <ol>
        <li>Facebook</li>
        <li>Tweeter</li>
        <li>Linked In</li>
    </ol>
    <h1>ul tag</h1>
    <ul>
        <li>Facebook</li>
        <li>Tweeter</li>
        <li>Linked In</li>
    </ul>
</body>
</html>

ul(unordered list) 순서가 없는 목록 태그 (점으로)<\mark>
ol(ordered list) 순서가 있는 목록 태그 (숫자로)<\mark>
li(list item) 목록 요소<\mark> >> ul, ol안에 있어야함

항상 닫아주는 것 잊지 않기

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <ul>
        <li>HTML5
            <ol> <!--순서로 표시 -->
                <li>Multimedia Tag</li>
                <li>Connectivity</li>
                <li>Device Access</li>
            </ol>
        </li>
        <li>CSS3
            <ul><!--점으로 표시-->
                <li>Animation</li>
                <li>3D Transform</li>
            </ul>
        </li>
    </ul>
</body>
</html>

테이블 태그

테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용해 레이아웃도 구성했다. 하지만 현대 웹 페이지는 대부분 DIV 태그를 사용해 레이아웃을 구성하므로 사용 빈도가 굉장히 줄었다.

border = "1" >> 해당 표의 테두리를 그릴 때의 선의 두께를 나타낸다.

각 행은 <tr> 태그로 정의되고, 각 셀은 <td> 태그로 정의됩니다. border="1" 속성을 사용하여 테두리를 그립니다. 만약 border 속성을 생략하면 테이블의 테두리가 그려지지 않습니다.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Basic Page</title>
</head>
<body>
  <table border="1">
      <tr> 
          <th>Header 1</th>
          <th>Header 2</th>
      </tr>
      <tr>
          <td>Data 1</td>
          <td>Data 1</td>
      </tr>
      <tr>
          <td>Data 2</td>
          <td>Data 2</td>
      </tr>
  </table>
</body>
</html>
<!--줄이 3줄 있는것-->

tr(table row) 표 내부의 행 태그 - 줄
th(table header) 행 내부의 제목 셀 태그 - 테이블 헤더(제목 - 조금 두껍게 표시)
td(table data) 행 내부의 일반 셀 태그 - 칸
border 표의 테두리 두께를 지정

위에 코드를 실행하고 요소 검사로 살펴보면, 코드를 입력한 것과 다르게 tbody 태그가 자동으로 생성된다.
이러한 웹 브라우저의 특성으로 가끔 문제가 발생하는 경우가 있다.

)

table border = "10"으로 변경한다면 두꺼워지는것을 알 수 있음

테이블 태그의 속성 , 색 주기

HTML5 이전의 table 태그는 속성이 굉장히 많았다. 하지만 HTML5의 table 태그는 속성 하나만 가지고 있다.

  <!DOCTYPE html>
  <html>
  <head>
    <title>HTML5 Basic</title>
  </head>
  <body>
    <table border="1">
        <caption>Caption</caption>
        <colgroup>
            <col span="2" style="background: red" />
            <col style="background: blue" />
        </colgroup>
        <thead style="background: green" > <!--나중에 준 속성이 백그라운드가 됌 그러므로, Red였다가, blue였다가 현재는 green인것 -->
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
        <tfoot style="background: yellow" >
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tfoot>
    </table>
  </body>
  </html>

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Basic</title>
</head>
<body>
  <table border="1" >
      <tr>
          <th colspan="3">Table Data</th>
          <th rowspan="3">Table Data</th>
      </tr>
      <tr>
          <td>Table Data</td>
          <td rowspan="2">Table Data</td>
          <td>Table Data</td>
      </tr>
      <tr>
          <td>Table Data</td>
          <td>Table Data</td>
      </tr>
  </table>
</body>
</html>

Table Data : 하나의 테이블 헤더 셀을 나타내며, 3개의 열을 가로로 확장한다.
Table Data: 테이블 헤더 셀, 다른 셀과 행을통해 확장한다. 해당 셀이 세 개의 행을 수직으로 확장한다는 것을 의미한다.

이미지 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <img src="Penguins.jpg" alt="펭귄" width="300" />
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="300" />
</body>
</html>

src 이미지의 경로 지정
alt 이미지가 없을 때 나오는 글자 지정
width 이미지의 너비 지정
height 이미지의 높이 지정

참고 : 현대에는 스타일시트를 사용해 입력하는 것이 일반적이므로 width 속성과 height 속성도 잘 사용하지 않는다.

더미 이미지

원하는 크기의 이미지 싸이트 참고

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <img src="http://placehold.it/300x200" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/100x100" />
</body>
</html>

이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 좋은 방법이다.
- plachold.it는 원하는 크기의 이미지를 제공해주는 사이트(아래)
  - placehold.it(http://placehold.it/)
위의코드처럼 \http://placehold.it/너비*높이 형식을 사용하면 손쉽게 원하는 크기의 이미지를 얻을 수 있다.
- 웹 페이지를 디자인할 때 Lorem ipsum 페이지와 함께 많이 사용하므로 기억하자. 비슷한 사이트로 http://dummyimage.com/도 있다.

오디오 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <audio></audio>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
   <audio src="Kalimba.mp3" controls="controls"></audio>
</body>
</html>

src 음악 파일의 경로 지정
preload 음악을 재생하기 전에 모두 불러올지 지정
autoplay 음악을 자동 재생할지 지정 : 악성코드 감염위험으로 잘 사용하지 않음
loop 음악을 반복할지 지정
controls 음악 재생 도구를 출력할지 지정 : 음악 재생하는 도구가 화면에 나옴

소스(src) 속성에 파일 경로를 지정할 때 파일 경로를 따옴표로 감싸는 이유는 브라우저가 해당 값이 속성의 일부임을 인식하고 올바르게 해석할 수 있게하기 위함이다.

오디오 태그의 속성 표기법 -XTML

html 보다 엄격하게 문법관리한다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <audio src="Kalimba.mp3" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

XHTML과 HTML5 차이점
- html의 표준화에 대한 문제점을 보완하고자 나온것이 xhtml이다. 이언어는 xml의 규칙을 적용한 html로 html보다 엄격한 구조를 갖는 녀석이다.
- 기존에 html이 \
  test 이렇게 하고 안닫아도 표현이 될때가 있지만 xhtml은 무조건 열었으면 닫고 단일태그의 경우 \ 꼭 슬러쉬를 붙여줘야 한다든지 이런식으로 보다 엄격하게 규칙을 적용한 html이라고 보면 된다. 근데 xhtml은 인기가 없어 거의 안쓰인다.

소스 태그 source

웹브라우저마다 지원하는 음악파일 형식이 틀리다. 이러한 문제를 해결하고자 만들어진 태그가 바로 source 태그이다.

여러개의 브라우저에서 지원이 되게끔 하기 위해 멀티로 파일을 지정하는것이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3" />
        <source src="Kalimba.ogg" type="audio/ogg" />
    </audio>
</body>
</html>

source 태그의 type 속성을 입력하지 않아도 상관없다. 하지만 type 속성을 입력하지 않으면 웹 브라우저가 음악 파일을 내려받은 뒤에 재생 가능한 파일인지 확인하므로 트래픽이 낭비된다. 따라서 type 속성을 꼭 지정해주자.

비디오 태그

video 태그도 audio 태그처럼 웹 브라우저마다 지원하는 비디오 형식이 다르므로 source 태그를 사용해야 한다.
- 그래서 아래 코드 보면 mp4형식과, webm형식의 다른 소스파일을 제공하고 있는것이다.
  - webm은 오픈 웹에서 무료로 사용할 수 있는 고화질 비디오 형식 중 하나로, 혹여나 mp4 파일을 지원하지 않을 경우를 대비해 동일한 비디오 파일을 제공하고 있는 것이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <video controls="controls">
        <source src="Wildlife.mp4" type="video/mp4" />
        <source src="Wildlife.webm" type="video/webm" />
    </video>
</body>
</html>

src 비디오 파일의 경로 지정
poster 비디오 준비 중일 때의 이미지 파일 경로 지정
preload 비디오를 재생하기 전에 모두 불러올지 지정
autoplay 비디오를 자동 재생할지 지정
loop 비디오를 반복할지 지정
controls 비디오 재생 도구를 출력할지 지정
width 비디오의 너비를 지정
height 비디오의 높이를 지정

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
        <source src="Wildlife.mp4" type="video/mp4" />
        <source src="Wildlife.webm" type="video/webm" />
    </video>
</body>
</html>

videon.js 플러그인

<!DOCTYPE html>
<html>
<head>
    <title>Video.js Basic</title>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>

</body>
</html>

웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹 페이지를 디자인할 때 문제가 될수 있다. 이러한 문제를 해결할 수 있는 간단한 플러그인이 있다. 바로 video.js 플러그인이다.

<!DOCTYPE html>
<html>
<head>
    <title>Video.js Basic</title>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
    <video controls="controls" width="640" height="360"
           class="video-js vjs-default-skin" data-setup="{}">
        <source src="Wildlife.mp4" type="video/mp4" />
        <source src="Wildlife.webm" type="video/webm" />
    </video>
</body>
</html>

data-setup에 data는 사용자 자료형이다.

입력 양식 태그 : form태그

입력 양식은 사용자에게 입력받는 공간을 의미한다. 입력 양식 태그는 입력 양식을 만들 때 사용하는 태그이다.
- 여기서 사용자에게 입력을 받아서 데이터베이스에저장해 서버로 제출

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form method="get">
        <input type="text" name="search" />
        <input type="submit" />
    </form>
</body>
</html><!--get방식으로 하게 되면 좀 다른감..-->

<!DOCTYPE html>
<html>
<head>
    <title>Form processing</title>
</head>
<body>
    <form action = "#" method="get">
        <textarea name = "comment" cols="30" rows="3"></textarea>
        <p><input type="submit" value="전송" />
        <input type="reset" value="취소" />
        </p>
    </form>
</body>
</html><!--comment라는 이름을 가진 텍스트 영역이 생성되고, 사용자가 입력한 내용을 이 이름으로 서버로 전송-->

action 입력 데이터의 전달 위치를 지정한다.
- form요소가 제출될 때 데이터가 전송될 URL을 지정한다.
<form action = "#" method = "get">
- #은 현재 페이지를 다시 로드하라는 의미 > 일반적으로 페이지를 새로고침하거나 이동하지 않고도 폼을 제출할 때 사용된다.
- get / post 중 하나를 선택한다. get방식은 URL에 데이터를 추가하여 전송하고, POST방식은 데이터를 HTTP 요청 본문에 포함시켜 전송한다.
method 입력 데이터의 전달 방식을 선택한다.
- 개인 정보를 입력하고 회원 가입 버튼을 누르면 정보가 서버로 전달된다. 이때 정보는 form 태그에 지정된 action 속성의 장소로 method 속성에 적힌 방식으로 전달된다.
  
  method 속성에서 자주 사용되는 method 속성은 GET와 POST이다.

GET 방식은 주소에 데이터를 입력하므로 크기가 한정되어 있다. 하지만 POST방식은 별도로 데이터를 전송하는 방식이라 데이터 용량에 제한이 없다.

label 태그

label 태그는 어떠한 input 태그를 설명하고 있는지 표시해줘야 한다..input 태그에 id 속성을 입력하고 label 태그에 for 속성을 입력한다.
- id 및 for을 이용해 레이블을 체크박스에 연결한다.
  - For속성은 레이블과 체크박스를 연결하기 위해 사용한다.
  - id속성은 해당 체크박스의 고유 식별자(identifier)를 나타낸다.
    
    "독서" 라벨을 클릭하면 for="reading"인 체크박스가 선택됩니다. 이는 id="reading"인 체크박스와 연결됩니다. 사용자는 체크박스를 직접 클릭하지 않고도 해당 레이블을 클릭하여 체크박스를 선택할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <input type="text" /><br />
        <input type="button" /><br />
        <input type="checkbox" /><br />
        <input type="file" /><br />
        <input type="hidden" /><br />
        <input type="image" /><br />
        <input type="password" /><br />
        <input type="radio" /><br />
        <input type="reset" /><br />
        <input type="submit" />
    </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form> <!--for은 input에서의 value나 id와 일치해야 label을 클릭할 때 포커스가 넘어감-->
        <label for="name">이름</label>
        <input id="name" type="text" /> <!--id는 중복되면 안된다.-->
    </form>
</body>
</html>

코드를 실행하고 label 태그를 클릭해보면 자동으로 input 태그에 초점이 맞추어진다. 참고로 input 태그가 체크박스나 라디오 버튼일 경우 label 태그를 선택하면 input 태그가 체크된다. >>자동으로 포커스가 옮겨진다.
- 이블을 사용하면 사용자가 입력 필드에 포커스를 설정할 때 포커스 위치가 명확해지며, 키보드로 탐색할 때 레이블 텍스트에 대한 포커스 이동이 가능하다.

input 태그 - 중요

input 태그의 내부에 글자를 넣고 싶으면 value 속성을 입력한다.
일반적으로input 태그는 form 태그 안에 있어야 한다.

최근 Ajax 기술의 활성화로 인해 이 규칙을 지키지 않는 경우가 늘고 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <input type="text" name="name" /><br />
        <input type="password" name="password" /><br />
        <input type="file" name="file" /><br />
        <input type="submit" />
    </form>
</body>
</html>

button 버튼을 생성합니다.
checkbox 체크박스를 생성합니다.
file 파일 입력 양식을 생성합니다.
hidden 보이지 않습니다.
image 이미지 형태를 생성합니다.
password 비밀번호 입력 양식을 생성합니다.
radio 라디오 버튼을 생성합니다.
reset 초기화 버튼을 생성합니다. >> submit과 마찬가지
- <input type="reset" value="다시쓰기">
submit 제출 버튼을 생성합니다. >> value를 이용해 이름 변경 가능
- <input type="submit" value="가입하기">
text 글자 입력 양식을 생성합니다.

HTML5에서 추가된 Input 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <input type="color" /><br />
        <input type="date" /><br />
        <input type="datetime" /><br />
        <input type="datetime-local" /><br />
        <input type="email" /><br />
        <input type="month" /><br />
        <input type="number" /><br />
        <input type="range" /><br />
        <input type="search" /><br />
        <input type="tel" /><br />
        <input type="time" /><br />
        <input type="url" /><br />
        <input type="week" />
    </form>
</body>
</html>

color 색상 선택 양식을 생성한다.
date 일 선택 양식을 생성한다.
datetime 날짜 선택 양식을 생성한다.
datetime-local 지역 날짜 선택 양식을 생성한다.
email 이메일 입력 양식을 생성한다.
month 월 선택 양식을 생성한다.
number 숫자 생성 양식을 생성한다.
range 범위 선택 양식을 생성한다.
search 검색어 입력 양식을 생성한다.
tel 전화 번호 입력 양식을 생성한다.
time 시간 선택 양식을 생성한다.
url URL 주소 입력 양식을 생성한다.
week 주 선택 양식을 생성한다.

textarea태그 - input태그가 아닌 입력양식

input 태그가 아닌 입력 양식이 2개 있다. textarea 태그와 select 태그이다.
input태그는 여러 줄의 텍스트를 입력할 수 있는 태그다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <textarea></textarea>
    </form>
</body>
</html>

여러 줄의 글자를 입력할 때 사용하는 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <textarea>TextArea Text</textarea>
</body>
</html>

cols 태그의 너비를 지정한다.
rows 태그의 높이를 지정한다.

textarea태그 안에 미리 글자를 입력하고 싶다면 : textarea사이에 문장을 넣으면 됌

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <textarea>Hello Textarea
Hello Textarea</textarea>
</body>
</html> //이 코드에서는 지저분해 보이더라도 이렇게 쓰자

위에 두개의 소스 코드를 실행시켜보면 위에 소스코드는 내용이 이상하게 나오는 것을 볼수가 있다.소스코드가 조금 지저분하게 보이더라도 위에 소스코드처럼 코딩하자.

select 태그 - multiple속성

select 태그는 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <select>
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
    </select>
</body>
</html>

select 선택 양식을 생성합니다.
optgroup 옵션을 그룹화합니다.
option 옵션을 생성합니다.

여러 개의 목록을 선택하고 싶을 때는 select 태그의 multiple 속성을 사용

ctrl을 눌러서 여러개 선택이 가능하다. - multiple속성 이용

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <select multiple="multiple">
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
    </select>
</body>
</html>

optgroup태그

optgroup 태그는선택 옵션을 묶을 때 사용하는 태그이다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <select>
        <optgroup label="HTML5">
            <option>Multimedia Tag</option>
            <option>Connectivity</option>
            <option>Device Access</option>
        </optgroup>
        <optgroup label="CSS3">
            <option>Animation</option>
            <option>3D Transform</option>
        </optgroup>
    </select>
</body>
</html>

fieldset 태그 / legend 태그

fieldset요소를는 폼의 관련된 요소들을 묶는데 사용 >> 그룹화 해서 시각적으로 구분하기 위함

legend요소를 포함해 이 그룹의 제목을 지정할 수 있다.

입력 양식을 설명할 때는 fieldset 태그와 legend 태그를 사용한다.
legend 태그는 fieldset 태그 안에만 사용할 수 있다. 물론 다른 곳에도 쓸 수는 있지만 아무 효과가 없다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>입력 양식</legend>
            <table>
                <tr>
                    <td><label for="name">이름</label></td>
                    <td><input id="name" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="mail">이메일</label></td>
                    <td><input id="mail" type="email" /></td>
                </tr>
            </table>
            <input type="submit" />
        </fieldset>
    </form>
</body>
</html>

table은 표를 만들 때 사용되는 요소로, 행(tr)과 열(td)로 구성된다.
- table>은 표의 컨테이너 역할을 하며, tr요소로부터 시작하는 행을 포함한다.

공간 분할 태그

과거의 웹 페이지는 공간 분할을 하지 않았다. 하지만 현대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 분할하였다.

가장 대표적인 공간 분할 태그는 div 태그이다.
- 공간 분할하는 이유는 공간을 분할해야 CSS를 사용해 우리가 원하는 레이아웃을 구성할 수 있기 때문이다.

div

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
</body>
</html>

span

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
</body>
</html>

div block 형식으로 공간을 분할한다. >> 차곡차곡 쌓아 올려지는 형식 >> 한 라인을 다 차지하고 있기 때문에, 개행이 따로 필요하지 않는다. 원하는 그룹으로 묶어서 효과를 주고 싶을 때 사용할 수 있다.
span inline 형식으로 공간을 분할한다. >> inline형식으로 공간을 분할한다. >> 그러므로 개행을 원한다면 br을 이용해야 한다.

inline형식 : 한 줄 안에 차례차례 위치하는 형식을 말한다. 글자가 한줄에 차례차례 들어간다.

참고 display 속성
block 형식과 inline 형식은 일반 태그에도 적용된다.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <h1>Header - 1 tag</h1>
    <p>Paragraph tag</p>
    <hr />
    <a href="#">Anchor tag</a>
    <i>italic tag</i>
</body>
</html>

block형식의 태그 / inline형식의 태그

block 해당 한 줄을 다 차지해 공간(좌우) 사용

inline 자기의 공간 >> 정해진 공간만 사용

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <div>
        <h1>HTML5 Header</h1>
    </div>
    <div>
        <ul>
            <li><a href="#">Menu - 1</a></li>
            <li><a href="#">Menu - 2</a></li>
            <li><a href="#">Menu - 3</a></li>
        </ul>
    </div>
    <div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <span>서울특별시 강서구 내발산동</span>
    </div>
</body>
</html>

div 태그 : span 태그
- div가 block>> 가운데 정렬등 정렬을 줄 수 있다.
- span은 inline형식 >> span은 그래서 정렬의 개념이 없다.(좌 가 우)
ul > 숫자 없는 목록 태그 >>li >>목록 표시 >> a 하이퍼 링크 태그

HTML5 시멘틱 구조 태그

문서의 구조를 더 명확하게 표현하고 의미를 부여하기 위해 사용

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <header>
        <h1>HTML5 Header</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu - 1</a></li>
            <li><a href="#">Menu - 2</a></li>
            <li><a href="#">Menu - 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
        <article>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </article>
    </section>
    <footer>
        <address>서울특별시 강서구 내발산동</address>
    </footer>
</body>
</html>

href="#"하게되면 현재 페이지의 맨 위로 스크롤하는 역할을 하게된다. >> 단순히 버튼이나 링크를 클릭했을 때 페이지의 상단으로 이동시키고 싶을때 활용

header 문서나 섹션의 헤더를 정의합니다. 일반적으로 로고, 제목, 탐색 메뉴 등을 포함
nav 탐색 링크의 그룹을 정의합니다. 주로 메인 탐색 메뉴를 감싸는 데 사용
aside 주 콘텐츠와 관련이 있는 부가 정보를 제공하는 영역을 정의합니다. 사이드바나 광고 패널 등에 사용
section 여러 중심 내용을 감싸는 공간을 의미
article 글자가 많이 들어가는 부분을 의미
footer 푸터를 의미

시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그이다.하지만 이전에 언급했던 것처럼 태그가 의미를 가지는 것은 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉽게 이해할 수 있게 한다.

정혅

이전 포스트

마흔 다섯 번째 수업

다음 포스트