2020. 8. 9. 01:14ㆍFRONT-END/HTML
HTML의 기본 구조
1. 기본 구조
<!DOCTYPE html>
<html lang="ko"> 언어
<head> 정보
<meta charset="utf-8"> -meta 페이지 설정을 웹 브라우저에게 알려주기 위해 사용
<meta http-equiv="X-UA-Compatible" content="IE=edge"> IE의 호환성 보기 모드를 금지하고 가장 최신 버전의 방식으로 HTML 페이지를 보여줌
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 상단의 탭 부분 이름
<style></style> style: CSS언어를 기술
<link> link: CSS언어를 별도로 명시한 외부 파일 연결
</head> 정보
<body> 구조
</body> 구조
</html> 파일의 전체 영역
2. Tag (태그)
<h1>~<h6>: 제목
<b> : 글자를 굵게 표현
<i> : 글자를 이탤릭체로 표현
<u> : 글자에 밑줄 표현
<s> : 글자에 중간선 표현
<ol>: ordered list로 순서가 있는 리스트
<ul>: unordered list로 순서가 없는 리스트
<li>: 리스트(ordered, unordered)
<dl> : description list로 용어를 설명하는 리스트
<dt>: definition term로 용어를 구분
<dd>: definition description로 용어의 정의를 나타냄.
<strong></strong>: 강조
<p>: 본문
<blockquote>: 인용문
<div>: 영역 나눔
<hr/>: 직선 표시
<br/>: 줄 바꿈
<address>: 주소, 저작권(카피라이트), 회사 연락처 등등..
<!--주석 -->
그 외 많은 태그(Tag)가 있지만 필요성에 따라 찾아서 사용
참고 링크: https://www.w3schools.com/tags/default.asp
*id 속성: <tag id="값"> 웹 페이지에서 고유한 요소를 의미하는 값
특수문자:
- © :카피라이트 특수문자
- :띄어쓰기
- & :&
- <>: < 내용>---> <내용>
- << >>: « 내용 »
- 왼쪽 화살표/오른쪽 화살표: ← / →
구조를 표현하기 위한 기타 "시멘틱 태그"들
시맨틱 태그란?
시맨틱(Semantic)태그는 "내용을 정확히 알 수 있는 태그"이다.
예를 들어, <div>나 <span>과 같은 태그는 태그만으로는 어떤 내용이 기술되었는지 전혀 알 수가 없다.
그러나 <from>,<table>,<img> 와 같은 태그는 기술되는 내용이 무엇인지 충분히 짐작할 수 있다.
이런 태그들을 시맨틱 태그라고 한다.
HTML5 버전이 발표되면서 시맨틱 태그라는것이 추가 되었으며, 앞으로의 웹은 시맨틱 웹이라고 한다.
출처:https://blog.naver.com/pisibook/221547583647
<section>: 주로 <h1>~<h6>와 같이 사용
<header>: 사이트 앞머리, 머릿글, 사이트 소개 등등
<article>: 블로그 포스팅, 뉴스 기사, 회사 소개 등
<aside>: 본문과 상관없는 사이드바/배너 영역
<footer>: 페이지 하단
<nav>:주로 메뉴
<hgroup>: 제목과 관련 부제목 하나로 묶기