HTML이 가지는 라인들에 대한 설명을 나열하겠다.
<!DOCTYPE html> : 문서형식 선어. 여기서는 현재 문서가 HTML 5 문서임을 명시.
<html> : HTML 문서의 루트(ROOT) 요소를 정의한다.
<head> : HTML 문서의 메타데이터가 정의되는 곳. 웹브라우저에 표현되지 않으나, 사전 정의되는 것
<title> : 문서 제목 (사용용도 : 툴바에 표시됨. 즐겨찾기할때 표시됨, 검색엔진의 페이지 제목이보통 표시됨)
<style>: css 코드를 써서 스타일을 정의함. style 태그를 굳이 안쓰고 css를 통채로 불러올 수 있음.
예) <style>CSS 코드...</style>
<meta> : 웹사이트가 어떤정보를 담고있는지 더 자세히 알려줌. 링크 보낼때 밑에 뜨는 간략 설명
예) <meta name="description" content = "내용">
<link> : 다른곳에 저장된 파일을 이 페이지에 불러와라.
예) <link href="파일위치" rel="파일종류" type="파일 타입" />
<script> :
<base> :
<body> </body> : 웹브라우저에 보이는 내용
텍스트 관련 태그들
<h1></h1>~<h6></h6> : 제목(heading)을 나타냄. 글자 크기
<b></b> : 굵은글씨
<i></i> : 기울임 글씨
<p> : 단락(문단)을 나타냄
미디어 관련 태그들
<img src="이미지주소" /> : 이미지 삽입
<video src="비디오주소" controls /> : 비디오 삽입. controls는 컨트롤 아이콘을 넣어줌
링크
<a herf="사이트주소" target="_blank">글자</a> : 새창을 띄워서 사이트주소로 이동
테이블
<table border="1">
<thread> : 헤더, 칼럼이 갯수와 이름이 정의됨
<tr>
<th>칼럼1제목</th>
<th>칼럼2제목</th>
</tr>
</thread>
<tbody>
<tr>
<td>행1열1내용</td>
<td>행1열2내용</td>
</tr>
<tr>
<td>행2열1내용</td>
<td>행2열2내용</td>
</tr>
</tbody>
</table>
목록태그
<ol> : ordered list
<li>1번내용</li>
<li>2번내용</li>
</ol>
<ul> : unordered list
<li>1번내용</li>
<li>2번내용</li>
</ul>
구역을 나누는 태그
<div class="CSS스타일이름">상단</div> : 줄 전체 공간을 차지 BLOCK ELEMENT
<div class="CSS스타일이름">중단</div>
<div class="CSS스타일이름">하단</div>
<span class="CSS스타일이름">좋아요</span> : 내용물 만큼의 공간만 차지 INLINE ELEMENT
<span class="CSS스타일이름">구독</span>
인풋태그
<input type="text" /> : 텍스트
<input type="checkbox" /> : 체크박스
<input type="radio" /> : 라디오
<input type="color" /> : 색깔
<textarea></tesxtarea> : 여러문장
<select name="name"> : 드랍다운
<option value="옵션1">옵션1</option>
<option value="옵션2">옵션2</option>
</select>
<form>
<input type="email" placeholder="최초에들어갈 텍스트" />
<input type="password" palceholder="최초에 들어갈 텍스트" />
<button type="submit">로그인</button>
</form>
<!-- 주석내용 --> : 주석 표시