8. Form & Semantic Tags

김관주·2023년 10월 11일

웹시스템

목록 보기

8/22

HTML Form

Form in HTML

<form> is used to define an interactive area on a web page where users can input data and interact with the web application.
Plain HTML 에서는 사용자 입력 정보를 서버 전송하기 위해서는 HTML 웹 폼 요소들은 반드시 form 안에 포함되어야 함

<form>
<input type=“text” name=“search” />
<input type=“submit” name=“search” />
</form>

But, JavaScript program에서는, form element들을 <form> tag 없이도 사용
- Ajax (XMLHttpRequest), Fetch API, etc.

`<form>` : form tag

<form>은 모든 form elements (즉, control)을 담을 수 있는 container
- Name 속성: form의 이름을 지정, JavaScript 에서 사용
- Action 속성: form 데이터를 처리할 웹서버 응용 프로그램 (url), 혹은 JavaScript를 지정
  - submit 이 클릭되면 브라우저가 action 속성에 지정된 프로그램에 연결하고(send request), 사용자 입력 데이터 전송과 함께 프로그램의 실행을 지시
- Method 속성: form에 입력된 Data가 전송되는 방식을 지정 (HTTP GET or POST method)

<form name="newform" action="https://api.duckduckgo.com/?q=" method="GET"/>

Elements in form

Form element들의 property
- Type property: form element의 type을 구분함
- Name property: form element가 가지는 data를 name으로 구분함
Selected form elements

`<input>` property: text, password

Type property -> text
- 한 줄의 text data를 받음
Size property <- 입력 받을 문자의 크기(visible width)

<input type=“text” name=“company” size=“5” maxlength=“5”/>

Type property -> password
- 한 줄의 text data를 받음 <- text와 동일
- 문자 값이 * 로 숨겨져 보이지 않음
- 가시적으로는 보안요소가 있으나, 암호화 적용은 이루어지지 않음

<form>
  ID : <input id='userid' type='text'/><br>
  비밀번호 : <input id='pwd' type='password'/>
</form>

`<input>` property: checkbox, radio

Type property -> radio
- 하나만 선택
- 같은 name property를 가진 radio와 같은 group으로 인식됨
Type property -> checkbox
- 복수개의 선택이 가능함

<input type=“radio” name=“gender” value=“male”>Male<br>
<input type=“radio” name=“gender” value=“female” checked =“checked” />Female<br>

Please Check it if this is Spam <input type=“checkbox” name=“spamList” checked=“checked” />

`<input>` property: button property

<input type=“button”>
- value: 버튼에 출력되는 문자열
- <input type=“button”>은 아무 기능도 가지지 않음. JavaScript 코드로 연동해야 함

<input type='button|reset|submit|image' name='name of the button'
       value='WORD ON THE BUTTON' onclick='action'/>

value에 있는 값이 버튼의 이름으로 출력되어 있는 것을 확인할 수 있다.

`<button>` element

<button>

주의: <button> form 안에 있는 경우, default type이 submit임. 따라서, button이 click 되는 경우 page reload 됨
Without <form>, <button> can be used to trigger JavaScript functions or actions

<button type='button|reset|submit'
        name='name of the button'
        value='INITIAL VALUE OF BUTTON'>
    word on the button or url of the button image</button>

value가 아니라 외부에 적힌 문자열(word on...~)이 button위에 출력된다.
input 태그와 button 태그의 차이를 확인하자.

Button: image and value

Value
- Input의 경우는 버튼의 이름
- Button의 경우는 버튼이 가지는 값
Button Image
- <button> tag의 경우

<button><img src=“/index.jpg”></button>

<input> tag의 경우
input type이 image인 경우에 src attribute가 working 함

<input type="image" src="/submit.gif" alt="Submit" width="48" height="48">

type에 image라고 지정해야한다.

`<select>`

여러 개의 후보 중 하나를 선택
요소가 너무 많아 구분이 필요한 경우 <optgroup label=“group name”>로 구분

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Multiple property -> Multiple 선택을 가능하게 해 줌

<select name=“car” multiple>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select>

select element가 표시되는 시점에 특정 항목을 default로 지정해 표현 가능한가?
- option tag의 selected attribute 사용
일반적인 상황(selected 적용하지 않을 경우))

<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select>

가장 첫번째 옵션이 default로 제시

Selected 적용

<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel" selected>Opel</option>
 <option value="audi">Audi</option>
</select>

selected 옵션이 적용된 세번째 옵션이 default로 제시

`<label>`

Form element에 문구를 붙여 줌
- Element 내부에 직접 포함 (implicit)
- for property로 지정 (explicit)
  - for property는 지정하는 form의 id와 일치해야함

<label> 요소는 각 라디오 버튼과 연결된 레이블을 나타냅니다. for 속성은 레이블이 어떤 입력 필드와 연결되는지 지정합니다

<p>Click on one of the text labels to toggle the related control:</p>
<form action="demo_form.asp">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br><br>
    <input type="submit" value="Submit">
</form>

HTML5 Semantic Tags

Why Semantic Tags?

웹 문서를 “의미론적”으로 구조화 시키는데 사용됨
Semantic Tag들을 사용하여 HTML 문서를 제작하면, 프로그램에게 해당 정보가 어떤 (구조적) 의미를 가지는지 잘 설명할 수 있음
기존 div 및 id/class로 구조화 하던 문서에서, tag 스스로의 의미에 기반한 문서 제작
Tag들은 기본적인 구조만 제공 → 결국 CSS로 적합한 “look”을 만들어야 함

HTML5 Semantic Tags

<header> : 페이지나 섹션, article의 머리말을 표현하는 태그 (optional)
<nav> : 내비게이션, hyperlink들을 모아 놓은 특별한 섹션
<section> : 문서의 장 혹은 절을 구성하는 역할
<article> : 본문 내용에 대한 보조적인 내용을 담는 영역. 보조기사, 블로그포스트, 댓글 등
<aside> : 왼쪽이나 오른쪽에 배치하는 “본문 흐름 외 내용들“ 노트, 팀, 논평 등
<footer> : 꼬리말 영역, 저자 및 저작권 등의 정보 (optional)

HTML5 tag only

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantic Tags</title>
</head>
<body>
<header>Header</header> <nav>Nav</nav>
<aside>Aside</aside>
<section>Section</section>
<footer>Footer</footer>
</body>
</html>

추가된 tag만 집어넣었다 어떻게 보일까?

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantic Tags</title>
<style>
html, body {margin: 0; padding: 0; height: 100%;}
.header {width: 100%; height: 10%; background: lightgreen;}
.nav {width: 20%; height: 80%; float: left; background: coral;}
.aside {width: 20%; height: 80%; float: left; background: orchid;}
.section {width: 60%; height: 80%; float: left; background: turquoise;}
.footer {width: 100%; height: 10%; clear: both ;background: yellow;}
</style>
</head>
<body>
<header class="header">Header</header>
<nav class="nav">Nav</nav>
<section class="section">Section</section>
<aside class="aside">Aside</aside>
<footer class="footer">Footer</footer>
</body>
</html>

tag들에 필요한 스타일을 집어넣으면 가능

Responsive Web(반응형 웹)

정의: 사용자 및 사용자 기기의 요구사항에 맞추어 “반응”
배경: 사용자 기기의 다양화 (휴대폰, 태블릿, 데스크탑, TV, 웨어러블)
- “Mobile First” <- HTML source 만으로 특정 장치에 customize된 rendering
Responsive Web Design by Ethan Marcotte (May 25, 2010)

Viewport Meta

Viewport Meta tag는 페이지의 크기와 배율을 제어하는 방법에 대한 정보를 browser에게 제공함
- Mobile browser는 PC 화면 너비(980px)로 렌더링 하고 조정함
- 조정이 적절하게 나타나지 않을 가능성이 존재함 (double tap/click이 필요할 수 있음)
Mobile device에서 Rendering할 부분과 실제로 보이는 부분의 조정이 가능
- width=device-width: 웹 문서의 너비 = 기기 화면 너비 (장치 독립적인 픽셀로 화면 너비를 일치시키도록 함)
- initial-scale=1: CSS 픽셀과 장치 고유의 pixel 사이에 1:1 관계를 유지함
  - initial-scale이 없다면 가로 모드 회전에서 페이지 너비가 일정하게 유지되는 문제 발생 가능함

Viewport Meta 정보 입력하기

<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>
</head>

medium-dpi는 중간 픽셀 밀도를 나타내는 용어입니다. 여기서 "dpi"는 "Dots Per Inch"의 약자로, 인치당 도트의 개수를 나타냅니다. "medium-dpi"는 중간 수준의 픽셀 밀도를 가리키며, 모바일 기기의 화면에서 픽셀이 어떻게 배치되는지를 나타내는 지표 중 하나입니다

Media Query (CSS 스타일에 적용할 수 있는 간단한 필터)

W3C created media queries as part of the CSS3 specification(규격) (more like a filter)
- A logical expression that is either true or false
- “,” (OR) “and” (AND) “not” (부정) “only” (media query를 지원하는 )
@media

.title { font-size: 40px; }
@media (max-width: 600px) { .title { font-size: 20px; }

40px이 기본이며, 600px 보다 작은 화면에서는 20px이 적용된다는 것을 해석할 수 있어야 한다.

Use with <link>
- media 조건이 만족하는 경우, 지정된 CSS를 load

<link href="cssfile.css"
media="screen and (min-width: 512px) and (max-width: 1024px)"
rel="stylesheet">

Media Query : media type

쿼리를 날려서 어떤상황인지 파악한다.

Media Query : media feature

Responsive Web Pattern

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Web Example</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        #menu {
            width: 260px;
            float: left;
            background-color: coral;
        }
        #section {
            width: 700px;
            float: right;
        }
        @media screen and (max-width: 767px) {
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="https://www.naver.com">Naver</a></li>
        <li><a href="https://www.daum.net">Daum</a></li>
        <li><a href="https://www.ajou.ac.kr">Ajou</a></li>
    </ul>
</div>
<div id="section">
    <h1>Two Towers</h1>
    <p>Merry and Pippin, taken captive by the Uruk-hai, learn that one of the orcs from
        Mordor, Grishnákh, knows about the ring and believes it to be on one of them. </p>
</div>
</body>
</html>

* 선택자를 사용하여 모든 HTML 요소에 대해 마진과 패딩을 0으로 설정합니다.
body 요소에 대한 스타일을 정의합니다.

width: 960px;: body 요소의 너비를 960px로 설정합니다.
margin: 0 auto;: body 요소를 수평으로 가운데 정렬합니다.
overflow: hidden;: body 요소가 자식 요소의 내용을 넘어가는 경우 스크롤바를 생성하지 않고 내용을 감춥니다.

#menu와 #section이라는 두 개의 요소에 대한 스타일을 정의합니다.

#menu:
- width: 260px;: 메뉴 요소의 너비를 260px로 설정합니다.
- float: left;: 메뉴를 왼쪽으로 띄웁니다.
- background-color: coral;: 메뉴의 배경 색상을 산호색(coralm)으로 설정합니다.
#section:
- width: 700px;: 섹션 요소의 너비를 700px로 설정합니다.
- float: right;: 섹션을 오른쪽으로 띄웁니다.

@media screen and (max-width: 767px): 화면 크기가 767px 이하일 때 적용되는 스타일을 정의합니다.

body { width: auto; }: body 요소의 너비를 자동으로 설정합니다.
#menu { width: auto; float: none; }: 메뉴 요소의 너비를 자동으로 설정하고, 띄움 속성을 제거하여 수직으로 쌓이게 합니다.
#section { width: auto; float: none; }: 섹션 요소의 너비를 자동으로 설정하고, 띄움 속성을 제거하여 수직으로 쌓이게 합니다.

이렇게 구성된 스타일은 데스크톱 화면에서는 왼쪽에 메뉴가, 오른쪽에 섹션이 나란히 배치되는 레이아웃을 제공하며, 화면 크기가 작아지면(767px 이하) 메뉴와 섹션이 수직으로 쌓이도록 조정됩니다. 이것은 반응형 웹 디자인의 한 예시입니다.

767px 이상일때

767px 이하일때

김관주

이전 포스트

7. DOM (Document Object Model)

다음 포스트

8. Form & Semantic Tags

웹시스템

HTML Form

Form in HTML

`<form>` : form tag

Elements in form

`<input>` property: text, password

`<input>` property: checkbox, radio

`<input>` property: button property

`<button>` element

Button: image and value

`<select>`

`<label>`

HTML5 Semantic Tags

Why Semantic Tags?

HTML5 Semantic Tags

HTML5 tag only

Responsive Web(반응형 웹)

Viewport Meta

Media Query (CSS 스타일에 적용할 수 있는 간단한 필터)

Media Query : media type

Media Query : media feature

Responsive Web Pattern

7. DOM (Document Object Model)

9. Interfacing and REST

0개의 댓글

8. Form & Semantic Tags

웹시스템

HTML Form

Form in HTML

<form> : form tag

Elements in form

<input> property: text, password

<input> property: checkbox, radio

<input> property: button property

<button> element

Button: image and value

<select>

<label>

HTML5 Semantic Tags

Why Semantic Tags?

HTML5 Semantic Tags

HTML5 tag only

Responsive Web(반응형 웹)

Viewport Meta

Media Query (CSS 스타일에 적용할 수 있는 간단한 필터)

Media Query : media type

Media Query : media feature

Responsive Web Pattern

7. DOM (Document Object Model)

9. Interfacing and REST

0개의 댓글

`<form>` : form tag

`<input>` property: text, password

`<input>` property: checkbox, radio

`<input>` property: button property

`<button>` element

`<select>`

`<label>`