HTML
HTML Hypertext Markup Language 웹 페이지의 내용을 구조화하기 위해 사용하는 언어
HTML Document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕!</p>
</body>
</html>Hello WorldHello World
안녕하세요!
HTML Elements
제목/ 단락 요소
<h1>~<h6>Heading 일반 텍스트보다 강조되어 나타나는 제목 태그<p>paragraph 단락 구분<br>linebreak 줄 바꿈
텍스트를 꾸미는 요소
<b>bold 단순히 텍스트를 진하게 표시하는 역할<strong>bold 중요한 부분을 강조해 웹 접근성에 기여<i>기울임 italic 시각적<em>기울임 emphasized 실질적인 강조<u>underline 밑줄<s>strike 중간선
div / span tag
태그 자체에 의미 없음, 단순히 요소들을 묶기 위해 사용되는 태그
<div>block<span>inline
리스트 요소
<ul>unordered list<ol>ordered list<li>list
<ul>
<li>가</li>
<li>나</li>
<li>다</li>
...
</ul> 🔎 void(empty) elements
Self-closing을 하는 일부 태그들이 있다.
<br/ > <img/ > <input/ > 이를 빈 태그 라고 한다.
Link
<a href="http://url” target="_blank">Text</a>Target Attributes
_black새로운 창에서 오픈_self현재 화면에서 오픈(기본값)_parent현재 화면의 부모 프레임에서 오픈_Top현재 윈도우 전체에서 오픈
내부 링크
페이지 스크롤이 길어질 경우! 특정 부분으로 이동할때 사용
<a href="#element-id">상단으로 이동</a>- href=“이동할 요소의 id값”
Images
<img src=“untitled.jpg”>
<img src=“http://url”>Video
<video src="Video.mp4" width="320" height="240" controls>
Video not supported
</video>
Frontend Engineer 🌱