HTML (Hyper Text Markup Language)
-html에 대하여
-html 사용법
-self-closing tag
-html에서 가장 많이 쓰이는 태그
-HTML에 대하여
"구조(structure)를 표현하는 언어"
html은 문서의 구조나 문서의 내용들을 다루고 있는 언어이며 트리구조입니다.
html은 약자로 웹페이지를 구성하는 markup 언어이며, 웹페이지를 만드는 뼈대가 되는 언어입니다.
자신이 작성한 문서를 읽는 경우가 있기 때문에 의미있는 semantic tag를 적절하게 사용하면 다른 사람이 html문서를 접할때 쉽게 이해하고 개발할 수 있습니다.
-HTML 사용법
- html은 tag들의 집합니다.
*Tag:부등호(<>)로 묶인 html의 기본 구성 요소입니다. - html 확장자를 사용합니다.
<!DOCTYPE html>
-> 이 문서가 HTML 문서임을 명시합니다.
<html>
-> html 시작 태그로, 문서 전체의 틀을 구성합니다.
<head>
-> head 태그는 문서의 메타데이터를 선언합니다
<title>Page title</title>
-> 문서의 제목, 브라우저이 탭에 보여집니다.
</head>
-> </태그이름>은 해당 태그가 끝났음을 의미합니다.
<body>
-> body 태그는 문서의 내용을 담는 곳 입니다.
<h1>Hello world</h1>
-> heading을 의미하며, 크기에 따라 h1부터 h6까지 있습니다.
<div>Contents here</div>
-> content division을 의미하며, 줄바꿈 됩니다.
<span>Here too!</span>
-> 줄바꿈이 없는 content 컨테이너 입니다.
</div>
-> div 태그가 끝났음을 의미합니다.
</body>
-> body 태그가 끝났음을 의미합니다.
</html>
-> html 태그가 끝났음을 의미합니다.-self-closing tag
여는 태그는 있지만 닫는 태그는 없는 경우입니다.
태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는경우) </tag>와 같이 표현가능합니다.
<img src="apple_logo.png"></img>
<img src="apple_logo.png" />
여기에는 src라는 속성이있고, 그 속성에 대한 값이 "apple_logo.png" 입니다.-html에서 가장 많이 쓰이는 태그
mdn reference 문서에 가면 많은 태그들이 있지만 다 외워야 할 필요는 없습니다.
중요하고 잘쓰이는 태그 몇 개만 알아도 웹,앱을 만드는데는 지장이 없습니다.
- div (division) 태그
ex)
<div>div 태그는 한 줄을 차지합니다.</div>- span 태그
ex)
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>- img 태그 : 이미지 삽입
img 태그는 닫는 태그가 없습니다.
ex)
<img src="https://../jpg">
여기서의 src는 속성(key)이고 "https://../jpg"는 값(value)입니다.- a 태그 : 링크 삽입
ex)
<a href="https://www.naver.com">네이버</a>
현재 보고 있는 탭에서 사이트가 열립니다.
<a href="https://www.naver.com" target="_blank">네이버</a>
링크를 눌렀을때 새로운 탭에서 사이트가 열립니다.
target을 이용하여 사이트를 현재보고있는 탭에서열지 새로운 탭에서 열지를 정할 수 있습니다.- ul li 과 ol li
ul : unordered list
ol : order lise
li : list
li는 ul,ol과 함께 사용할 수 있으며 ul,ol의 자식요소 입니다. (ul의 사용이 많습니다.)
ex1) ul,ol에 대한 예시입니다.
ul은 순서가 없는 리스트입니다.
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<ul>
<li>list 3-1</li>
</ul>
</ul>
ex2) ol,li에 대한 예시입니다.
ol은 순서가 있는 리스트입니다.
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<ol>
<li>list 3-1</li>
</ol>
</ol>- input , textarea : 다양한 입력폼
웹,앱에서 필요한 입력 폼(form) 입니다.
-text
사용자 입력을 할 수 있게 되어있습니다.
ex)
<input type="text" placeholder="type here">-password
작성하는 텍스트나 숫자가 노출되지 않습니다.
ex)
<input type="password">-check box (중복으로 선택이 가능합니다. 그룹 설정이 불가능하고 자유롭게 여러개를 선택할 수 있습니다.
눌러서 체크할 수 있습니다.
ex)
<input type="checkbox">-radio button (중복으로 선택이 불가능합니다. 그룹이 설정이 가능합니다.)
눌러서 체크할 수 있습니다.
ex)
<input type="radio"> 옵션A
// 이렇게로는 중복선택이 가능합니다.
<input type="radio" name="option1"> 옵션A
<input type="radio" name="option1"> 옵션B
//name을 이용하여 동일한 단어를 입력하여 하나의 그룹으로 설정해야 둘 중 하나만 선택이 가능합니다.-textarea
여는태그 닫는태그 모두 작성해야 합니다.
input과는 다르게 multi line 이 됩니다. 즉, 줄바꿈이 가능합니다.
ex)
<textarea></textarea>
-button
누를 수 있는 버튼이 생깁니다.
ex)
<button>로그인</button>