홈페이지 만들기 - HTML[5]

앞서 또한 앞으로 우리는 계속 태그를 공부하고 있는데 이것은 좋지 않은 공부법이다.

 

우리가 직접 실습을 통해서 필요한 태그들을 그때 그때 찾아가며 익히는 것이 훨씬 기억에도 남고 실무에도 도움이 될 것이다.

 

사이트를 하나 소개하자면 https://www.dbcut.com/bbs/index.php

디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음

이 사이트는 우수사이트를 랭크해놓은 사이트이다. 

 

HTML에서 알아야 할 것들을 배우고 난 후에 우리는 이러한 사이트들의 구조를 파악하고 HTML 문서까지 직접 작성해보는 시간을 가질 것이다.

form태그

오늘의 태그는 바로 form태그

 

로그인을 하거나  회원가입을 하거나 물건을 사거나 글을 작성할 때!!

 

우리가 입력한 정보를 서버로 전송할 때 쓰이는 태그이다!

<form action="http://localhost.php/" method="post">
<input type="text" name="study"/>
</form>

이런 식으로 사용한다.

 

form태그의 속성

action은 보내는 장소(주소) <form action="http://localhost.php/">이런 식으로 정보를 보낼 주소를 적어준다.

 

method는 서버에 보내는 방식,  값으로는 "post"(암호화), "get"(공개)이 있다.

 

그 외 많은 속성이 있다. 문자 인코딩 방법(accept-charset), 다른 form과 식별하기 위한 속성(name), 등

 

form태그 속에 쓰이는 태그들

우리가 페이지 내에서 볼 수 있는 버튼이나 글자를 적을 수 있는 공간을 만들 수 있는 태그들이다.

 

button태그(input type button과 다름) (=기본적으로 input type submit와 동일하다. type설정을 하지 않은 경우)

 

textarea태그 넓은 텍스트 상자 

 

select-option태그 선택 상자(하이퍼링크를 걸기 위해서는 자바스크립트가 필요하다. value값에 주소를 적고 select태그에  onchange = "if(this.value) window.open(this.value)"를 걸어주어야 한다.)

또 첫 번째 선택자가 아닌 선택자를 페이지가 뜨자마자 보여주고 싶다면 selected 속성을 이용하면 된다. 

 

datalist 태그 select-option태그와 비슷하다. 하지만 선택뿐만 아니라 글상자로도 사용이 가능하다. 요새 나오는 자동완성 기능과 비슷하다.

 

fieldset태그 폼 태그의 그룹화를 위해 필요한 태그 사각형으로 안에 있는 태그들을 감싸준다.

 

legend태그 (레게노?) fieldset태그로 감 싼 곳의 이름을 적기 위해 필요한 태그

 

label태그 어떤 태그와 그것의 이름을 연결하기 위해 필요함(떨어져서 사용할 경우 id-for을 써준다. ex]input 태그에 id="email"을 적어주고 label 태그에 for = "email"을 적어준다.)

 

input태그

form 태그의 사용 방법 중 제일 많이 사용되는 태그는 input 태그이다.

 

input 태그는 단일 태그이며 속성에 거의 반드시 type이 들어간다.

<input type="타입명" 그외 속성들/>

 

input 태그의 type들

text 텍스트 상자

password 암호 상자

button 버튼

submit 제출 버튼

reset 초기화 버튼

image 이미지

checkbox 체크박스(중복 가능 = 같은 카테고리로 묶어주는 게 좋음)

radio 체크박스 (중복 불가 = name으로 묶어줘야 가능)

file 파일 선택 및 가져오기

color 색

time오전/오후 시 분

week 년 주

month년월

date 연월일

datetime(삭제된 속성)

datetime-local 현지 시각 년 월 일 오전/오후 시 분

{tel, number, range, search, email, url}이 태그들은 스마트폰이 발전해 갈 때 스마트폰 키보드를 조정해주기 위해 사용됨

 

이렇게나 많은 <input>의 type들이 있다. 

 

이걸 다 외우는 것은 조금 비효율적이다.

 

페이지를 카피하면서 익히도록 하자

 

input 태그의 속성들

maxlength 최대 글자 수 설정

 

name 내용을 구분하기 위해 이름 적기 (id속성처럼 고유해야 한다.)

 

value 초깃값 설정하기와 버튼의 이름 변경하기, 서버에 제출할 데이터 정하기.

 

disabled 건드릴수조차 없게 해 놓는 상태(개발자들이 테스트할 때 사용)

 

readonly는 disabled과 다르게 수정은 못하지만 마우스로 클릭해서 파랗게 만들 수 있음

 

required form 데이터가 서버로 제출되기 전에 반드시 채워져야 하는 입력 필드를 명시(이 입력란에 입력하세요)

 

placeholder 전체를 지우고 하는 게 아닌 클릭 또는 키보드 입력하면 없어지는(ex 아이디 입력하세요를 클릭하면 글자가 사라짐)

 

step (type="number"에 주로 사용되는 속성) 구간을 나누고 싶을 때 구간의 크기를 정한다.

 

 

 

중구난방으로 적었지만 오늘은 정말 많은 태그와 속성에 대해서 알아보았다.

 

특히 form태그와 input 태그는 꼭 알아놓을 필요가 있다.

 

중요한 것은 이것을 사용해야 하는 것이다.

 

 

※속성 값이 하나인 경우 속성 값만 적어도 유효하다. ex) selected readonly 등등

서로 상충되는 태그는 같이 놓을 수 없다. ex) <a>와 <select>는 a는 링크를 걸고 싶어 하고 select는 선택지를 주고 싶어 한다.

 

※div와 span 태그 이 두 태그는 아무 의미 없이 쓸 수 있다는 공통점이 있다. 특히 무언갈 감싸주고 id속성을 주어야 할 때 필요하다. div는 블락 요소로 어떠한 태그던지 감쌀 수 있다. span태그는 인라인 요소로 인라인 요소만 감싸고 블락 요소는 감싸지 못한다. 잘 구분하도록 하자

 

※요롷게 생긴 특수문자나 띄어쓰기를 넣기 위해선 https://entitycode.com/이 페이지를 참고하는 것이 좋다.

여기서 찾고자 하는 특수문자의 코드를 찾을 수 있다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

 

그럼~ 앙 제바