비전공자 IT 코딩독학 #10 : HTML 기초 4편 HTML5 속성

안녕하세요 길잃은 문돌이 입니다. 벌써 HTML 기초 4편인데, 사실 5편까지 제작할 생각이였지만, 강의 내용이 너무 작기도 하고 제가 비전공자 IT코딩독학 글을 쓰면서 강의를 듣다가 저장도 안하고 창을 닫는 바람에 4편이 날라갔어요... 

 

근데 생각을 해보면 4편이 너무 작아서 어차피 5편 내용이랑 합치고자 했거든요 :D

4편에서는 검색엔진과 관련된 내용이 많았는데, 사실상 더 중요한 부분은 검색엔진에서 눈에 띄게 만드는 태그들을 이용하는 방법 즉 시멘틱한 태그들을 사용해야한다는게 핵심이라서 그 부분만 들고오고 나머지 부분은 HTML5 새로운 속성들을 주로 공부했습니다. 

---

비전공자 IT코딩독학 10편 HTML 기초 및 HTML5 새로운 속성 보기

---

 

목차.
1. form 태그의 새로운 속성
2.입력값 체크 및 유효성 검사
3. 시멘틱 태그 및 구조 
4.HTML 강의를 마치며

 

 

1. form태그의 새로운 속성

 

<input>태그

 

속성

type= " number"     min, max

: 숫자만을 입력 받을 수 있고 , 숫자중에서도 제한을 할 수 있는 또다른 속성을 입력할 수 있다.

ex)
<form action= " ww1.문돌이.php">
   <input type="number" min="10" max="255 name="numberv">
</form>

 

type = "color"

:컬러를 선택할 수 있는 화면이 생성된다

<input type="color" name="colorv">

 

 

 

type = "date"

: 날짜를 선택할 수 있는 화면이 생성된다.  

<input type="date">

 

type="datetime"

type="datetime-local"

:datetime의 경우 국제시를 기준으로 데이터가 전송이 되며. datetime-local의 경우, gps에 따른 나의 지역의 기준 시간으로 전송된다. 

 

type="email"

:이메일만 사용가능 하게끔 하는 텍스트박스인데, @가 없으면 전송이 되지 않게끔 만들어짐. 

 

type="range"

<input type="range">  + min, max 속성을 사용가능하다. 

:range의 경우 슬라이드 형태로 데이터를 전송 가능 하게끔 슬라이드가 생성됨

 

이외의

tel , time, url, week이 하나씩 있따.

 

*항상 input 태그를 사용할때는 name="" 속성을 잊어버리지 말자!

 

form 태그의 새로운 속성들.

 

autocomplete= "" (on/off)

:  자동완성기능을 만드는 것이다.  로그인 화면의 경우 많은 웹사이트가 자동완성기능을 제공하고있다.

하지만 아이디의 경우는 괜찮지만 비밀번호 같은 경우는 자동완성기능을 제한한다면

ex)
<form action=" " autocomplete = "on">
   <input type="text" name="id">
   <input type="password" name="pwd" autocomplete="off">
</form>

 

autofocus  (on off가 없다)

:사이트에 도착을 하자말자, 원하는 곳에 키보드 포커스가 가고 싶다면 즉, 구글 홈페이지를 켰을때, 검색화면 text 박스에

바로 키보드 포커스로 가고 싶을때 사용하는 속성이다. 

 

ex) 
<input type="text" name="id" autofocus>

---

2. 입력값 체크 및 유효성 검사

 

예를 들어서, 이메일을 입력해야하는 칸에, 홈페이지 주소를 입력한다든지, 전화번호 입력하는 곳에 이메일을 입력한다든지, 아니면 악의적으로 공격의 의도를 가지고 있는 코드를 입력할 수 도 있기 때문에 유효성 검사를 해줘야한다.

email이나, number 타입은 자동적으로 유효성 검사가 가능하다.

 

필수 요소를 정하는 방법

requried (on/ off) 가 없다

<form action="ww1.메롱.php">
   <input type="text" name="id" placehold="아이디를 입력해 주세요" required>
   <input type="email" name="emailv" placehold=" 이메일을 입력해 주세요">
   <input type="submit">

 

패턴 유효성 검사

pattern = ""

 

패턴이란, 마지막 단어를 숫자로 구성되어있지 않는 다면, 제출이 거절당한다는 조건을 넣고 싶을때 사용한다. 

:패턴에 들어가는 데이터는 정규표현식이 들어올 수 밖에없다.

 [a-zA-Z] : 알파벳( 하지만 aa는 안되기 때문에 [a-zA-Z][a-zA-Z]해야한다.

 . (반점) → 와일드 카드로써 아무것이나 들어와도 된다. (하지만 또한, 12는 안된다, 이럴때는 .+로 작성해야한다)

 

만약에 반드시 마지막 단어는 숫자로 끝나야한다면, 

[0-9] 이 들어가야한다.  

 

---

3. 시멘틱 태그 및 구조 

 

또한, html5 에서는 구조적으로 시멘틱한 구조로 만들 수 있따. 시멘틱이란 데이터를 정보화 하여 검색엔진이 정보를 들고 가기 쉽게 만든다는 의미인데, 

 

제목에 해당하는 부분은

 

<header>태그를 사용한다.

헤더태그에는 하위 태그로 h1,h2가 들어감으로써 의미론적 구조를 만들 수 있다.

h1, h2의 경우 시각적인 기능을 가지고 있지만, 웹페이지에 가장 중요한 정보라는 의미론적인 태그이다.

ex)
<header>
  <h1>비전공자 it 코딩독학</h1>
</header>

 

 

 

네이게이션 역할하는 태그

<nav> 

 

: 컨텐츠를 탐색 할 수 있는 경로라는 의미를 줄 수 있다.

 

리스트화 되어있다면 ol과 li를 사용해서 더욱 의미있는 정보로서 만들어 검색엔진에게 전달한다.

 

본문 역할을 하는 태그

<article>

: 웹페이지에서 가장 정보를 많이 담고 있다는 의미를 하며 본문을 뜻 한다.

 

또한 본문이 여러개로 이루어져있다면

<article>태그를 여러번 사용한다.

 

*본문의 경우  <section>으로 감싸서, 본문 섹션이라는 것을 만들어 준다.

 

하위 영역의 경우

 

<footer>태그를 사용한다.

많은 사이트에서 볼 수 있듯이 웹페이지의 가장 밑의 경우 개인정보 정책 및 회사소개등이 있을 수 있는데

예로 들면, 

 

<footer>
  <ul>
     <li><a href= ww1.길잃은문돌이.com> 길잃은 문돌이 소개</a></li>
  </ul>
</footer>

 

 

굳이 ul li를 쓸 이유는 없지만 씀으로써 리스트라는 정보까지 함축되어 검색엔진에게 전달되기에

추후에, 검색랭크가 올라 갈 수 있다는 장점이 있다. 

 

가장 기본적인 html5 시멘틱 구조를 말한다면

<header>

<nav>

<section>

        <article>

<footer>

로 정의 할 수 있다~

 

---

4. HTML 강의를 마치면서..

 

오늘까지의 강의로써 생활코딩의 html 전반적인 기본 태그들이랑 다 보긴 했는데,

w3c를 직접 들어가 확인 해보니 모르는게 너무너무 많은거 같네요. 

 

생활코딩을 보기도하고 사실 여러번의 타 강의도 보긴 했는데, 조금 빈약하다는 생각도 하네요

저는 div랑 span이랑 이런것들도 문법으로 배운줄 알았는데, 글을 다 작성하고 맺으려니 왜 이건 안배웠지 라는 생각을 하게 되네요. 블록레벨이라든지 인레벨을 배우지 않았는데 끝이 나버렸네요.

 

물론 css 쪽에서 분명 이야기 해주시겠지만... 저는 순간 css에서 div랑 span을 배우는지 알았네요.

의미가 없는 태그이긴 하지만, 배울 줄알았는데 조금 빈약하다는 생각을 하네요.

인프런에서 강의가 긴 만큼 많은 내용을 다룰 줄 알았는데, 우선  html강의는 끝이 났으니,

css 강의로 넘어가려는데  css도 생활코딩에서 볼까 하다가, 너무나 짧아서 조금 긴, seoul wiz강의를 보고자 합니다.

무료니깐 언제든지 볼 수 있구요!

 

참고로 제가 본 html 생활코딩 강의는 인프런에 있는 강의입니다.

클릭하시면 바로 강의로 넘어가니 저같이 왕왕 초보일경우 꼭 추천드려요! 물론 무료입니다 :D