HTML5 30분 기초 완성 2편

HTML5

공부한 곳

• TCPSCHOOL.com
•  

 

---

공부 내용

 

HTML5 블록과 인라인

HTML의 모든 요소는 해당 요소가 웹 브라우저에서 어떻게 보이는가를 결정짓는 display 속성을 갖는다. 대부분의 HTML 요소는 다음 두 가지 값의 하나를 가진다.

•  블록
•  인라인

 

블록 타입의 요소

언제나 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지함.

<p>, <div>, <h>, <ul>, <ol>, <form>

 

<div>요소

다른 HTML 요소들을 묶는데 자주 사용되는 대표적인 블록 요소

여러 요소들의 스타일을 한 번에 적용할 수 있음

 

인라인 타입의 요소

새로운 라인에서 시작하지 않고 해당 요소의 내용만큼만 너비를 차지함.

<span>, <a>, <img>

 

 

 

시맨틱(Semantic) 요소

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서의 탐색 링크를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

 

 

 <form> : 사용자 입력

 

웹 페이지에서의 입력 양식을 의미

<form action="처리할페이지주소" method="get|post"></form>

form 요소의 속성

• action : 폼을 전송할 URL을 입력
• method : 전송 방식을 결정(GET or POST)
• autocomplete : 폼 내부 요소의 자동 완성 기능을 사용할지 안할지 결정
• accept-charset : 폼 전송 시 인코딩 방식을 명시
• enctype : 인코딩 방법을 지정

 

 

GET 방식

• 주소에 데이터를 추가하여 전달
• 데이터가 주소 입력창에 그대로 나타남
• 전송할 수 있는 데이터의 크기가 제한적, 중요도가 낮은 정보 전송, 보안 약함

 

POST방식

• 데이터를 별도로 첨부하여 전달
• 데이터가 외부에 드러나지 않음
• 전송할 수 있는 데이터의 크기가 제한이 없음, 보안성이 좋다

 

 

<input> 

<form>

    사용자 : <br><input type="text" name="username"><br>

    비밀번호 : <br><input type="password" name="password">

</form>

 

 

실제로 사용자가 양식을 입력하기 위해 사용하는 태그

type : input의 형태 타입을 결정

name : 데이터가 서버로 전송될 때 할당되는 변수의 이름

 

입력가능한 타입들

• 텍스트 입력(text)
• 비밀번호 입력(password)
• 라디오 버튼(radio)
• 체크박스(checkbox)
• 파일 선택(file)
• 선택 입력(select)
• 문장 입력(textarea)
• 버튼 입력(button)
• 전송 버튼(submit)
• 필드셋(fieldset)

<input> 요소의 속성으로는 value(초깃값), readonly, disabled, maxlength, size 등이 있다.

 

Script 요소

해당 웹 페이지에 사용할 스크립트를 정의

<script>
	document.getElementById("demo").innerHTML = "자바스크립트 학습";
</script>