HTML(2)

juyeon10120·2022년 6월 24일
0

WEB

목록 보기
3/7
post-thumbnail

하이퍼미디어

하이퍼미디어


웹 페이지의 내의 미디어를 통해 다른 연관 정보로 넘어갈 수 읶세하는 연결고리 즉, 링크이다.

anchor 태그 (a)


특정 내용에 링크를 생성할 때 사용한다. herf(Hyper reference) 속성으로 이동할 리소스를 지정한다. 이동할 리소스는 URL과 같은 웹 페이지 주소나 미디어의 주소가 된다.

<a href="https://www.google.com">google</a>

결과

google

img(image) 태그


이미지를 삽입할 때 사용한다. .src 속성으로 이미지의 주소를 지정하면 해당 이미지가 표시된다. 홀태그 형식으로 사용된다.

<img src="https://jydev.netlify.app"/>

결과 :

embed 태그


외부 콘텐츠를 삽입할 때 사용된다. 보통 유튜브 플래시와 같은 외부 미디어 객체를 웹 사이트에 포합 시키고 싶을 때 사용한다.

<embed src="객체의 주소"/>

표 관련 태그

표 작성하기 (table, tr, td, th)


표를 그리기 위해서 여러 태그를 조합해서 코드를 작성해야 한다.

  • table : 표의 시작과 끝
  • tr : 표의 하나의 행
  • th, td : 표의 열
  • <table>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    th는 볼드하게 나옴

    열 합치기


    rowspan : 합칠 행의 수

    <table>
      <tr>
        <th rowspan="2"></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    th는 볼드하게 나옴

    폼 태그 (form)

    폼 (form)


    사용자에게 데이터를 입력 받기 위한 화면 궝ㅇ르 폼이라고 한다. 폼태그 사이에 폼 관련 태그들 (input, label, button, select등)을 넣어 하나의 폼을 구성하게 된다.

  • form : 폼의 사작과 끝을 정의하는 태그
  • input,select : 사용자 입력을 받는 입력상자나 버튼을 만드는 태그
  • label : 입력상자 마다 제목을 붙이는 태그
  • button : 버튼을 만드는 태그
  • form 태그


    폼을 정의하는 태그, 이 태그 내에 input, select, button 등의 태그들을 넣어 사용자의 입력을 방아서 훤하는 서버의 주소로 데이터를 전송 할 수 있다.

    속성

  • action : 데이터를 전송할 url주소이다.
  • method : 데이터를 전송할 방법이다. 주로 **get**과 **post**방식중 하나를 사용한다.
  • enctype : 데이터를 전송할때 전송 인코딩 형식을 지정한다.
  • input 태그


    입력상자를 만드는 태그 type의 속성에 따라 입력칸, 선택박스 버튼을 표시할 수 있다. 홀태그 형식이다.

  • type : 입력 형태를 지정한다. text, password, button, submit, radio, checkbox등이 있다.
  • name : 입력 값의 이름을 지정한다.
  • value : 입력 상자의 값을 지정할 수 있다.
  • input 태그 : button, submit


    버튼을 만든다. submit으로 지정된 버튼을 클릭하면 해당 폼의 전체 내용이 form 태그의 action에 지정된 서버 주소로 전송된다. 여기서 value 속성은 버튼의 텍스트를 지정하는 역할을 한다.

    input태그 대신에 button 태그를 사용해서 구현할 수 있다.

    <input type= "button" value="click"/>
    
    <button type="button">클릭</button>

    클릭

    input 태그 : radio, checkbox


    라디오 버튼 또는 체크박스를 만든다. 선택지 하나당하나의 태그를 사용한다.

    <input type="radio" name="n1"/>1 번
    <input type="radio" name="n2"/>2 번
    <input type="radio" name="n3"/>3 번
    
    <input type="checkbox" name="n1"/>1 번
    <input type="checkbox" name="n2"/>2 번
    <input type="checkbox" name="n3"/>3 번

    1 번
    2 번
    3 번

    1 번
    2 번
    3 번

    input 태그 : radio, checkbox


    드롭다운 선택박스를 만든다. option 태그를 사용해서 선택지를 추가한다.

    <select name="job" id="job">
      <option value="op1">옵션1</option>
      <option value="op2">옵션2</option>
      <option value="op3">옵션3</option>
    </select>

    결과

    옵션1 옵션2 옵션3

    textarea 태그


    두 줄 이상의 긴 글을 입력 받도록 해주는 입력 칸을 만든다. 쌍 태그로 만드러지고 태그 사이에 값을 미리 넣을 수 있다.

    <textarea name="" id="" cols="30" rows="10">
    임시 메세지
    </textarea>

    label 태그


    사용자에게 각 입력 칸을 설명해주는 레이블을 표시할 수 있다.
    입력 태그에 id 속성으로 지정된 값을 for 속성으로 넣어주면 그 입력 태그를 수식해주게 된다.

    <label for="username">이름</label><input type="text" id="username"/>
    
    <input type="radio" name="options" id="option1">
    <label for ="option1">1 번</label>
    <input type="radio" name="options" id="option2">
    <label for ="option2">2 번</label>
    <input type="radio" name="options" id="option3">
    <label for ="option3">3 번</label>

    이름

    1 번 2 번 3 번

    name 태그의 값은 서버로 전손된다. 즉 서버에서 볼 때

    options 1 번

    이러한 형식으로 나타난다.

    fieldset, legend 태그


    여러 입력 태그를 하나의 그룹으로 묶고 원하는 제목을 달 수 있다.

    <fieldset>
      <legend>legend 태그</legend>
      fieldset 태그 내부
    </fieldset>
    legend 태그 fieldset 태그 내부

    메타태그


    메타태그는 웹문서의 정보를 알려주기 위해 작성하는 태그이다. 이렇게 작성된 메타 데이터는 사용자에겐 보이지 않지만 웹 브라우저, 검색엔진, 그리고 메타데이터를 활용하는 웹 서비스 들이 사용하게된다. head 태그내에 위치하고 홀 태그 형식으로 사용된다.

    meta 태그 : charset


    웹 문서의 문자 인코딩을 알려주는 역할이다. 문자 인코딩은 웹 문서에 표시되는 문자열이 어떤 문자코드 기반으로 해석되고 표현할지를 정한다. 현재의 웹에서는 유니코드 기반인 UTF-8 인코딩을 사용한다. 그렇기에 charset="UTF-8"으로 작성한다.

    meta 태그 : viewport


    모바일을 위한 태그

    웹 문서가 그려지는 영역(viewport)에 대해 크기나 확대 비율을 어떻게 조정할지를 정한다. content 속성에 viewport 설정 값을 넣을 수 있다.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width : 웹문서가 표현되는 영역의 너비를 결정한다. 모바일 기기의 너비에 맟주려면 device-width라는 값을 사용할 수 있다.
  • initial-scale : 처음 화면에 보여질 때의 배율을 정한다.
  • 그 외에도 uwer-scalable, maximum-scale, minimum-scale 등을 사용할 수 있다.
  • meta 태그 : author, description, keyword


    검색 엔진이나 외부 웹 서비스에 알려질 정보를 표현한다.

    <meta name="author" content="컨텐츠 이름">
    <meta name="keywords" content="키워드">
    <meta name="description" content="설명">

    meta 태그 : open graph


    author, decription, keyword 메타 태그로도 정보를 나타낼 수 있지만 open graph 메타 태그를 사용하면 facebook같은 sns에 더 자세한 정보를 알려줄 수 있다.

    <meta property="og:title" content= "web"/>
    <meta property="og:type" content= "article"/>
    <meta property="og:url" content= "https://www.google.com"/>
    <meta property="og:image" content= "이미지 주소"/>

    iframe 태그


    다른 웹 페이지를 표시할 수 있는 태그이다.

    <iframe width="500" height="300" src=https://www.naver.com frameborder="0"></iframe>

    iframe 태그


  • src : iframe 에 표시될 웹 문서 주소
  • width, height: 높이, 너비(px,%가능)
  • frameborder : 태두리 표시 여부 (1,0)
  • scrolling : 스크롤바 표시 여부 (yes, no, auto)
  • name : a태그에서 참조할 이름
  • profile
    HelloWorld!

    0개의 댓글