【 HTML 배우기 】 - 5탄

---

【 HTML 배우기 】 - 5탄

 

---

🦎 Section 01. 입력 양식

      - 입력 양식과 관련있는 태그는 아래와 같이 여러 개가 있습니다

         - <input>

         - <select>

         - <textarea>

         - <fieldset>

         - <legend>

      ▶ 그 중 저희는 <input>에 대해서 자세히 알아볼 예정입니다 🤭

---

 

 

---

🦎 Section 02. input 태그

      - <input>는 끝 태그가 없는 Empty Tag입니다

      - <input>는 type 속성을 통해 여러 가지 입력 type을 지정해 줄 수 있습니다 !
        아래를 함께 살펴 봅시다 😃

 

 

【 type 속성 종류 】

  - <input>는 아래와 같이 다양한 type 속성을 가지고 있습니다

• text : 일반 문자 or 숫자를 입력할 수 있습니다
• password : 주위 사람에게 노출되지 않도록 *으로 표시해 줍니다
• submit : 해당 페이지를 처리할 수 있는 웹 페이지로 전송해줍니다
• reset : 초깃값으로 되돌려 줍니다
• radio : 하나만 선택할 수 있게 해줍니다                                                                                                                   → ( Tip ) 여러 개의 선택 옵션이 있기 때문에 name은 동일하게,                                                                                 value는 다르게 주는 것이 좋습니다
• chekbox : 선택 할 수도 있고, 안할 수도 있는 경우에 사용됩니다
• email : email 정보를 보낼 때 사용됩니다                                                                                                               → 유효하지 않은 email을 전송할 경우 error를 표시해 줍니다
• file : file을 보낼 때 사용됩니다                                                                                                                           → file은 post 방식으로 보내야 합니다
• url : url 정보를 보낼 때 사용됩니다                                                                                                                     → 유효하지 않은 url을 전송할 경우 error를 표시해 줍니다
• color : 색상 정보를 입력할 때 사용됩니다
• date : 날짜 정보를 입력할 때 사용됩니다
• time : 시간 정보를 입력할 때 사용됩니다
• month : 월 정보를 입력할 때 사용됩니다
• number : 숫자 정보를 입력할 때 사용됩니다                                                                                                                → 최소값과 최대값을 지정할 수 있습니다                                                                                                    → 숫자가 아닌 data를 전송할 경우 error를 표시해 줍니다
• button : 버튼을 생성할 때 사용됩니다

▶ 추가로 입력 data의 유효성을 검사하는 것을 validation이라고 합니다 😊

 

 

【 submit 이해하기 】

  : 이번엔 <input>의 type 속성 중 submit에 대해서 알아볼 예정입니다 🤔

 

    방금 전 저희는
    해당 페이지를 처리할 수 있는 웹 페이지로 전송해주는 type 속성이 submit이라는 것을 배웠습니다

 

    그렇다면 해당 페이지를 처리해주는 웹 페이지는 HTML로 작성되었을까요?
    정답은 ❌ 입니다 !

 

    왜냐하면 이를 처리할 수 있는 웹 페이지는 

    주로 서버측 프로그래밍 언어(PHP, ASP, Java, Python, Ruby, Node.js)로 작성되어있기 때문입니다

    그렇기 때문에 submit을 사용할 때는 단순히 submit만 아는 것이 아닌 action이라던지

    정보 전달 방법(post, get)등도 알아야 합니다 😊
    (걱정하지 마세요! 이번 시간에는 HTML만 배우는 것이기에, 깊게는 안들어갈거 랍니다 😃)

---

<참고> 아래 표는 알아두면 좋을 것 같아서 작성해두었습니다

---

 

 

---

🦎 Section 03. 영역 분할

      - <div>   : division의 약자로 element들을 구분시켜주는 태그입니다

      - <span> : 특정 text를 구분시켜주는 태그입니다

 

 

【 block 형식 vs inline 형식 】

  : element들이 어떠한 형식으로 영역을 차지하느냐에 따라 "block형식"과 "inline형식"으로 

    나눌 수 있습니다 😊

 

 

【 웹 페이지의 기본 형식 - Semantic tag 】

  : 웹 페이지의 기본 형식에 해당하는 태그들은 아래와 같으며,
    이 태그들은 "의미있는 태그" 라고해서 "Semantic tag" 라고도 불립니다 😃

https://phrygia.github.io/html/2021-09-21-sematic-tag/

• <header> : 헤더부분
• <nav> : 네비게이션 메뉴 부분
• <aside> : 사이드바 부분
• <main> : 메인 부분
• <footer> : 푸터 부분

---

 

 

---

🦎 Section ##. Finish

      ① 강의 링크

          : https://www.udemy.com/course/ssonsalstudy-html/   

      ② 대표 이미지 출처

          : https://www.miricanvas.com/

디자인 플랫폼 미리캔버스

---