1. HTML
2. TAG
<태그명 속성명1 = "속성값1" 속성명 = "속성값2"> 컨텐츠 </태그명>
//아래 예시에서 href는 속성명
// http;//velog.io/@hosickk 는 속성값이다.
// href 속성은 컨텐츠인 내 블로그가 velog.io/@hosickk 와 연결되었다는 뜻이다.
<a href = "http;//velog.io/@hosickk">내 블로그 </a>
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Hello World</h1>
<div>Contents here
<span>Here too!</span>
</div>
</body>
</html>
<!DOCTYPE html>
: 이 문서가 HTML 문서임을 명시<html>
: html 시작 태그로, 문서 전체의 틀을 구성<head>
: 문서의 메타데이터를 선언<title>
: 문서의 제목, 브라우저의 탭에 보여진다.<body>
: 문서의 내용을 담는 곳, 웹 브라우저를 통해 보이는 내용(content) 부분<h1> ~ <h6>
: heading을 의마하며, 크기에 따라 h1부터 h6까지 있다.<span>
: 줄바꿈이 없는 content 컨테이너<태그명/>
와 같이 표현이 가능하다.<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<menuiltem>
<meta>
<param>
<source>
<track>
<wbr>
등이 있다.<div> 내용 </div>
block
특성을 가지며, width 와 height 의 영향을 받는다.<span> 내용 </span>
div
태그처럼 특별한 기능을 갖고 있지 않고, CSS와 함께 쓰인다.inline
의 특성을 가지고 있다.div
는 줄바꿈이 되지만, span
은 줄 바꿈이 되지 않는다.<img src = "이미지 경로(파일명 포함)" />
<a href = "이미지 경로" target="_blank">이미지 설명</a>
self-closing tag
에 해당된다.inline
특성을 가지고 있다.target
의 속성은 새 창으로 링크로 이동하게 된다.<ul>
<li>home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<li>
의 부모태그로 반드시 자식태그를 가진다.block
특성을 가진다.// text를 입력 가능하며, 1줄 쓰기
<input type="text" placeHolder="type here">
// 옵션항목 선택 가능하며, 1개만 선택할 수 있다.
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
// text 입력 가능하며, 여러 줄 쓰기
<textarea></textarea>
// 체크박스 체크 가능하며, 여러 개 체크 할 수 있다.
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
// 비밀번호 입력 가능하며, 암호화되어 보여진다.
<input type="password">
<button></button>