(D-29) Prep Self study Day2: HTML 6-10

@ 오늘의 목표 진도

HTML 6-10 강

---

Section 6: Hyperlink

poiemaweb.com/html5-tag-link

• Anchor tag: <a href="http://www.google.com"> Visit google.com </a>
  • Visit google.com에 밑줄이 쳐지고, href에 적은 url로 클릭하면 이동한다. 
  • href
    • Directory (a.k.a Folder)
      • Root directory: 최상위: Windows: C:\
      • Home directory: 개별: Windows: C:\Users\{SooC}
      • Working directory: 작업중: ./
      • Parents directory: 작업 디렉토리의 부모 디렉토리 ../
    • File path (href에 사용가능한 값)
      • Absolute path: 현재 작업 디렉토리와 상관없음. 절대값. : http://www.google.com, /index.html
      • Relative path: 현재 작업 디렉토리를 기준으로 상대적인 위치. : index.html
      • Fragment identifier: 페이지 내의 특정 id. : href="#top"
        • 이걸 사용하기 위해서는 먼저 id가 지정되어있어야한다. 
          • <h1 id="top">TOP</h1>
          • <a href="#top">Go to Top</a>
      • mail: mailto:
      • script: href="javascript:alert('Hello');"
    • target attribute: Link 클릭시, 윈도우를 어떻게 오픈하는지 설정.
      • _self: 링크 클릭시 현재 윈도우에서 오픈. (기본)
      • _blank: 링크 클릭시 새 윈도우 or 탭에서 오픈.
        • <a href="http://www.google.com" target="blank">Google!</a>

---

Section 7: List & Table

poiemaweb.com/html5-tag-list-table

• Unorderd list (<- Like those dots):<ul>~</ul>
  • <ul>
    • <li>Colombia</li> <-list 안의 내용들은 <li>를 사용한다. 
    • <li>Guatemala</li>
  • </ul>
• Ordered list (With numbers. 1., 2., 3.):<ol>~</ol>
  • <ol>
    • <li>Colombia</li>
    • <li>Guatemala</li>
  • </ol>
  • Ordered List 에서는 Type attribute 사용 가능!
    • "1" -> number (default)
    • "A"
    • "a"
    • "I" :
      • <ol type="I">
        • <li value="2">Colombia</li> -> II. 가 표시된다. 
    • "i" -> Roman lower Case: iii
  •  Start Attribute 사용가능!
    • <ol start="3"> -> 이후 <li> 들은 3부터 시작.
  • Reversed Attribute 사용가능! 
    • <ol reversed> -> 숫자 자동으로 역순. 
• Table
  • table: 표를 감싸는 태그
  • tr: 표 내부의 행. table row.
  • th: 행 내부의 제목 셀. table heading
  • td: 행 내부의 일반 셀. table data.
    • <table border="1">
      • <tr>
        • <th> First name </th> <- tr를 쓴 제목셀은 bold 처리해준다. 
        • <th> Last name </th>
      • </tr>
      • <tr>
        • <td> Soo </td>
        • <td> Kim </td>
      • </tr>
    • </table> -> 프린터에서 표가 나온다고 생각하고, 한줄한줄 가로로 적어내려가면 된다.
  • Attributes
    • border: 두께 지정. CSS를 사용하자.
    • rowspan: 해당 셀이 점유하는 행의 수 지정-> 가로로 셀 병합
    • colspan: 해당 셀이 점유하는 열의 수 지정 -> 세로로 셀 병합

<table border="1">

• <tr>
  
  • <th colspan="2"> name </th> <- heading 열의 셀 2개가 가로로 셀 병합됨. 
• </tr>

---

Section 8: Image & Multimedia

poiemaweb.com/html5-tag-image-multimedia

 

• Image
  • src: 경로
  • alt: 파일이 없을 경우 알림
  • width: 너비 (원칙은 CSS)
  • height: 높이 (원칙은 CSS)
  • <img src="assets/images/sun.jpg" alt="sun" width="100">
• Audio
  • src: 경로
  • preload: 재생 전에 음악 파일을 다 불러오나요
  • autoplay: 자동으로 틀까요
  • loop: 반복재생할까요
  • controls: play/stop 재생도구 표시할까요
  • <audio src="assets/audio/singing.mp3" controls></audio>
  • MP3(All), Wav(IE X), Ogg(IE & Safari X)
    • 형식은 source 태그로 해결 할 수 있다. type attribute생략가능.
      • <audio control>
        • <source src="assets/audio/singing.mp3" type="audio/mpeg">
      • </audio>
• Video
  • src: 경로
  • poster: 동영상 준비 중 표시되는 이미지 파일 경로 (대표화면의 src)
  • preload
  • autoplay
  • loop
  • controls
  • width
  • height
  • MP4(all), WebM(IE, Safari X), Ogv(IE, Safari X)
    • 이것역시 audio 처럼 source 태그로 형식 차이 해결 가능. type attribute 역시 생략가능!
      • <video width="640" height="360" controls>
        • <source src="assets/video/CCTV.mp4" type="video/mp4">

---

Section 9: Forms

poiemaweb.com/html5-tag-forms

 

• Form tag: For collecting data from users!
  • Attribute&Value
    • action: URL <- 입력된 데이터가 전송될 URL 지정.
    • method: get/post <- 입력된 데이터 전달 방식 지정.
      • Get: URL 에 입력된 데이터를 쿼리스트링으로 보낸다. 
      • http://jsonplaceholder.typicode.com/posts?userId=1&id=1
      • URL 뒤의 ?를 통해 데이터의 시작을 알려주고, key-value 형태의 데이터를 추가한다. &로 전송데이터 구분.
      • URL 에 데이터 다 노출됨 + 데이터 전송량의 한계 (Max 255)
      • Rest API 에서 모든 혹은 특정 리소스의 조회를 요청한다. 
        • Representational State Transfer. JS 원칙느낌?
      • Post: Request body에 데이터를 담아 보낸다. 
      • http://jsonplaceholder.typicode.com/posts
      • URL에 데이터는 노출안되지만 get에 비해서 속도가 느리다. 
      • REST API 에서 특정 리소스의 생성을 요청한다. 
    • <form action="http://www.getinfo.com/users" method="get">
    • ID: <input type="text" name="id" value="Jane123"><br> <- text 입력 창 안에 아이디가 입력되는거지..
    • username: <input type="text" name="username" value="Jane"><br>
    • <input type="submit" value="submit"> -> submit 버튼 생성. 
    • </form>
  • Input tag
    • button
      • <input type="button" value="눌러보세요" onclick="alert('Hello world!')">
    • checkbox
      • <input type="checkbox" name="fruit1" value="apple" checked> 사과<br>  <-checked있으면 이미 check됨. 
    • color: 색상 찝을 수 있다!
    • date: mm/dd/yyyy
    • datetime-local
    • email: submit 시 자동 검증!
    • file: file 고를 수 있는 버튼
    • hidden: 웹 상에 보이지 않음.
    • image: image 로 된 submit button.
    • month: Februray 2021
    • number: 위 아래 누르면 가감가능
    • password: 입력값 안보임.
    • radio: Checkbox와 다른, 중복선택 불가능.
    • range: 오디오 음량조절같은거
    • reset: 초기화 button 생성
    • search: 검색어 입력
    • submit: submit button
    • tel: 전화번호 form
    • text
    • time: 시간선택 form
    • url
    • week
  • Select
    • select 
    • option
    • optgroup: option을 그룹화한다. 
      • <select name="color1">   <-숫자 지정 안하면 dropdown으로 클릭해야 나머지 옵션 보여줌.
      • <select name="color1" size="2" multiple>   <-size 지정하고 mutiple 입력하면 dropdown 식 말고 걍 쫙 보여줌.
        • <optgroup label="colors">   <-label은 선택불가. label에 disabled 걸 수 있음. 
          
          • <option value="red" selected>Red</option>  <-Red는 이미 선택됨
          • <option value="yellow" disabled>yellow</option>  <-yellow는 disabled 됨. 선택안됨.
      • </select>
  • Textarea
    • <textarea name="message" rows="10" cols="30"> Write here!</textarea> <-Write here! 이 문구가 텍스트 상자 안에 보임. 
  • Button
    • input tag는 비어있지만 button tag는 안 비어있음. 고로 button에 텍스트나 이미지 사용 불가!
    • button tag는 Html 요소를 받을 수도 있다. 다만 IE는 submit value가 다를 수 있으니, 오래된 IE에는 input을 쓰자.
    • Type attribute 반드시 지정하기.
      • button
      • reset
      • submit
    • <button type="button" onclick="alert('Hello world')">Click!</button>
    • <input type="button" value="Click!" onclick="alert('Hello world')">
  • Fieldset/legend
    • Fieldset: Group으로 묶어줄 때 사용
    • Legend: fieldset 내에서 그룹명 지정
    • <fieldset>
      • <legend>Login</legend>
      • Username<input type="text" name="username">
      • Password<inputype="text" name="password">
    • </fieldset>   -> Login 이라는 이름으로 묶인 두개의 입력창.

---

Section 10: Structure... 공간 나누긔

poiemaweb.com/html5-tag-structure