9 분 소요

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있습니다.

  • GIF(graphic Interchange Form) = 표시할 수 있는 색상 수가 최대 256 가지뿐이지만 다른 이미지 파일 형식에 비해 파일크가기 작기 때문에 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있습니다.

  • JPG/JPEG(Joint Photographic Experts Group) = 사진을 위해 개발된 형식으로 GIF에 비해 다양한 색상과 명암을 표현할 수 있습니다. 저장을 반혹하다 보면 화질이 떨어질 수도 있습니다.
  • PNG(Portable Network Graphics) = 투명 배경을 만들면서 다양한 색상도 표현할 수 있으며 네트워크용으로 게발되었기 때문에 최근 많이 사용합니다.

<img> 태그

웹 문서에 이미지를 삽입할 때 사용합니다.

<img src="경로"> 속성

  • src 속성 = 이미지 파일 경로입니다. 웹 문서 파일의 위치를 기준으로 이미지 경로 지정합니다.

  • alt 속성 = 이미지를 설명하는 대체 텍스트 입니다.

  • width, height 속성 = 이미지 크기를 조정합니다. 이 속성을 사용하지 않으면 원래 이미지 크기대로 표시됩니다. 이 속성을 이용해 화면에 표시하는 이미지 크기 조정할수 있습니다. 하지만 이미지 파일의 용량은 그대로입니다.

  • <figure>, <figcaption> 태그

    • <figure>태그는 설명글을 붙일 대상을 지정합니다. 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용합니다. 설명 글을 표시할 때 <figure>로 먼저 묶어줘야 합니다.

    • `<figcaption>태그는 이미지를 설명하는 대체 텍스트 입니다. 이미지를 표시할 수 없는 상황일 때 대체 텍스트를 표시합니다.

    • See the Pen by jun (@junja) on CodePen.

링크, 하이퍼링크

하이퍼링크

  • 다른 문서 ,혹은 다른 사이트로 바로 연결해 주는 기능입니다. 외부 사이트나 외부 페이지로도 연결이 가능합니다. 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있습니다.

<a>태그, href 속성

  • <a href="링크할 주소"> 텍스트 </a> 반드시 href 속성을 함께 사용해서 어떤 대상으로 연결하는지 알려 주어야 합니다.
<a>태그에서 사용할 수 있는 속성
  • href = 링크한 문서나 사이트의 주소를 입력합니다. herf와 target 속성은 가장 많이 이용되는 속성입니다.
  • target = 링크한 내용이 표시될 위치를 지정합니다.
  • download = 링크한 내용을 보여 주는 것이 아니라 다운로드합니다.
  • rel = 현재 문서와 링크한 문서의 관계를 알려줍니다.
  • hreflang = 링크한 문서의 언어를 지정합니다.
  • type = 링크한 문서의 파일 유형을 알려줍니다.

target 속성

  • 새 택에서 링크를 열수있습니다. 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때 사용합니다. 현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시합니다.
사용할 수 있는 값
  • _blank = 링크 내용이 새 창이나 새 탭에서 열립니다.
  • _self = target 속성의 기본값으로 링크가 있는 화면에서 열립니다.
  • _parent = 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다.
  • _top = 프레임을 사용했을 때 프레임을 벗어나 링크 내용을 전체 화면에 표시합니다.

See the Pen by jun (@junja) on CodePen.

앵커

  • 한 페이지 안에서 점프하는 기능입니다. 예를 들어서 제가 만든 사이트의 글이 너무 길어서 스크롤을 하여 많이 내려야한다면 앵커를 이용해서 한번에 원하는 지점으로 갈수 있습니다.
  • 앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만들어야 합니다. <a>태그의 href 속성을 사용해 링크합니다. 다만 앵커 이름앞에 #을 붙여 앵커를 표시합니다.
  • <태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>, <a href="#앵커 이름"> 텍스트 또는 이미지 </a>

See the Pen by jun (@junja) on CodePen.

이미지맵

  • <area태그, usemap 속성
  • 이미지맵: 한 이미지 상에 여러 다른 링크를 만드는 기능입니다.
<area>태그의 속성
  • alt = 대체 텍스트를 지정합니다.
  • coords = 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정합니다.
  • download = 링크를 클릭했을 때 링크 문서를 다운로드합니다.
  • href = 링크 문서(사이트) 결로를 지정합니다.
  • media = 링크 문서(사이트)를 어떤 미디어에 최적화신킬지 지정합니다.
  • rel = 현재 문서와 링크 문서 사이의 관계를 지정합니다.
    • 속성 값 = iternate, bookmark, help, license, next, nofollow, norefere, prefetch, prev, search, tag
  • shape = 링크로 사용할 영역의 형태를 지정합니다.
    • 속성 값 = default, rect, circle, poly
  • target = 링크를 표시할 대상을 지정합니다.
    • 속성 값 = _blank, _parent, _self, _top, 프레임 이름
  • type = 링크 문서의 미디어 유형을 지정합니다.

좌표 구하는 링크입니다.

See the Pen by jun (@junja) on CodePen.

form 폼

  • 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) 입니다.
  • 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들입니다.
  • 이런 작읍은 모두 데이터베이스를 기반으로 합니다.
  • 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HMTL 태그 입니다.
  • 여기서 알아볼것은 서버 프로그래밍에 대해서는 다루지 않고 브라우저에 표시될 폼을 만드는 태그들에 대해서 알아보겠습니다.

form태그

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

<form>태그에서 사용 하는 속성들

  • method = 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다.
    • 속성값
      • get = 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4,096byte까지의 데이터만 서버로 넘길 수 있습니다.
      • post = 대부분 이 방식을 사용합니다. 사용자의 입력을 표준 입력으로 넘겨주기 대문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않습니다.
  • name = 폼의 이름을 지정합니다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용합니다.
  • action = <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정합니다.
  • target = <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

<label>태그

  • 폼 요소에 레이블을 붙이는 태그입니다. 라디오 버튼이나 체크 박스에서 텍스트 부븐을 클릭해도 라디오 버튼과 체크 박스 버튼이이 선택됩니다.
  • <label [속성="속성 값"]> 레이블 <input ...> </label> 인풋 태그를 전체로 묶어서 사용할수도 있습니다.
  • <label for="id이름"> <input id="id이름" [속성="속성 값"]> </label> for에 input id와 같은 값을줘서 서로 연결시켜준후에 사용합니다.

<fieldset>태그

  • 폼 요소를 그룹으로 묶는 태그입니다.
  • <fieldset [속성 ="속성 값"]> ... </fieldset>

<legend>태그

  • 그룹으로 묶는 구역에 제목을 붙이는 태그 입니다.

<input> 태그

  • 입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정합니다
  • type 속성 값에 따라 함게 사용할 수 있는 속성들도 달라집니다.
  • <inout type="유형" [속상 = " 속성 값]>

<input>태그의 id 속성

  • 여러 번 사용된 폼 요소를 구분하기 위해 사용합니다
  • <label> 태그를 이용해 캡션을 붙일 수 있습니다.
  • CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있습니다.

<input>태그의 Type

  • hidden = 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다.

    • <input type="hidden" name="이름" value="서버로 넘길 값">
    • 사용자는 안봐도 상관없지만 관리자한테는 필요하다 할때 이용됩니다. 예를 들어서 가입정보를 입력하는 form에서 사용자가 가입한 날짜를 따로 관리하고 싶을때 사용도 가능합니다.

  • text = 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.

    • 주로 아이디나 이름, 주소 등 텍스트를 입력합니다.
    • 텍스트 필드와 패스워드 필드의 속성입니다.
      • name = 텍스트 필드를 구별할 수 있도록 이름을 붙입니다.
      • size = 텍스트 필드에 길이를 지정합니다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대 입력 가능한 글자 수가 10개인데 size를 5로 지정한다면 텍스트 필드 크기가 5개 글자 크기에 맞추어져 나머지 5개 글자를는 화면에 보이지 않습니다
      • value = 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용입니다. 이 속성을 사용할지 않으면 빈 텍스트 필드가 표시됩니다. 단, 패스워드 필드에서는 value 속성이 없습니다.
      • maxiength = 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정합니다.

  • search = 검색 상자를 넣습니다

    • 검색 창에 x 표시가 되어 검색어 삭제가 쉬워집니다.

  • tel = 전화번호 입력 필드를 넣습니다.

  • url = URL주소를 입력할 수 있는 필드를 넣습니다.

  • email = 메일 주소를 입력할 수 있는 필드를 넣습니다.

    • 메일 주소 형식 자동 체크됩니다.

  • password = 비밀번호를 입력할 수 있는 필드를 넣습니다.

    • 사용자가 입력하는 내용이 “*” 혹은 “•”로 표시됩니다.

  • datetime = 국제 표준시로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다.

  • datetime-local = 사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초 )을 넣습니다.

  • date = 사용자 지격을 기준으로 날짜(연, 월, 일)를 넣습니다

    • date = 날짜를 선택합니다.”yyyy-mm-dd”형식
    • month = 월과 연도를 선택합니다. “yyyy-mm”형식
    • week = 주와 연도를 선택합니다.

  • month = 사용자 지역을 기준으로 날짜(연, 월) 를 넣습니다.

  • week = 사용자 지역을 기준으로 날짜(연, 주)를 넣습니다.

  • time = 사용자 지역을 기준으로 시간 (시, 분, 초, 분할 초)를 넣습니다.

    • 속성입니다

      • min = 날짜나 시간의 최솟값을 지정합니다.
      • max = 날자나 시간의 최댓값을 지정합니다.
      • step = 스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조절할지를 지정합니다.
      • value = 화면에 표시할 초기값을 지정합니다. type=”time”일 경우. 시간은 00:00부터 23:59까지 입력하고 type=”datetime” 이나 type=”datetime-local” 유형일 경우, 날짜 다음에 키워드 T를 쓰고 24시제로 시간을 지정합니다. 예를 들어 오후 6시를 나태내려면 T18:00라고 하면 됩니다.

  • number = 숫자를 조절할 수 있는 화살표를 넣습니다.

    • 숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시됩니다.

  • range = 숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.

    • 숫자 입력 필드. 슬라이드 막대를 이용해 숫자를 조절할수 있습니다.

  • step = <input> 요소에 입력할 수 있는숫자들 사이의 간격을 명시합니다.

  • color = 색상 표를 넣습니다.

  • checkbox = 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣습니다.

    • checkbox와 radio의 속성입니다

      • name = 라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버의 폼 프로그램에서 라디오 체크박스를 구분하기 위해 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 한 가지만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name 속성 값을 똑같이 만듭니다.
      • value = 선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정합니다. 이 값은 영문이거나 숫자여야 하면 필수 속성입니다.
      • checked = 라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는데 기본적으로 선택해 놓을 항목이 있다면 checked 속성을 사용합니다.

  • radio = 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.

  • file = 파일을 첨부할 수 있는 버튼을 넣습니다.

  • submit = 서버 전송 버튼을 넣습니다.

    • 폼 전송 버튼입니다.
    • value 속성을 이용해 버튼 표시 내용을 지정합니다.

  • reset = 리셋 버튼을 넣습니다.

    • 사용자 입력 내용을 전부 삭제합니다.
    • value 속성을 이용해 버튼 표시 내용을 지정합니다.

  • image = submit 버튼 대신 사용할 이미지를 넣습니다.

  • button = 버튼을 넣습니다.

See the Pen by jun (@junja) on CodePen.

<input>태그의 다양한 속성

  • autofocus
    • 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시 커서가 표시됩니다.
  • placeholder
    • 입력란에 표시하는 힌트로, 필드를 클릭하면 사라집니다.

  • readonly

    • 내용을 보기만 하고 입력하지 못하게 됩니다.
    • 속성 값 없이 readonly 라고만 쓰면 됩니다.

  • required

    • 필수 필드 체크입니다.
    • 속성 값 없이 required 라고만 입력하시면 됩니다.
    • 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저마다 다르게 나타납니다.

  • mix, max, step

    • min, max = 해당 필드의 최솟값, 최대값입니다.
    • step = 허용된 범위 내의 숫자 간격입니다
    • type이 date, datetime, datetime-local, month, week, time, range, number 일 경우에만 사용합니다.

  • size, minlength, maxlength

    • size = 텍스트 관련 필드에서 화면에 몇 글자까지 보이게 할지 결정합니다.
    • maxlength = 입력 가능한 최대 글자입니다.
    • minlength = 입력해야 할 최소 글자입니다.

  • <select>, <optgroup>, <option>

    • 여러 옵션 중에서 선택 - 드롭다운 목록
    • 공간을 최소한으로 사용하면서 여러 옵션 표시 가능합니다.

    • <select>태그의 속성

      • size = 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정합니다.
      • multiple = 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있습니다.

    • <option>태그의 속성

      • value = 옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
      • selected = 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.
    • <optgroup>태그
      • 여러 항목을 그룹을 묶을 때 사용
      • label 속성을 사용해 그룹 제목을 붙입니다.
  • <datalist>, <option>
    • 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됩니다.
    • 데이터 목록에 id를 이용해 이름을 붙이고, <input> 태그의 list 속성에 데이터 목록(<option>)의 id를 연결시켜 지정합니다.
    • <option>태그의 속성
      • value = 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정합니다.
      • label = 사용자를 위해 브라우저에 표시할 레이블입니다. 따로 지정하지 않을 경우, value값을 레이블로 사용합니다.
  • <textarea>
    • 텍스트 영역 = 여러 줄의 텍스트를 입력합니다
    • 게시판의 게시물 입력 찰, 회원 가입 양식의 약관 등이 있습니다.
    • <textarea>태그의 속성
      • name = 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다.
      • cols = 텍스트 영역의 가로 너비를 문자 단위로 지정합니다.
      • rows = 텍스트영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생성됩니다.

  • <button>

    • 다양한 형태의 버튼 삽입
    • css를 이용해 원하는 형태로 꾸밀 수 있습니다.
    • <button>의 속성
      • submit = 폼을 서버로 전송합니다. <button type="submit">전송하기</button>과 같이 사용합니다.
      • reset = 폼에 입력한 모든 내용을 초기화시킵니다. <button type="reset"> 다시 쓰기</button>과 같이 사용합니다.
      • button = 버튼 형태만 만들 뿐 자체 기능은 없습니다. <button type="button">주소 입력<button>과 같이 사용합니다.
  • <output>
    • 계산 결과를 브라우저에 표시합니다.
    • 브라우저 화면에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과값이라는 점을 웹 브라우저가 정확하게 인식할 수 있습니다.
  • <progress>
    • 작업 진행 상태를 브라우저에 표시합니다
    • 값에는 특별한 단위가 없고 단위를 표시하지도 않습니다.
    • <progress>속성입니다.
      • value = 직업 진행 상태를 나타내며 부통 소수점으로 표현합니다. 이 값이 0보다 크거나 같고 max 값보다 작거나 같아야 합니다. 만약 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야 합니다.
      • max = 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현합니다. 이 값은 0보다 커야 합니다.
  • <meter>
    • 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용합니다. 예를 들어서 하드 디스크 사용량, 유권자 투표율 등이 있습니다.
      • <meter>속성
        • min,max = 범위의 최솟값과 최대값을 나타냅니다. 값을 정하지 않으면 0과 1로 간주합니다.
        • value = 범위 내에서 차지하는 값을 나타냅니다.
        • low = “이 정도면 낮다.” 라고 할 정도의 값을 지정합니다
        • high = “이 정도면 높다.” 라고 할 정도의 값을 지정합니다.
        • optimum = “이 정도면 적당하다” 라고 할 정도의 범윚를 지정합니다. optimum값이 high 값보다 크다면 value 값이 클수록 좋고 low 값보다 적다면 value 값이 작을수록 좋습니다.

See the Pen by jun (@junja) on CodePen.

태그: ,

카테고리:

업데이트:

댓글남기기

참고

최대 1 분 소요