본문 바로가기
코딩도전기/HTML

CODO Day2_HTML

by 코도꼬마 2023. 2. 3.

기본태그(basic tag)

  • <!-- --> : 주석
  • <abbr> : 툴팁(마우스 오버하면 설명을 띄워줌)
  • <b> : 볼드체
  • <del> : 취소선
  • <ins> : 밑줄
  • <i> : 이탤릭체
  • <mark> : 형광펜
  • <q> : 쿼터태그("")
  • <sub> : 아래첨자(아래 작은글씨)
  • <sup> : 윗첨자(위 작은글씨)
<body>
    <!--abbr : 툴팁 제공-->
    <p>
        우리가 배우는 과목은 <abbr title="Hyper Text Markup Language">HTML</abbr>
        입니다.
    </p>
    
    <!--b : 볼드체 제공-->
    <p>
        <b>HTML</b> 은 웹에서 화면을 표시해 줍니다.
    </p>
    
    <p>
        특정 단어에 <del>취소선</del> 또는 <ins>밑줄</ins>을 그어줄 수 있다.
    </p>
    
    <p>
        또한 특정 단어에 <i>이탤릭체</i> 또는 <mark>마크</mark> 를 해 줄 수 있다.
    </p>
    
    <p>
        쿼터 표현도 태그로 가능 하다.
        "그냥" 하는 방법 과 <q>쿼터태그</q> 를 사용하는 방법
    </p>
    
    <p>
        아래첨자(X<sub>2</sub>), 윗첨자(X<sup>2</sup>)
    </p>
</body>
Formatting

우리가 배우는 과목은 HTML 입니다.

HTML 은 웹에서 화면을 표시해 줍니다.

특정 단어에 취소선 또는 밑줄을 그어줄 수 있다.

또한 특정 단어에 이탤릭체 또는 마크 를 해 줄 수 있다.

쿼터 표현도 태그로 가능 하다. "그냥" 하는 방법 과 쿼터태그 를 사용하는 방법

아래첨자(X2), 윗첨자(X2)

 


자주 사용하는 Tag 및 기능

  • <fieldset> : 특정 영역을 테두리로 감쌀 때 사용
  • <legend> : fieldset에 대한 제목
  • <meta charset="UTF-8"> : 국제규격에 맞춘 글자
  • &nbsp; : 공백
  • 태그의 부모, 자식 관계 
    - 부모태그의 안쪽(tap해서 안쪽 라인)에 위치한 태그는 자식 태그
    - 같은 라인의 태그는 형제태그 

 


<Iframe> TAG

  • 다른 페이지를 불러오는 기능 
  • 다른 사이트의 페이지도 불러 올 수 있음(해당 사이트가 허용해야만 가능)
<iframe>
width(가로크기)="90%"<!--크기는 기본 픽셀단위로 적용되지만 %로도 가능 하다--> 

height(세로크기)="" 

src(불러올 페이지 주소)="./02_formatting.html" 

title(제목)

frameborder(경계선 두께)="0"

allowfullscreen(전체 크기로 확장(원본사이트에서 허용해야 가능))>
</iframe>

<!--다른 사이트 소스코드 복사해서 붙여넣으면 사이트를 불러올 수 있음-->




<Input> TAG

  • 서버로 보낼 내용을 입력 받을 때 사용하는 태그


  <input type="" name="" value="" 추가속성>

  • type : 값의 모양이나 속성을 정하는 것
  • name : 서버에 보낼 값의 이름
  • value : 서버로 보내 지거나 사용자에게 보여질 값 / Button이나 submit의 value 는 보여지는 값이다.

 

추가속성

  • placeholder ="" : 빈 칸 안에 "text" 삽입

 


type : 입력 받을 값의 모양이나 속성을 정하는 것

  • button : 어떤 이벤트가 발생할 때 가장 많이 사용(<button>태그로도 사용가능)
  • text : text를 입력할 수 있는 빈 박스
  • hidden : text와 같으나 보여주지 않음
  • password : 비밀번호 작성 공간(입력된 문자 가림)
  • sudmit : form 안에 input들을 서버로 보냄
  • checkbox : 중복선택 가능
  • radio : 단일 선택만 가능 / 항목(name)을 통일해야함
  • file : 파일을 찾아서 올림(mutiple 옵션을 넣으면 여러 파일 선택 가능)
  • color : 색깔을 지정할 수 있게 함
  • date : 날짜(년.월.일)를 지정할 수 있게 함
  • month : 날짜(년.월)를 지정할 수 있게 함
  • number : 숫자만 입력할 수 있게 함 / 입력 가능한 크기 설정 가능(min, max)
  • range : (사용자가)마우스로 움직일 수 있는 var형태
  • <textarea name=""> : 다량의 텍스트를 쓰고 전송할 때 사용(입력창 크기 조절 가능)
  • <select name=""> : 여러 값 중 하나를 선택할 때 사용                                                                              (▼(<option value="">태그로 추가)을 클릭해서 나타나는 값 중 하나를 선택)
  • <meter> : 용량? 등을 표기하는 var형태(사용자가 움직일 수 없음 / 자바스크립트가 움직일 수 있음)
  • <progress> : 진행과정? 등을 표기하는 var형태(사용자가 움직일 수 없음 / 자바스크립트가 움직일 수 있음)
<!--button : 어떤 이벤트를 발생 할때 가장 많이 사용-->
<!--아래 두개 태그는 같은 버튼이지만 조금 다르다.-->
<input type="button" value="click me"/>
<button>클릭</button>

<!--특정 영역을 테두리로 감쌀 때-->
<fieldset>
    <!--fieldset 에 대한 제목-->
    <legend>text & password</legend>
    <!--form : 서버로 무언가를 모낼때 사용-->
    <form>
        ID : <input type="text" name="id" value="" 
        placeholder="아이디를 입력 하세요"/>
        PW : <input type="password" name="pw" value=""
        placeholder="비밀번호를 입력 하세요"/>
        <!--form 안의 input 들을 서버로 보낼때 사용-->
        <input type="submit" value="로그인"/>
    </form>
</fieldset>

<fieldset>
    <legend>checkbox & radio</legend>
    <!--checkbox 는 중복 선택이 가능 하다.-->
    <input type="checkbox" name="vehicle" value="Bike"/> Bike
    <input type="checkbox" name="vehicle" value="Car"/> Car
    <input type="checkbox" name="vehicle" value="Boat"/> Boat
    <input type="checkbox" name="vehicle" value="Cycle"/> Cycle
    <br/><br/>
    <!--radio 는 단일선택만 가능 하다.-->
    <input type="radio" name="gender" value="male"/>male
    <input type="radio" name="gender" value="female"/>female
</fieldset>

<fieldset>
    <legend>file</legend>
    <!--multiple 옵션을 넣으면 여러 파일 선택 가능-->
    파일을 선택 하세요 : <input type="file" name="img" multiple/>
</fieldset>

<fieldset>
    <legend>hidden & text</legend>
    First Name : <input type="text" name="firstName" value="jihoon"/>
    <br/>
    <!--hidden 은 text와 같으나 안보여준다.-->
    Last Name : <input type="hidden" name="lastName" value="kim"/>
    <h3>content</h3>
    <!--다량의 텍스를 쓰고 전송할때 사용-->
    <textarea name="content"></textarea>
</fieldset>

<fieldset>
    <legend>select & datalist</legend>
    자동차 선택 : 
    <!-- select 는 뭔가 하나를 선택 할 때 사용 -->
    <select name="car">
        <!--value 는 서버에서 받는 값 태그사이 값은 사용자가 보는 값-->
        <option value="VOLVO">볼보</option>
        <option value="BMW">비엠더블유</option>
        <option value="BENZ">벤츠</option>
        <option value="FERARRI">페라리</option>
    </select>
    브라우저선택 : 
    <!--list 와 id 가 일치 해야 한다.-->
    <!-- 선택 항목 중에서 검색내용에 따라 항목을 줄여준다.-->
    <input list="browsers" name="browser"/>
    <datalist id="browsers">
        <option value="Edge">
        <option value="FireFox">
        <option value="Opera">
        <option value="Chrome">
    </datalist> 
</fieldset>

<fieldset>
    <legend>image</legend>
    <img src="../img/chrome.png" width="48" height="48" alt="이미지설명"/>
    <input type="image" src="../img/chrome.png" width="48" height="48" alt="이미지설명"/>
</fieldset>

<fieldset>
    <legend>color</legend>
    원하는 색상을 선택 하세요 : 
    <input type="color" name="favcolor"/>
</fieldset>

<fieldset>
    <legend>date & month</legend>
    date : <input type="date" name="dday"/><br/>
    month : <input type="month" name="smonth"/>
</fieldset>

<fieldset>
    <legend>Number</legend>
    <form>
        <!--숫자만 가능, 입력 영역을 설정할수 있다.-->
        NUMBER(1~10) : <input type="number" name="qty" value="1"
        min="1" max="10"/>
        <input type="submit"/>
    </form>
</fieldset>

<fieldset>
    <legend>guage</legend>
    RANGE : 
    <input type="range" name="points" value="0" min="0" max="10" step="2"/>
    <br/>
    <!--meter 와  progress 는 사용자가 움직일 수 없다.-->
    METER:<meter value="20" min="0" max="100"></meter>
    <br/>
    PROGRESS : <progress value="50" min="0" max="100"></progress>
</fieldset>
INPUT TAG
text & password
ID : PW :
checkbox & radio Bike Car Boat Cycle

male female
file 파일을 선택 하세요 :
hidden & text First Name :
Last Name :

content

select & datalist 자동차 선택 : 브라우저선택 :
image 이미지설명
color 원하는 색상을 선택 하세요 :
date & month date :
month :
Number
NUMBER(1~10) :
guage RANGE :
METER:
PROGRESS :




<Form> TAG : input 태그에 입력한 값을 form을 통해 서버로 전송

- form에는 action과 method라는 속성이 있음
- 또한 submit 버튼이 있어야만 전송이 가능


<form action="데이터를 전달 할 서버 이름" method="get | post"(데이터 전달 방법)>

  • get : 전송하는 내용이 url에 나타남
  • post : 전송하는 내용이 url에 나타나지 않음
<body>
  <!--action=값을 보낼 서버 주소-->
  <!--method=보내는 타입(GET|POST)-->
  <!--GET : 기본, 보내는 값이 주소에 다 보인다.(보안성X)(속도빠름)(전송길이 제한)-->
  <!--POST : 보내는 값이 주소에 보이지 않는다.(보안성O)(속도느림)(전송길이 무제한)-->

  <form action="" method="POST">
  ID : <input type="text" name="id" value=""/>
  <br/>

  PW : <input type="password" name="pw" value=""/>
  <br/><br/>

  <!--submit 버튼을 만들어주어야 값을 서버에 전달할 수 있음-->
  <input type="submit" value="로그인"/>
  </form>
</body>
Form
ID :
PW :

 



<Link> TAG

  • <anchor> : 특정 페이지로 이동시켜줌 
  • 옵션에 따라 새 창으로 이동 시킬 수 있음
  • <a href="" target="">링크 이름</a>

 

  • href=“” 이동할 주소
  • target=“_self” : 이동할 주소를 현재 창에서 보여줌(기본)
  • target=“_blank” : 이동할 주소를 새 창에서 보여줌
  • target=“_parent” : 이동할 주소를 부모 창에서 보여줌(큰 창: 부모창, 작은 창: 자식창)
<body>
    <!-- 이동할 곳이 없을때 -->
    <a href="#">링크 1</a>
    &nbsp;&nbsp;&nbsp;&nbsp;

    <!--main.html이 부모이므로 main.html에 띄운다.-->
    <a href="https://www.google.com" target="_parent">링크 2</a>
    &nbsp;&nbsp;&nbsp;&nbsp;

    <!-- 새창 -->
    <a href="https://www.naver.com" target="_blank">링크 3</a>
    &nbsp;&nbsp;&nbsp;&nbsp;

    <!--target="_self"는 기본 옵션(default)이므로 안 적어줘도 된다.-->  
    <!--나 자신은 iframe 안에 있으므로 그 안에서 페이지가 띄워진다.-->      
    <a href="https://www.daum.net">링크 4</a>
</body>

링크 4를 새 창에서 ifame으로 불러왔을 때(자기 자신의 창에서 불러올 창을 보여줘야하기 때문에 작은 창 안에 갇힘)



<List> TAG : 데이터를 리스트 형태로 나열

  • ul > li 일반적인 리스트(항목 앞에 ● 는 변경 가능)
  • ol > li 순서가 붙는 리스트
  • dl > dt 특정 내용을 대표하는 항목
  • dl > dd dt 하위 리스트
<body>
    <h3>List 1(ul)</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA SCRIPT</li>
        <li>J-QUERY</li>
    </ul>

    <h3>List 2(ol)</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA SCRIPT</li>
        <li>J-QUERY</li>          
    </ol>

    <h3>List 3(dl)</h3>
    <dl>
        <dt>HTML</dt><!--항목의 제목-->
        <dd>Hyper Text Markup Language</dd><!--항목의 설명-->

        <dt>Server Side</dt>
        <dd>JAVA</dd>
        <dd>JSP</dd>
        <dd>SPRING</dd>
        <dd>SPRING BOOT</dd>
    </dl>
</body>
LIST

List 1(ul)

  • HTML
  • CSS
  • JAVA SCRIPT
  • J-QUERY

List 2(ol)

  1. HTML
  2. CSS
  3. JAVA SCRIPT
  4. J-QUERY

List 3(dl)

HTML
Hyper Text Markup Language
Server Side
JAVA
JSP
SPRING
SPRING BOOT

 



<Table> TAG : 문서 안의 표를 만드는데 사용

  • Table은 thead, tbody, tr, td 등으로 구성
  • Table의 본문은 행(row)과 열(column)로 구성

 

  • <table> : 테이블이 그려질 영역 지정
  • <caption> : 테이블에 대한 제목(선택)
  • <colgroup> <col 각 항목에 대한 스타일 지정(선택)/>
  • <thead> : 테이블의 항목 제목(선택)
  • <tbody> : 테이블 본문 부분(선택)
  • <tr> 테이블의 한 줄(row)
  • <th> : 한 줄(row) 안에 강조할 데이터(볼드체&가운데 정렬 적용)
  • <td> : 한 줄(row) 안에 각 데이터



Table Set : Table 선언 -> 행 생성(tr) -> 열로 쪼개기(td)

  • 필수요소  :  <tr> <th> <td>
<body>
  <!--테이블이 그려질 영역-->
    <table border="1px" width="500px"><!--table 선언 및 경계선 설정-->
    
      <!--테이블 제목-->
      <caption>SCORE</caption>

      <colgroup><!--각 기둥(column)의 스타일 지정-->
        <col width="40%"/><!--하나의 컬럼-->
        <col width="40%"/>
        <col width="20%"/>
      </colgroup>
    
      <!--표의 항목-->
      <thead>
        <tr><!--한 줄(row)-->
            <th>First Name</th><!--한 칸-->
            <th>Last Name</th><!--한 칸-->
            <th>Points</th><!--한 칸-->
        </tr>
      </thead>

      <!--표의 내용-->
      <tbody>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Jhone</td>
          <td>Haword</td>
          <td>70</td>
        </tr>
        <tr>
          <td>Bryan</td>
          <td>Kim</td>
          <td>30</td>
        </tr>
      </tbody>
  </table>
</body>
TABLE
SCORE
First Name Last Name Points
Eve Jackson 94
Jhone Haword 70
Bryan Kim 30

 

 

Span

  • span은 폭을 의미
  • colspan은 열(column) 이 들어갈 폭을 지정하는 것
  • rowspan은 행(row)이 들어갈 폭을 지정하는 것

<body>
    <table border="1px" width="300px">
        <caption>rowspan="2"</caption>
        <tr>
            <td>TD</td>
            <td>TD</td>
            <td>TD</td>
        </tr>
        <tr>
            <td rowspan="2">TD</td>
            <td>TD</td>
            <td>TD</td>
        </tr>
        <tr>
            <!-- <td>TD</td> -->
            <td>TD</td>
            <td>TD</td>
        </tr>
    </table>
    <p>
    <table border="1px" width="300px">
        <caption>colspan="2"</caption>
        <tr>
            <td>TD</td>
            <td>TD</td>
            <td>TD</td>
        </tr>
        <tr>
            <td colspan="2">TD</td>
            <!-- <td>TD</td> -->
            <td>TD</td>
        </tr>
        <tr>
            <td>TD</td>
            <td>TD</td>
            <td>TD</td>
        </tr>
        </p>
    </table>
</body>
SPAN
rowspan="2"
TD TD TD
TD TD TD
TD TD

colspan="2"
TD TD TD
TD TD
TD TD TD
저작자표시

'코딩도전기 > HTML' 카테고리의 다른 글

CODO DAY1 - Front End Programing_HTML이란?  (0) 2023.02.02

관련글

티스토리툴바