<form> 태그는 사용자로부터 데이터를 입력받을 때 사용하며, 사용자가 입력한 데이터를 데이터베이스에 입력하기 위하여 사용되는 필수 요소 중 하나입니다. 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다.

전체적인 구조와 동작방식에 대해 알아보고 사용빈도와 중요도가 높은 <button> , <input> 태그들은 다음 시간에 조금 더 자세하게 알아보도록 하겠습니다.

 

목차

1. form의 기본구조 와 동작방식

2. form의 자식태그

3. form의 속성과 메서드

 

1. form의 기본구조와 동작 방식

@form의 기본구조

 

   @코드로 보기
    <form>
        <fieldset> <!--form 태그 내에 같은 요소들끼리 그룹화 시켜주는 요소-->
            <legend></legend> <!--그룹화 시킬 요소들의 이름-->
        </fieldset>
    </form>
 
 

 

@form의 동작 방식

(1) 사용자가 폼을 입력한 후 submit 하면 정보가 웹서버에 전송된다.

(2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다.

(3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.

(4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다.

 

2. form의 자식태그

<button>  클릭 가능한 버튼이다. 기본 type은 submit이다. (사용빈도 높음)
<input>  22가지 type을 지원한다. 기본 type은 text이다. <form>과 가장 많이 쓰이는 요소 중 하나이다. (사용빈도 높음)
<label> <form>에 '라벨'을 달아주는 역할이다. 
<label> 의 for 속성과 <input> 의 id 속성이 서로 같거나 <label>의 자식으로 <input>을 두어야 한다.
<input>에 focus가 오면 스크린리더가 <label>을 읽기 때문에 접근성 측면에서 중요하다.
버튼이 너무 작더라도 <label>을 눌러 선택, 토글할 수 있어 유용하다.
<select> <option>의 드랍다운을 만들어준다. 기본값으로 가장 첫번째 <option>이 선택되며 직접 입력은 불가능하다.
size 속성으로 드랍다운이 아니라 한 번에 여러 개를 보여주는 스크롤로 만들 수 있다.
<optgroup> <select>를 카테고리별로 묶을 수 있다.
<datalist> <option>의 드랍다운을 만들어준다. 검색기록 자동완성과 같이 직접 입력이 가능하다.
<datalist> 의 id 속성과 <input> 의 list 속성이 서로 같아야 한다.
<option> 드랍다운 리스트에 어떤 옵션을 담을지 정의한다. value 속성을 가진다.
<fieldset> <form> 에서 관련 요소를 그룹화할 때 사용한다. 관련 요소 주위에 상자를 그려준다.
<legend> <fieldset> 요소 첫번째 자식으로 <fieldset> 그룹을 설명하는 캡션 역할을 한다.
<output> <form>의 oninput속성에 있는 계산을 수행하고 결과를 <output> 요소에 표시한다.
<textarea> 여러 줄을 입력할 수 있는 텍스트필드이다. rows 속성은 몇 줄 보일지를, cols 속성은너비를 지정해준다.

 

3. form의 속성과 메서드

 

@form의 속성

name <form> 의 이름을 적는다. (text)
autocomplete 자동완성 기능 사용여부를 지정한다. (on, off)
novalidate 제출 시 입력된 값의 유효성을 검사하지 않도록 지정한다. (novalidate)
action  <form> 제출 시 데이터를 어디로 보낼지 적는다. (URL)
method  데이터를 보낼 때 사용할 HTTP 메서드를 지정한다. (get, post)
charset <form> 제출 시 사용할 문자 인코딩을 지정한다. (character_set)
enctype POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다.
(application/x-www-form-urlencoded, multipart/form-data, text/plain)
target form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다.
(_blank, _self, _parent, _top)
rel 현재 문서와 연결된 리소스 간의 관계를 적는다.
(external, help, license, nofollow, noopener, noreferrer, opener, prev, next, search)

 

@form의 메서드

reset() <form> 내부의 모든 값(value)을 초기화해준다. 초기화 버튼(<button type="reset">)을 클릭한 것과 같은 효과이다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.

submit() <form> 을 제출한다. 제출 버튼(<button type="submit">)을 클릭한 것과 같은 효과이다.

 

하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

A태그를 사용하며 '<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지 </a>' 형식으로 사용합니다. 텍스트, 이미지, 버튼 등의 형태에 링크를 걸어 사용할 수 있습니다.

목차

1. A태그의 속성

2. A태그의 사용

3. A태그의 속성 값 변경

 

1. A 태그의 속성

@<a>

<a>는 'anchor', 즉, '닻'이라는 뜻입니다.

우리는 보통 인터넷 서핑, 웹서핑이라는 말을 많이 사용하는데 인터넷, 정보의 바다를 항해한다고도 표현합니다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어집니다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용합니다.

 

@href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현합니다.

href는 'Hypertext Reference'의 약자입니다.

 

@target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 줍니다.

 target의 속성은

 

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

 

정리하면 아래와 같은 구조로 사용하게 됩니다.

'<a href="사이트 또는 이동할 문서의 위치" target="페이지를 띄울 위치"> 링크에 사용될 문자 또는 이미지 </a>'

 

2. A태그의 사용

@코드로 보기

<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>

위와 같이 작성하게 되면 '네이버로 이동'이란 텍스트를 클릭하면 '_blank' 값에 의해 새창으로 네이버가 연결되게 됩니다.

 

<a href="https://www.naver.com/" target="_blank"><img src="이미지_경로"></a>
또는 이미지를 넣어주고 이미지를 클릭시 이동할 수 있도록 링크를 걸 수도 있습니다.

 

 

 

3. A태그의 속성 값 변경

하이퍼링크는 기본적으로 방문이 되지 않았을 때에는 파란색, 방문이 되었을 때는 자주색으로 표현되며 밑줄을 가지고 있습니다. 기능적으로 편리하기는 하나 보기에 좋지 않은 경우가 많은데 그러한 속성 값들을 변경하는 방법들을 알아보겠습니다.

 

@ text-decoration-line 속성 (하이퍼링크 밑줄 없애기)

text-decoration-line 속성은 선이 생성되는 위치를 변경하는 값입니다.

주로 하이퍼링크의 밑줄을 없애기 위해서  'text-decoration-line' 속성을 none으로 지정하여 사용합니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

  • none : 선 없음
  • underline : 밑줄
  • overline : 윗줄
  • line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

 

@코드로 보기

   <style>     
        a {
            text-decoration-line: none;
        }
   </style> 

위와 같이 <style></style> 탭에 a태그에 대한 설정 값을 넣어 주거나

 

@코드로 보기

<a href="https://www.naver.com/" target="_blank" style="text-decoration-line: none;">네이버로 이동</a>

a태그 안에 직접 속성값을 넣어주시면 됩니다.

 

 

@ text-decoration-style 속성

text-decoration-style 속성은 선의 모양을 바꾸기 위하여 사용합니다.

text-decoration-style 속성은 다음의 5가지 값을 가질 수 있습니다.

사용방식은 text-decoration-line 속성의 방식과 같습니다.

  • 실선 text-decoration-style: solid;
  • 점선 text-decoration-style: dotted;
  • 굵은 점선 text-decoration-style: dashed;
  • 이중선 text-decoration-style: double;
  • 물결선 text-decoration-style: wavy;

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현할 수 있는 태그를 제공하고 있습니다.

STYLE 속성을 이용하여 다양한 속성 부여도 가능합니다. CSS를 활용하여 다양한 연출이 가능하며 TABLE 태그와 같이 많이 사용되는 태그 중 하나입니다. CSS를 활용한 방법들은 다음 시간에 정리하도록 하고 기본적이 LIST태그에 대해서 알아보겠습니다.

목차

1. <ul></ul> 순서가 없는 목록

2. <ol></ol> 순서가 있는 목록

3. <dl></dl> 정의 목록

 

1. <ul></ul> 순서가 없는 목록

UNORDERED LIST의 약자로 HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본적으로 글머리 기호인 검은색의 작은 원(bullet)이 표시된다. 

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

 

disc 검정색 작은 원 모양 (기본설정)
circle 흰색 작은 원 모양
square 사각형 모양
none 아무 모양도 없음.
   
@코드로 보기
 
    <ul style="list-style-type:circle">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>

 

@결과

 

2. <ol></ol> 순서가 있는 목록

ORDERED LIST의 약자로 순서가 있는 HTML 목록은 <ol> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본 마커로 아라비아 숫자가 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

 

list-style-type 속성

  • decimal : 숫자 (기본설정)
  • upper-alpha or A : 영문 대문자
  • lower-alpha or a : 영문 소문자
  • upper-roman or I : 로마 숫자 대문자
  • lower-roman or i : 로마 숫자 소문자
   @코드로 보기
    <ol style="list-style-type:upper-alpha">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ol>

 

@결과

또는

@코드로 보기   

    <ol type="a">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ol>

 

@결과

3. <dl></dl> 정의 목록

 

DEFINITION LIST의 약자로 HTML은 설명 목록이라고 해서 정의 리스트를 지원하는데, 용어와 그에 대한 정의를 모아놓은 목록으로써 <dl> 태그로 표시한다. <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

<dd> 태그 영역은 자동으로 들여 쓰기가 적용된다.

   @코드로 보기
    <dl>
        <dt>제목</dt>
        <dd>내용1</dd>
        <dd>내용2</dd>
        <dd>내용3</dd>
    </dl>

 

@결과

 

※ <table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의합니다.

테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.

<tr> 요소는 테이블의 각 행(row), <th> 요소는 각 열의 제목, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.

또한, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.

목차

1. 속성

2. 기본 구조

 

1. 속성

@속성명 속성값설명

table table전체를 감싸는 태그
caption table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본
tr 테이블의 행을 의미하는 태그. 자손으로 th td가 반드시 있어야 한다.
th 테이블의 제목 셀()을 의미하는 태그. 부모인 tr안에 있어야 한다.
css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬.
td 테이블의 일반 셀()을 의미하는 태그. 부모인 tr안에 있어야 한다.
css기본값: 왼쪽정렬

 

align   left
center
right
주변 텍스트에 따른 테이블의 정렬 방법을 명시함.

background-color
bgcolor


rgb(x,x,x)
#xxxxxx
색상명
테이블의 배경색을 명시함.

border

1
0
테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함.

cellpadding

픽셀 셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함.

cellspacing

픽셀 셀(cell)과 셀 사이의 공간을 명시함.

frame

void
above
below
hsides
lhs
rhs
vsides
box
border
테이블에서 보이는 바깥쪽 테두리 부분을 명시함.

rules

none
groups
rows
cols
all
테이블에서 보이는 안쪽 테두리 부분을 명시함.

summary

텍스트 테이블 콘텐츠의 개요를 명시함.

width

픽셀
%
테이블의 너비를 명시함.

 

colspan 같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수">
rowspan 다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수">

 

colgroup 열을 그룹으로 묶을 수 있도록 해주는 태그
col colgroup의 자손으로 열단위를 나눌 수 있다.
span속성을 사용하여 몇 열을 그룹으로 묶을지 설정
ex) <col span="3"> => 3열을 그룹으로 묶음

 

2. 기본 구조

@코드로 보기

<!DOCTYPE html>
<html lang="kr">
<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>board</title>
    <style>
        table {
            border: 1px solid black;/* 표 테두리 (1px의 굵기 / 실선 / 검정색 )*/
            border-collapse: collapse;/*테두리 1줄만 표시*/
        }
        th, td {
            border: 1px solid black;
            padding: 10px;/*셀 안쪽의 여백(패딩)*/
            text-align: center;/*가운데 정렬*/
            font-size: 10px;/*폰트 사이즈*/
        }
        th {
            background-color: gray;/*th 열만 배경색 지정*/
        }
    </style>
</head>
<body>
    <table>
        <caption>테이블 만들기</caption> <!--테이블 이름-->
        <tr> <!--첫번째 행-->
            <th>제목1</th><!--첫번쨰 열 th를 사용하여 제목 셀로 지정-->
            <th>제목2</th><!--두번쨰 열-->
            <th>제목3</th><!--세번쨰 열-->
        </tr>
        <tr><!--두번째 행-->
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
        </tr>
        <tr><!--세번째 행-->
            <td>내용4</td>
            <td>내용5</td>
           <td bgcolor="gray">내용6</td> <!--인라인 스타일로 직접 스타일 적용-->
        </tr>
    </table>
   
</body>
</html>

 

@결과

 

위에 같이 기본적으로는 <style></style> 탭 내에 테이블에 대한 기본 속성 값을 지정하여 주고 , <body></body> 탭에서는 테이블의 구조와 내용만 작성하는 형식을 주로 사용하며 '내용 6' 셀과 같이 인라인 스타일로 직접 속성값을 지정하여 주는 방식도 있습니다. CSS파일로 속성 값들을 따로 관리하는 방법은 나중에 따로 정리하도록 하겠습니다. 

<style></style> 탭의 속성값들은 '1. 속성'에 정리해 놓은 속성 값 외에도 폰트사이즈나 컬러 등 기본적인 속성 값들도 지정하고 셀 내용은 텍스트뿐만 아니라 이미지나 링크 등도 삽입하여 사용할 수 있습니다.

+ Recent posts