[프론트엔드] HTML 강의 3일차

HTML 각종 요소 (태그)

  input type

⑴ file

• 원하는 파일을 선택하여 서버로 전송하는 입력 상자

 <input type="file"/>

⑵  email

• 이메일 입력받는 글 상자 @가 없으면 제출 (다음 페이지로 이동)되지 않음.

<input type="email" size="30" name="user-id"/>

⑶ url

• 웹사이트 입력받는 글 상자 (http로 시작하는 url)
• 이 입력 필드는 폼 데이터를 제출하기 전 입력된 값이 유효한 URL 주소인지 여부를 자동으로 검증한다.

<input type="url" name="myblog"/>

 

⑷ tel

• 전화번호를 입력받는 글 상자

<input type="tel" name="myphone"/>

⑸ date

• 날짜를 입력받는 글 상자

<input type="date"/>

 

---

 

이 외 태그 요소

 

⑴ a

• 하이퍼링크를 걸어주는 태그

<!-- target 속성은 링크된 페이지를 새로 띄울지 현재 페이지에서 이동할지 정하는 속성 -->
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>

⑵ textarea

• 긴 텍스트를 입력할 수 있는 글 상자

<!-- <textarea cols = "가로 글자 수" rows = "세로 글자수"></textarea> -->
<textarea cols="60" rows="20"> ... 내용 ... </textarea>

⑶ form

• input 태그를 묶을 때 사용
• 백엔드 서버와 통신
  • form 태그 안의 input 태그의 value(값) name 값으로 백엔드에 전달
• 웹 페이지에서 사용자로부터 서버쪽으로 보낼 때 사용

* action = 처리시 취할 행동

method = 전달 방식 get, post

[ get ]

- url에 데이터를 저장하여 전송하는 방식

 

[ post ]
- body에 데이터를 저장하여 전송하는 방식

 

body => 데이터를 보내는 본문에 실어서
ex) axios.post("https://www.test.koreait.co.kr/user/login", data);

 

query => url에 키 값을 실어서

ex) axios.post("https://www.test.koreait.co.kr/post?postId=1234");

 

param => url에 값을 실어서

ex) axios.post("https://www.test.koreait.co.kr/post/1234", data);

<!--
        enctype 속성
        기본값 application/x-www-from-urlencoded

        multipart/form-data
        : 모든 문자를 인코딩하지 않음을 명시함.
        이 방식은 보통 문자열이 아닌 파일이 있을 경우 즉, 이미지나 파일을 서버에 전송할 때 주로 사용

        form 태그가 아닌 상태에서 이미지를 전송해야 할 때
        formData = new formData() <-- 이러한 상태를 생성해서
        해당 상태에 데이터를 실어서 백엔드에 전송

        ==> form이든 아니든 이미지를 보낼 때는 다른 형식으로 보내야하고 보내는 방법이 있다.
    -->

    <form enctype="multipart/form-data"></form>

 

⑷ ul 과 ol 태그

• 순서가 없는 리스트(unordered list)
• 순서가 있는 리스트(ordered list)
• 정의 리스트(definition list)

<ul> <!-- 순서가 없는 목록 태그 (하위 속성에 li) -->
    <li></li>
    ...
    ...
</ul>

<ol type="" start=""> <!-- 순서가 있는 목록 태그 (하위 속성에 li) -->
    <li></li>
    <li></li>
    ...
</ol>

<!-- ul, ol 을 사용하는 가장 큰 이유는 묶을 수 있는 점이다(가독성) -->
<!-- 실제 사용할 때는 css로 옆에 순서를 지워주기 때문에 태그 자체의 의미는 있지 않다 -->
<!-- 메뉴, 헤더 -->

<!-- 순서가 없는 목록 태그 -->
<ul>
    <li>content1</li>
    <li>content2</li>
</ul>

<!-- 순서가 있는 목록 태그 -->
<ol type="A">
    <li>content1</li>
    <li>content2</li>
    <!-- ... -->
</ol>

<!-- 
	정의 리스트(description list)는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작하며,
	<dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.
-->
<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

⑸ iframe

• iframe이란 inline frame의 약자이다
• iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.

<!-- <iframe src="삽일할 페이지 주소 또는 문서 위치(경로)" width="가로길이" height="세로길이"></iframe> -->
<iframe src="http://www.naver.com/" frameborder="0" width="1920" height="1080"></iframe>