HTML 21.03.05

meta data

‘속성정보’라고도 불리는 메타데이터는 ‘데이터에 관한 구조화된 데이터’, ‘다른 데이터를 설명해 주는 데이터’이다. 대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 콘텐츠에 대하여 부여되는 데이터이다.

Semantics

Semantics 태그의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.

<header> : 헤더를 의미
<nav> : 네비게이션을 의미
<aside> : 사이드에 위치하는 공간을 의미
<section> : 본문의 여러 내용 (article)을 포함하는 공간을 의미
<article> : 본문의 주 내용이 들어가는 공간을 의미
<footer> : 하단 부분을 의미
+
<div>는 Semantic 태그가 아니므로 사용을 지양하는게 좋다.

block vs inline vs inline-block

block : 줄바꿈 / width 100% / width height 변경 가능

<div>, <form>, <ul>, <li>, <ol>, <p>, <table>

inline : 줄바꿈 되지 않음 / width 글자가 차지하는 만큼 / width height 변경 불 가능

<a>, <br>, <button>, <img>, <input>

inline-block : 줄바꿈 되지 않음 / width 글자가 차지하는 만큼 / width height 변경 가능 (inline tag에 width,height을 적용하려면 display: inline-block으로 변경해야한다.)

Frequently used HTML tags

<title>웹페이지 탭 제목</title>

<div>문단 구분</div>

<a href="https://creamereos.github.io/" target="_blank"> 웹페이지 링크 </a>

<script src="javascript.js"></script>

<link rel='stylesheet' src='style.css' />

<img href='image.png' />

<span>문장 단위로 텍스트 영역을 지정(문장의 특정 구역에 CSS스타일을 지정하기 위해 사용)</span>

<p>문단 구분</p>

<ul>
    <li>unorder list</li>
</ul>

<br> 줄바꿈

<h1~5>제목/소제목</h1~5>

<input type= name= value= />

<form>input tag 등 을 하나의 form으로 묶어서 사용</form>

<button>버튼 안에 들어갈 text</button>

<iframe src="삽입할페이지주소" width="너비" height="높이"></iframe>
다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입

self closing tag

<> </>사이에 Text가 들어갈 필요 없는 태그들은 <>를 2개 쓸 필요 없이 < /> 하나만 사용해도 된다

<img href='image.png' />
<input type="text" placeholder="input text" />
<link rel='stylesheet' src='style.css' />

input

text

<input type="text" placeholder="text 입력" maxlength="12" required />
최대 12글자 이하, 필수 입력

password

<input type="password" minlength="7" />
비밀번호 8글자 이상, *로 표시됨

비밀번호 8글자 이상, *로 표시됨

label : form에 이름을 붙이는 태그. id로 구분. 글자를 클릭해도 체크 됨.

for=”레이블 이름 설정(id와 동일하게)”

<label for="">라벨</label>

<label for="id">ID</label>
<input type="text" id="id"/>

radio : 하나만 선택 가능. attribute(name, value)를 반드시 넣어줘야한다. name : 동일하게 설정해서 radio를 그룹화 value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게. id : label 태그와 연결하기 위한 식별자 (label for - id)

<input type="radio" name="sex" value="male" id="male"/>
<label for="male">남</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">여</label>

<input type="radio" name="job" value="front" id="frontend"/>
<label for="forntend">프론트엔드</label>
<input type="radio" name="job" value="back" id="backend"/>
<label for="backend">backend</label>

남 여

프론트엔드 backend

check box : 다중 선택. attribute(name, value)를 반드시 넣어줘야한다. name : 동일하게 설정해서 radio를 그룹화

value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게.

<input type="checkbox" name="" value="" id="" checked>
name : 동일하게 설정해서 radio를 그룹화
value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게.
id : label 태그와 연결하기 위한 식별자 (label for - id)
checked : 선택된 상태

<label for="html">HTML</label>
<input type="checkbox" name = "skill" value="H" id="html" checked/>

<label for="html">CSS</label>
<input type="checkbox" name = "skill" value="C" id="CSS"/>

<label for="JS">JavaScript</label>
<input type="checkbox" name = "skill" value="J" id="JS"/>

HTML

CSS

JavaScript

file : 파일 첨부. multiple 이미지 다중 선택 가능 .모든 이미지 파일 가능

<input type="file" multiple accept="image/*"/>

<input type="file" multiple accept="image/*"/>

select : attribute(name, value)를 반드시 넣어줘야한다. / multiple (컨트롤을 눌러 다중 선택 가능)

name : 동일하게 설정해서 radio를 그룹화
value : 서로 다른 값을 넣어서 서버가 명확히 구분할 수 있게.
id : label 태그와 연결하기 위한 식별자 (label for - id)

<label for="dev_skill">개발 언어</label>
<select name="skill" id="dev_skill">
  <option value="H">HTML</option>
  <option value="C">CSS</option>
  <option value="J">JavaScript</option>
</select>

개발 언어

email : 이메일 형식이 아닌 것을 제출 시 오류 발생

<input type="email" />

url : url 형식이 아닌 것을 제출 시 오류 발생

<input type="url" />

number : number 설정 가능. min ~ max 설정 가능

<input type="number" min="1" max="100" />

button

<button type="button">버튼</button>
<button type="submit">제출</button>
<button type="reset">리셋</button>

textarea

<label for="intro">자기소개</label>
<textarea id="intro"> </textarea>

자기소개