반응형

인터넷에서 볼 수 있는 폼(form)

 

인터넷에서 자주 볼 수 있는 폼 형식 입니다.

 

아이디와 비밀번호를 입력하거나 회원가입을 할 때 개인정보를 입력하는 요소들을 모두 폼이라고 할 수 있습니다.

 

폼을 만드는 <form> 태그

 

폼을 만드는 가장 기본적인 태그로 기본형과 같이 <form> </form> 태그 사이에 여러가지 폼 요소를 넣습니다.

기본형
<form [속성="속성값"]> 여러 폼 요소 </form>

 

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

 

하나의 폼 안에서 여러 구역을 나눌 때 <fieldset> 태그를 사용합니다.

예를 들어 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시하면 사용자가 입력하기도 편리하고 화면도 깔끔하게 표시할 수 있습니다.

기본형
<fieldset [속성="속성값"]> </fieldset>

 

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있습니다.

 

기본형
<fieldset>
  <legend> 그룹 이름 </legend>
</fieldset>
<h3>주녘 쇼핑몰 주문서</h3>
    <form action="">
      <fieldset>
        <legend>상품선택</legend>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
      </fieldset>
    </form>

폼 요소에 레이블을 붙이는 <lable> 태그

lable 태그는 input 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.

lable 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹브라우저가 알 수 있습니다.

 

기본형
<lable> 레이블 명 <input> </label>
  <h3>주녘 쇼핑몰 주문서</h3>
    <form action="">
      <fieldset>
        <legend>개인정보</legend>
        <label for="user_name">이름 <input type="text" id="user_name"></label><br>
        <label for="user_address">연락처 <input type="text" id="user_address"></label>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
        <label for="address">이름 <input type="text" id="address"></label><br>
        <label for="message">배송 메시지 <input type="text" id="message"></label>
      </fieldset>
    </form>

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 표 만들기  (0) 2023.08.15
[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형

HTML에서 표를 만드는 방법에 대해 알아보자!

<table> 과 <caption> 태그

표를 생성할 때 <table> </table> 태그를 표시하고 사이에 표와 관련된 태그를 모두 넣습니다.

만약 표에 제목을 표시하고 싶으면 <table>태그 바로 아래에 <caption>태그를 사용하면 됩니다.

<caption> 태그를 사용하면 표의 위쪽 중앙에 제목이 나타납니다.

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

 

 

행을 만드는 <tr> 셀을 만드는 <td>, <th>

단순히 <table> 태그만 작성하면 표가 완성되지 않습니다. table 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지를 입력해주어야 합니다. <tr> 태그는 행을 생성하고, <td> 태그는 행 안에 있는 셀을 만들어 줍니다.

즉, <table> 태그 안에는 <tr>, <td> 태그가 있어야 하나의 표를 만들 수 있습니다.

    <table>
        <caption>표 제목</caption>
        <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>
    </table>

표가 생성된 결과물

또한 표의 제목 행에 셀을 만들경우에는 <th> 태그를 이용합니다. <th> 태그를 사용하면 내용은 진하게 표시되고 셀 안에서 중앙에 배치되므로 눈에 잘 띄게 됩니다.

제목 행에 <th>를 사용하면 강조가 된다

 

<thead>, <tbody>, <tfoot> 태그

일부 표에는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래에 합계나 요약 등의 내용을 표시하기도 합니다.

이런 종류의 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 작성하는 것이 좋습니다.

이럴 때 <thead>, <tbody>, <tfoot> 태그를 사용하면 됩니다.

행이나 열을 합치는 rowspan, colspan

표는 tr 태그와 th태그 td 태그를 이용하여 여러가지 셀로 구성됩니다.

경우에 따라 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있습니다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th> 태그안에서 이루어집니다.

행을 합치려면 rowspan 속성을, 열을 합치려면 colspan 속성을 사용하면됩니다.

 

 기본형
<td rowspan="합칠 셀의 개수"> 셀의 내용 </td>
<td colspan="합칠 열의 개수">  셀의 내용</td>
<body>
    <h2>주녘의 과일 가게 상품 구성</h2>
    <!-- 표 만들기 -->
    <table>
      <caption>
        선물용과 가정용 상품 구성
      </caption>
      <thead>
      <tr>
        <th>용도</th>
        <th>중량</th>
        <th>개수</th>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">선물용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>35,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>52,000원</td>
      </tr>
      <tr>
        <td rowspan="2">가정용</td>
        <td>3kg</td>
        <td>11~16과</td>
        <td>30,000원</td>
      </tr>
      <tr>
        <td>5kg</td>
        <td>18~26과</td>
        <td>47,000원</td>
      </tr>
    </tbody>
    </table>
  </body>

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 폼 삽입하기  (0) 2023.08.15
[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형

주요 서식(Texts) 태그

<h1> ~ <h6> 태그
heading : 제목
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
   <h1>안녕하세요</h1>
   <h2>안녕하세요</h2>
   <h3>안녕하세요</h3>
   <h4>안녕하세요</h4>
   <h5>안녕하세요</h5>
   <h6>안녕하세요</h6>
  </body>
</html>

<p>
paragraph : 문단
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
    <h1>제목 태그 테스트입니다.</h1>
    <p>문단 태그 테스트입니다.</p>
    <p>문단 태그 테스트입니다.</p>
  </body>
</html>

<br>
break : 줄바꿈
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>
  </body>
</html>

<hr>
horizontal rule : 가로줄
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>
 <hr>
 <p>가로줄 아래에 쓰는 글</p>
  </body>
</html>

<pre>
preformatted text : 정의된 형식
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
  </head>
  <body>
 <pre>
    pre 태그를 테스트하는 중
                  pre 요소 내 텍스트는
    고정폭 글꼴(fixed-width font)을 사용하여 표현
    띄어쓰기
    줄바꿈이 모두 그대로
    나오게 됩니다.
 </pre>
  </body>
</html>

<div>
division : 그룹(블록)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <div id="black1">블록 구역 1</div>
    <br />
    <div id="black2">블록 구역 2</div>
  </body>
</html>

<span>
그룹, 인라인 특성을 가짐
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <span style="background-color: red;">안녕</span>
    <span style="background-color: yellow;">반가워</span>
    <span style="background-color: blue;">하이</span>
  </body>
</html>

<strong> (b)
strong : 강조, bold : 굵은 글씨
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, exercitationem consequatur repellat vel quo
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      necessitatibus nulla consequuntur illum.
    </p>
  </body>
</html>

<em> (i)
emphasized text : 강조, itallic : 기울임체
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      necessitatibus nulla consequuntur illum.
    </p>
  </body>
</html>

<mark>
marked, highlighted : 형광펜
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      <mark>necessitatibus nulla consequuntur illum.</mark>
    </p>
  </body>
</html>

<small>
덧 붙이는 글, 저작권, 법률 표기 등...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      <strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa
      asperiores officiis beatae, <em> consequatur repellat vel quo</em>
      repudiandae culpa a repellendus ducimus fugiat deserunt commodi
      <mark>necessitatibus nulla consequuntur illum.</mark>
    </p>
    <hr>
    <small>이 글의 저작권은 주녘에게 있습니다.</small>
  </body>
</html>

<del>
제거된 텍스트, 취소선
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      주녘은 개발자가 되기 위해 <strong>자바, HTML,</strong> <del>CSS를</del> 열심히 공부하였습니다.
    </p>
  </body>
</html>

<ins>
inserted : 밑줄
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      주녘은 개발자가 되기 위해 <ins>자바, HTML,</ins> <del>CSS를</del> 열심히 공부하였습니다.
    </p>
  </body>
</html>

<sub>
subscript : 아래 첨자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      log<sub>2</sub> 2
    </p>
  </body>
</html>

<sup>
superscript : 윗 첨자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>
      2<sup>2</sup> = 4
    </p>
  </body>
</html>

<blockquote>
인용구(블록)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>태극기</h3>
        우리나라의 국기.

        우리나라에서 국기제정에 대한 논의가 처음 있었던 것은 1876년(고종 13) 1월이었다. 운양호사건을 계기로 한 · 일 사이에 강화도조약 체결이 논의되는 동안, 일본 측은 「운양호에는 엄연히 일본국기가 게양되어 있었는데, 왜 포격했느냐?」면서 트집을 잡았지만, 조선 측에서는 <국기>가 무엇을 뜻하는지 알 수 없었다.
       
        이 일이 계기가 되어 조정에서 비로소 국기제정의 필요성이 활발히 논의되었고, 82년 8월 9일 수신사 박영효 등 일행이 인천에서 일본 배를 타고 도일할 때 당장 게양해야 할 국기가 있어야겠다고 생각한 나머지, 그전에 이미 조정에서 대체적으로 정해진 국기 도안내용을 약간 고쳐 태극사괘의 도안이 그려진 기를 만들었다. 이들 일행은 8월 14일 고베(神戶)에 도착하여 숙소건물 지붕 위에 이 기를 게양했는데, 이것이 태극기의 효시다. 이것을 조정에서 83년 정식으로 국기로 채택, 공포했고, 대한민국이 수립된 후 1949년 문교부에 심의위원회를 설치, 음양과 사괘의 배치안을 결정, 오늘에 이르렀다.
        <br><cite>[네이버 지식백과] 태극기 [太極旗] (한국근현대사사전, 2005. 9. 10., 한국사사전편찬회)</cite>
    </blockquote>
  </body>
</html>

<q>
quotation : 인용구, 인라인 속성
q태그를 쓰면 q태그 안에 텍스트를 큰 따옴표를 표시해줍니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>주녘에 따르면,
        <q>HTML을 마스터하고 싶다고 합니다.</q>
    </p>
  </body>
</html>

<abbr>
abbreviation/acronym : 줄임말
abbr 태그를 사용하면 마우스 커서를 가져다 놓으면 줄임말의 설명을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <p>주녘에 따르면,
        <q><abbr title="Hyper Text Markup Language" >HTML</abbr>을 마스터하고 싶다고 합니다.</q>
    </p>
  </body>
</html>

목록(Lists) 태그

1. 순서가 있는 목록(Ordered Lists)

<ol>, <li>

<ol type=" ">
type에 종류에 따라 순서의 표시가 달라집니다.
유형 설명
type="1" 숫자 목록(기본값)
type="A" 알파벳 대문자
type="a" 알파벳 소문자
type="I" 로마숫자 대문자
type="i" 로마숫자 소문자
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ol>
        <li>자바</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>스프링</li>
    </ol>
  </body>
</html>

2. 순서가 없는 목록(Unordered Lists)

<ul> <li>

순서가 없는 목록의 스타일에는 4종류가 있습니다.

유형 설명
disc 불릿형(기본값)
circle 작은원형
square 작은 사각형
none 마크 생략
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: disc">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: circle">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: square">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
    <h3>주녘이 개발자가 되기 위해 배우고 있는 언어들</h3>
    <ul style="list-style-type: none">
      <li>자바</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>스프링</li>
    </ul>
  </body>
</html>

설명목록(Description Lists)
<dl>
<dt>
<dd>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>heading tag test</title>
    <link rel="stylesheet" href="./css/test.css" />
  </head>
  <body>
    <h3>주녘의 카페 메뉴</h3>
    <dl>
        <dt>커피</dt>
        <dd>- 아메리카노 HOT</dd>
        <dd>- 아메리카노 ICE</dd>
        <dt>논 커피</dt>
        <dd>- 딸기쉐이크</dd>
        <dd>- 초코쉐이크</dd>
    </dl>
  </body>
</html>

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 폼 삽입하기  (0) 2023.08.15
[HTML] 표 만들기  (0) 2023.08.15
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
반응형
 <!-- TODO : 컴퓨팅 자주쓰는 코딩 용어 -->
    <!-- :(콜론), ;(세미콜론), &(엔퍼센트) -->
    <!-- HTML : Markup 언어 : <여는태그>글자</닫는태그>로 작성하는 언어 -->
    <!-- HTML 주요 요소들 :  -->
    <!-- 태그(요소, element), 속성(attribute), 값(value) -->
    <!-- 태그 : h1, p, table 등.... -->
    <!-- 속성 : src, width, height 등 ... -->
    <!-- 값 : src="값", width="값" 등... -->

    <!-- 단축키 : 인텔리제이-->
    <!-- 줄복사 : ctrl + d -->
    <!-- 줄삭제 : ctrl + y -->
    <!-- 윈도우 단축키 -->
    <!-- 복사 : ctrl + c -->
    <!-- 잘라내기 : ctrl + x -->
    <!-- 붙여넣기 : ctrl + v -->
    <!-- 실행취소 : ctrl + z -->

    <!-- html(구조), CSS(디자인), js(동작) -->
    <!-- 3가지 파일로 각각 분리 코딩(권고) -->

    <!-- 플러그인 : Auto rename tag -->
    <!-- TODO : 1) 제목 태그 : h1 ~ h6 -->
    <h1>안녕하세요</h1>
    <h2>안녕하세요</h2>
    <h3>안녕하세요</h3>
    <h4>안녕하세요</h4>
    <h5>안녕하세요</h5>
    <h6>안녕하세요</h6>

    <!-- TODO : 2) 폰트 태그 -->
    <!-- 굵은 글씨 -->
    <b>안녕하세요</b>
    <!-- 이텍릭체 글씨 -->
    <i>안녕하세요</i>

    <!-- TODO : 3) 단락 태그(*) -->
    <p>안녕하세요..</p>

    <!-- TODO : 4) 링크(앙커*) 태그 : 페이지 이동 -->
    <a href="http://naver.com">네이버</a>

    <!-- TODO : 5) 줄바꿈(*) 태그 -->
    안녕하세요<br/>
    안녕하세요<br/>

    <!-- TODO : 6) 특수 태그 -->
    <!-- < : &lt (less than) -->
    <!-- > : &gt (greater than) -->
    <!-- 공백 : &nbsp; -->
   
    <!-- TODO : 7) 이미지 태그(*) -->
    <img src="./image/bird.jpg" alt="새" width="300">

    <!-- TODO : 8) 목록 태그(*), ul(unordered list), ol(ordered list) -->
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>

    <!-- TODO : 9) 테이블 태그(*) -->
    <table>
        <!-- 제목 :  thead 생략 가능-->
        <thead>
            <!-- tr : 1행 -->
            <tr>
                <!-- th : 1열 -->
                <th>요일</th>
            </tr>
        </thead>
         <!-- 본문 :  tbody 생략 가능-->
         <tbody>
            <!-- tr : 1행 -->
            <tr>
                <!-- th : 1열 -->
                <td>요일</td>
            </tr>
        </tbody>
    </table>

   
<!-- TODO : form 태그(부모태그, 생략가능) > input(자식태그) -->
    <!-- TODO : 1) 라벨 + 입력양식 -->
    <!-- for="변수명" == id="변수명" -->
    <!-- label 클릭하면 input 양식에 포커스 생김 -->
    <label for="name">이름</label>
    <input type="text"id="name"/>
    <br/>

    <!-- TODO : 2) 패스워드 -->
    <input type="password" />
    <br/>

    <!-- TODO : 3) 파일 대화상자 -->
    <input type="file" />
    <br/>
   
    <!-- TODO : 4) 체크박스 -->
    <input type="checkbox" /> 좋음
    <br/>
    <input type="checkbox" /> 나쁨
    <br/>
   
    <!-- TODO : 5) 라디오박스 -->
    <!-- 주의점 : 2개 name="변수명" 일치시켜야 함 -->
    <input type="radio" name="gender"/> 남
    <br/>
    <input type="radio" name="gender"/> 여
    <br/>
   
    <!-- TODO : 5) Select 박스 -->
    <!-- 속성 selected - 화면에 먼저 보일 문자 -->
    <!-- 사용법 : <option>항목</option> -->
    <select>
        <option>김밥</option>
        <option selected>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>

    <!-- TODO : 6) textarea : 긴 글쓰기 -->
    <!-- cols="가로" rows="세로" -->
    <textarea cols="30" rows="10"></textarea>
반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 표 만들기  (0) 2023.08.15
[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그  (0) 2023.08.02
반응형
video 삽입

미디어 파일 중 비디오 삽입 태그는 다음과 같습니다.

video(부모태그) > source(자식태그) scr="비디오경로" type="video/확장자"
video 속성 : width(가로크기), countrols(동영상 컨트롤 패널) -->

[실행결과]

audio 삽입

오디오 타입 삽입 태그는 다음과 같습니다.

<audio 속성 src="오디오 파일 경로" >
source src="오디오파일경로" type="audio/확장자

[실행결과]

image 삽입

이미지 타입 삽입 태그는 다음과 같습니다.

[실행결과]

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 서식/목록 태그  (1) 2023.08.13
[HTML] 태그 요약  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그  (0) 2023.08.02
[HTML] 텍스트 폰트 태그  (0) 2023.08.02
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 사용법 : table - thead(제목태그) [tr(행),th(열), 굵은글씨] -->
    <!--                 본문 :  tr(행), td(열) -->
    <table border="1">
        <!-- 제목 : 테이블 -->
        <thead>
            <tr>
                <th></th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>
        <!-- 본문 시작 -->
        <tr>
            <td>2교시</td>
            <td>영어</td>
            <td>국어</td>
            <td>과학</td>
            <td>미술</td>
            <td>기술</td>
        </tr>
        <!-- 본문 끝 -->
    </table>
</body>
</html>

html에서 표를 생성하기 위한 명령어 <table>명령어와 <thead>, <tr> ,<th> 명령어가 있습니다.

사용법은 먼저 table 명령어를 입력하고 그 안에 thead(제목태그) thead 안에 tr(행 생성) tr태그 안에 th(열 생성) 명령어를 사용합니다.

 

위 예제 처럼 2행 6열 짜리 표를 만들기 위해서는 위의 코드처럼 작성해주시면 됩니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그  (0) 2023.08.02
[HTML] 텍스트 폰트 태그  (0) 2023.08.02
[HTML] 기본단축키 및 실습  (0) 2023.08.01
반응형
순서가 있는 목록 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ol : 순서있는 목록 태그(ordered list) -->
    <!-- li : 자식태그 -->
    <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ol>
</body>
</html>

순서가 없는 목록 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 줄복사 : ctrl + d -->
    <!-- 참고) 에밋기능 : 부모태그>자식태그*개수 (ul>li*3)  -->
    <!-- ul : 순서없는 목록 태그(unordered list) * 많이사용함 -->
    <!-- li : 자식태그(항목) list -->
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>
</html>

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
[HTML] 텍스트 폰트 태그  (0) 2023.08.02
[HTML] 기본단축키 및 실습  (0) 2023.08.01
반응형
<h1></h1> : 제목태그 (굵은 글씨)
h1 ~ h5 크기에 따라 화면에 다르게 보임
<b></b> : 굵은 글씨
<p></p> : 단락
<i></i> : 기울림
<small></small> : 글자 작게 보임
<sub></sub> : 아래첨자
<sup></sup> : 윗 첨자
<ins></ins> : 밑줄
<del></del> : 취소선
<hr></hr> : 중앙선
<br> : 줄바꿈

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 문서 자동 정렬 단축키 : ctrl + alt + l -->
    <!-- h1 : 제목태그 (굵은 글씨) h1 ~ h5(크기에 따라 화면에 다르게 보임) -->
    <!-- 자동 줄바꿈 일어남 -->
    <!-- ctrl + d : 줄복사 -->
    <!-- b : 굵은 글씨(bold) -->
    <!-- p : 단락태그 (paragraph), 일반글씨 사용 -->
    <p><b>Lorem ipsum dolor</b></p>
    <h5>Lorem ipsum dolor</h5>
    <!-- i : 글자 기울림(italic) -->
    <h5><i>Lorem ipsum dolor</i></h5>
    <!-- small : 글자 작게 보임 태그 -->
    <h5><small>Lorem ipsum dolor</small></h5>
    <!-- sub : 아래첨자 -->
    <h5>Lorem <sub>ipsum</sub> dolor</h5>
    <!-- sup : 윗 첨자 -->
    <h5>Lorem <sup>ipsum</sup> dolor</h5>
    <!-- ins : 밑줄 -->
    <h5><ins>Lorem ipsum dolor</ins></h5>
    <!-- del : 취소선 -->
    <h5><del>Lorem ipsum dolor</del></h5>
    <!-- hr : 중앙선 -->
    <hr />
    <!-- br : 줄바꿈(*) -->
    Lorem ipsum dolor<br>
    Lorem ipsum dolor

  </body>
</html>

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그  (0) 2023.08.02
[HTML] 기본단축키 및 실습  (0) 2023.08.01
반응형
HTML은 마크업 언어이며, 여는 태그  <  > + 닫는 태그 < / > 으로 이루어져 있다.

  • 주석 단축키 : ctrl + /
  • HTML 템플릿 만들기 : ! + tap키
  • 저장 : ctrl + s
  • 실행취소 : ctrl + z
실행결과 확인

오른쪽 마우스 클릭  -> Open with Live Server 선택

실행화면

html 앙크 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html 앙크 태그 == 링크 태그 : 페이지 이동 태그 -->
    <!-- 사용법 : <a href="페이지주소">내용</a> -->
    <!-- 줄복사 단축키 : ctrl + d -->
    <a href="http://naver.com">네이버</a>
    <a href="http://daum.net">다음</a>
    <a href="http://google.com">구글</a>
</body>
</html>

html anchor 태그는 링크 태그 즉 페이지 이동 태그입니다.

사용법은 <a href="페이지 주소"> 내용 </a> 으로 사용합니다.

해당 링크 선택시 해당 페이지로 이동

html anchor inner 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 줄복사 단축키 : ctrl + d -->
    <!-- 취소 : ctrl + z -->
    <!-- 복사 : ctrl + c -->
    <!-- 붙여넣기 : ctrl + v -->
    <a href="#">언론사 전체보기</a>
    <a href="#alpha">알파 부분</a>
    <a href="#beta">베타 부분</a>
    <a href="#gamma">감마 부분</a>

    <!-- 태그 공통속성 : id(#변수), class  -->
    <h1 id="alpha">알파</h1>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>

    <h1 id="beta">베타</h1>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>

    <h1 id="gamma">감마</h1>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
    <p>안녕하세요 이준혁입니다.</p>
</body>
</html>

태그 공통속성 : id(#변수), class를 사용합니다.
반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 태그 요약  (0) 2023.08.03
[HTML] 미디어 삽입  (0) 2023.08.03
[HTML] 표 만들기  (0) 2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그  (0) 2023.08.02
[HTML] 텍스트 폰트 태그  (0) 2023.08.02

+ Recent posts

티스토리툴바