웹프로그래밍 4월 4일, 6일 수업

Jimin·2023년 4월 6일
웹프로그래밍
0

웹프로그래밍

목록 보기
4/5

Responsive Image Markup

The resulting responsive image features in HTML 5.1

  • srcset
  • sizes attributes
  • picture element

responsive images

user's viewing environment에 맞춘 이미지를 제공하는 것

⇒ 반응형 이미지는 다음과 같이 작동한다.

  1. 다양한 화면 크기에 맞게 크기가 조정되거나 잘린 여러 이미지를 제공
  2. 브라우저는 현재 보기 환경에 대해 알고 있는 내용에 따라 가장 적합한 것을 선택
  3. 화면 크기는 하나의 요소이지만 해상도, 네트워크 속도, 이미 캐시에 있는 항목, 사용자 기본 설정 등이 있다.

Srcset

srcset 을 사용하면 개발자가 브라우저에서 선택할 이미지 소스 옵션 목록을 지정할 수 있다.
→ 기기의 폭에 따라 다른 이미지 표시
srcset 의 값은 쉼표로 구분된 옵션 목록이며, 해당 목록의 각 항목은 두 부분으로 구성된다.

  • the URL of an image
  • x-descriptor (High-Density Displays) that specifies the target device-pixel-ratio

w : 픽셀 수

이미지 자신이 픽셀 수를 브라우저에게 전달한다.
브라우저는 전달 받은 정보를 바탕으로 어떤 이미지를 표시할지 선택한다.

브라우저는 자신의 화면 너비와 이미지 폭을 비교하고
자신의 브라우저에 부족하지 않은 픽셀 수 중, 최소의 픽셀을 가진 이미지를 선택한다.

<img src="image-URL" alt="" srcset="image-URL #x, image-URL #x"
<img src="/images/turkey-200px.jpg" alt=""
srcset="/images/turkey-400px.jpg 2x,
/images/turkey-600px.jpg 3x" >
<img src="/images/turkey-200px.jpg" alt=""
srcset="/images/turkey-400px.jpg 2x,
/images/turkey-600px.jpg 3x">

출처

Viewport-based selection

반응형 웹페이지를 디자인할 때, image sizes 를 browser viewport
size에 기반하여 변화시키는 것

Viewport란?

스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용한다.
viewport 는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성이다.
viewport 를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있다.

  • 사용법
<meta name="viewport" content=""/>

를 head 사이에 추가해 주면 된다.

<img src="strawberries-640.jpg" alt="baskets of ripe strawberries"
srcset="strawberries-480.jpg 480w,
       strawberries-960.jpg 960w,
       strawberries-1280.jpg 1280w,
       strawberries-2400.jpg 2400w"
sizes="100vw">

이 예에서 크기 속성은 크기 속성의 가장 일반적인 단위인 viewport width units ( vw )를 사용하여 이미지가 전체 뷰포트를 채우도록 브라우저에 알려 주어 브라우저가 작업에 가장 적합한 이미지를 선택할 수 있도록 한다.
예를 들어 100vw는 뷰포트 너비의 100%, 50vw는 50% 등으로 변환된다.

Alternative Image Formats (type Attribute)

<picture>
  <source type="image/webp" srcset="pizza.webp">
  <source type="image/jxr" srcset="pizza.jxr">
  <img src="pizza.jpg" alt="">
</picture>

<figure> & <figcaption>

<figure>

image 와 caption 들이 <figure> 태그를 통해 그룹화 될 수 있다.

<figcaption>

이미지에 시각적 설명을 추가한다.

<figure>
  <img src="html5.png" alt="HTML5" width="200" height="350" /> 
  <figcaption>HTML5 - The Latest Version of HTML</figcaption>
</figure>

Favicon

파비콘은 브라우저 탭과 북마크 목록에서 페이지 제목 왼쪽에 표시되는 작은 아이콘이다.

<link rel="apple-touch-icon-precomposed" 
      sizes="120x120" 
      href="apple-touch-icon-120x120.png">

The form element

  1. form 은 form element를 사용하여 웹 페이지에 추가된다.
  2. form element는 form의 모든 content들에 대한 container이다.
    → buttons, checkboxes, text fields, radio buttons, drop-down menus, etc
  3. form 은 form element의 정보를 서버로 전송하는 Submit button을 포함한다.
  4. form’s parameters information을 server로 어떻게 보내는지 알려준다.

Mailing List Example

<!DOCTYPE html> <html>
<head>
<title>Mailing List Signup</title> <meta charset="utf-8">
</head>
<body>
<h1>Mailing List Signup</h1>
<form action="/mailinglist.php" method="POST">
<fieldset>
<legend>Join our email list</legend>
<p>Get news about the band such as tour dates
and special MP3
releases sent to your own in-box.</p>
<ol>
<li><label for="firstlast">Name:</label>
<input type="text" name="fullname"
id="firstlast">
</li>
<li><label for="email">Email:</label> <input type="text" name="email"
id="email">
                </li>
</ol>
<input type="submit" value="Submit"> </fieldset>
    </form>
</body>
</html>

<form attributes> ... </form> tag

  1. action="url" (required)
    submit 버튼이 클릭될 때, 데이터가 어디로 전송되는지 구체화한다.
  2. method="get" (default)
    • Form data is sent as a URL with ?form_data info appended to the end
    • Can be used only if data is all ASCII and not more than 100 characters
  3. method="post"
    • Form data is sent in the body of the URL request
  4. target="target"
    • 요청 결과로 전송된 페이지를 열 위치를 알려준다.
    • target= _blank = open in a new window
    • target= _top = use the same window

Text-Entry Controls

Single-line text field(한줄입력)

<input 
       type="text"
       name="fullname" 
       value="Jhan" maxlength="50" 
       size="10" >
  1. Name
    변수이름
  2. Value
    form이 로딩될 때 필드에 나타나는 default text
  3. maxlength , minlength
    maximum character limit 설정
  4. Size
    입력 필드의 길이를 표시 가능한 문자 수로 지정

Multiline text-entry field(여러줄입력)

<textarea name="contest_entry" 
          rows="5"
          cols="50"> The band is totally awesome!
</textarea>
  1. pair tag
  2. rows and cols attributes 은 텍스트영역의 크기를 설정한다.

Other common input tag attributes include:

  1. readonly : 값이 바뀌지 않게 하는 속성
  2. disabled : disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없다.
    또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않는다.
  3. Placeholder : 필드에 무엇을 입력해야하는지 힌트를 주는 속성
  4. Required
<textarea name="contest_entry" 
          placeholder="50 words or less" 
          rows="5" 
          cols="50">
</textarea>

The required Attribute

  1. boolean attribute
  2. form submit 전에 필수적으로 입력되어야하는 input field라고 알려준다.
  3. 필수 속성은 다음 입력 유형에서 작동한다:
    text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
<form action="">
  Username: <input type="text" name="usrname" required />
  <input type="submit" />
</form>

Specialized Text-Entry Fields

일반적인 한 줄 텍스트 항목 외에도 암호, 검색어, 이메일 주소, 전화 번호 및 URL과 같은 특정 유형의 정보를 입력하기 위한 여러 가지 입력 유형이 있다.

Password entry field

암호 필드는 문자가 별표(*) 또는 글머리 기호(•) 문자로 표시되지 않는다는 점을 제외하면 텍스트 입력 필드와 동일하게 작동한다.

<label for="form-pswd">Password:</label>
<input type="password" name="pswd" maxlength="12" id="form-pswd">

Search, email, telephone numbers, and URLs

  • HTML5 이전에는 email addresses , telephone numbers , URLs , or search terms 를 수집하는 유일한 방법은 일반 텍스트 입력 필드를 삽입하는 것이었다.
  • HTML5에서 email addresses , telephone numbers , URLs , or search terms 은 필드에서 예상되는 정보 유형에 대해 브라우저에 미리 알려준다.

  1. <datalist> 요소는 <input>에 대해 미리 정의된 옵션 목록을 지정한다.
  2. 사용자는 데이터를 입력할 때 미리 정의된 옵션의 드롭다운 목록 을 볼 수 있다.
  3. <input> 요소의 list 속성은 <datalist> 요소의 id 속성을 참조해야 한다.
<form action="">
  <input type="text" list="browsers" />
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
  </datalist>
</form>

Submit and Reset Buttons through input tag

  1. web form에 추가할 수 있는 여러 종류의 버튼이 있다.
    → 가장 기본적인 것은 submit 버튼이다.
  2. submit 버튼을 클릭하거나 탭하면 수집된 양식 데이터를 즉시 서버로 전송하여 처리한다.
  3. reset button은 form controls 을 초기상태로 되돌린다.
  4. submit button과 reset button 은 모두 input 태그요소로 추가된다.
<p>
  <input type="submit">
  <input type="reset" value="Start over"> 
</p>

A Few More Buttons

image button, custom input button, and the button element 등의 버튼이 더 존재한다.

Image buttons

<input type="image">

Custom input button

<input type="button">

The button element

<button>...</button>

Radio and Checkbox Buttons

checkbox button 과 radio button은 옵션을 제공한다.

Radio buttons through input tag

Radio buttons:
<input type="radio" name="radiobutton" value="myValue1">
male
<br>
<input type="radio" name="radiobutton" value="myValue2" checked> 
female

  1. Radio button group 을 만드는 방법:
    두 개 이상의 Radio button 이 동일한 name 을 가진 경우 사용자는 한 번에 하나만 선택할 수 있습니다.
  2. 해당 name 의 값을 요청하면 선택한 Radio button 에 지정된 값을 얻을 수 있다.
  3. Check box 과 마찬가지로 Radio button 에는 텍스트가 포함되지 않는다.

Checkboxes through input tag

A checkbox:
<input type="checkbox" name="checkbox” value="checkbox" checked>

  1. type : "checkbox"
  2. name : used to reference this form element from JavaScript
  3. value : checkbox와 연결된 텍스트가 없다는 점에 유의해야 한다. 주변 HTML에 텍스트를 제공해야 한다.

Drop-down Menu or List

A menu or list:
<select name="select">
  <option value="red">red</option> 
  <option value="green">green</option> 
  <option value="BLUE">blue</option>
</select>

Additional arguments:

  1. size : 목록에 표시되는 항목 수 (default is "1")
  2. multiple : "true"로 설정하면 원하는 수의 항목을 선택할 수 있다. (default is "false")

File Selection Control

  1. 웹 양식은 단순한 데이터 이상을 수집할 수 있다.
  2. 사용자의 하드 드라이브에서 외부 문서를 전송하는 데 사용할 수도 있다.
<form action="/client.php" method="POST" enctype="multipart/form-data"> 
  <label>Send a photo to be used as your online icon 
    <em>(optional)</em>
    <br>
    <input type="file" name="photo">
  </label>
</form>

Hidden fields

A hidden field:
<input type="hidden" name="hiddenField" value="nyah">
&lt;-- right there, don't you see it?

Hidden fields의 장점?

  1. 숨겨진 필드를 포함하여 모든 입력 필드가 서버로 다시 전송된다.
  2. 이것은 사용자가 볼 필요가 없는(또는 사용자가 보기를 원하지 않는) 정보를 포함하는 방법이다.
  3. 숨겨진 필드의 값은 양식을 제출하기 전에 프로그래밍 방식으로(JavaScript 사용) 설정할 수 있다.

Date and Time Controls

Date input control

<input type="date">

Time input control

<input type="time">

Date/time control

<input type="datetime-local">

Specifies a month in a year

<input type="month">

Specifies a particular week in a year

<input type="week">

Numerical Inputs

  1. number 와 range input types은 숫자 데이터를 수집한다.
  2. 숫자 및 범위 입력 유형 모두 입력에 허용되는 최소 및 최대 값을 지정하기 위해 min 및 max 속성을 허용한다.

Number input

<input type="number">

Slider input

<input type="range">

Color Selector

  • Color picker
<input type="color">

Input Type: range

  1. The <input type="range"> 는 범위 의 값을 포함해야 하는 입력 필드에 사용된다.
  2. 브라우저 지원에 따라 입력 필드가 슬라이더 컨트롤로 표시될 수 있다.
<form action=""> Points:
<input type="range" name="points" min="0" max="10" /> <input type="submit" />
</form>

Form Accessibility Features

  1. 많은 접근성 기능과 마찬가지로 new form element 는 form 의 component 간의 semantic connection 을 명확하게 만드는 방법을 제공한다.
  2. resulting markup 은 의미상 더 풍부할 뿐만 아니라 스타일 시트 규칙에 대한 "hook" 역할을 할 수 있는 더 많은 요소가 있다.
  • Labels
  • Fieldset and legend

hook : 여러 기능들을 한 번에 묶어둔 것

Labels

  1. label element 는 descriptive text 를 각각의 form field 와 연결하는데 사용된다.
  2. 음성 기반 브라우저를 사용하는 사용자에게 중요한 컨텍스트를 제공한다.
  3. 각 label element 는 정확히 하나의 form control 과 연결된다.

Label, Input 참고

Labels 사용하는 두가지 방법

Implicit association

<label>Male: <input type="radio" name="gender" value="M" /></label>

Male:

Explicit association

<label for="form-login-username">Login account:</label>
<input type="text" name="login" id="form-login-username" />

Login account:

Fieldset and legend

  1. fieldset element 는 form control 의 logical group을 나타내는데 사용된다.
  2. fieldset 에는 포함된 필드에 대한 캡션을 제공하는 범례 요소도 포함될 수 있다.
  3. legend는 fieldset의 이름을 정해준다.

Fieldset and legend 참고

<fieldset>
  <legend>Customer Information</legend>
  <ol>
    <li>
      <label>Full name: <input type="text" name="name"/></label>
        </li> 
    <li>
      <label>Email: <input type="text" name="email" />
      </label>
    </li> 
    <li>
      <label>State: <input type="text" name="state" /></label>
    </li>
  </ol>
</fieldset>
Customer Information
  1. Full name:
  2. Email:
  3. State:
profile
Jimin
https://github.com/Dingadung
이전 포스트

웹프로그래밍 3월 28일, 30일 수업

다음 포스트

웹프로그래밍 4월 11일 수업

0개의 댓글