HTML 기초
by Steady OnMDN docs에서 학습한 내용을 바탕으로 HTML에 대한 기본적인 내용을 정리해보았다.
HTML이란?
✏️ HyperText Markup Language
- 웹사이트의 실제적 내용과 구조를 만드는데 사용
- 웹사이트 내의 글자 혹은 이미지, 입력 양식을 제어하고, 그 중 일부 데이터를 작성할 수 있다.
- 집에 비유하자면, HTML은 기둥과 벽, CSS는 인테리어, JavaScript는 가전제품
- HTML 문서에 대한 웹개발 규칙에 따르면 웹사이트의 초기화면은 일반적으로 ‘index.html’로 정의
- HTML의 태그는 기본적으로 <열림></닫힘> 태그가 쌍으로 사용됨
❗️HTML 전체 태그 찾기 및 사용방법 보기
기본 태그
<!DOCTYPE html> // 이 문서가 html형식이라는 것을 표시하는 태그, 현재는 형식적으로 남아있음
<!-- --> // 주석처리
<html></html> // 페이지 전체를 감싸는 태그
<head></head> // 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명,
//CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용
<body></body> // 홈페이지 이용자에게 보여지는 부분<head>
<title></title> // 웹페이지의 제목으로 북마크나 브라우저의 탭제목으로 보여짐
<meta> // 메타데이터로 페이지에 대한 설명을 추가할 수 있다.
// meta 태그의 og(open graph)로 콘텐츠의 요약 내용을 썸네일 형식으로 보여질 수 있도록 한다.
<meta charset="utf-8"> // 웹페이지를 utf-8로 인코딩
<link rel="설명" href="아이콘파일 주소" type="image/x-icon" sizes="이미지 사이즈">
//웹사이트의 아이콘을 넣는 태그
<link rel="stylesheet" href="css 파일 경로"> //css파일 적용 태그
<script defer src="JS 파일 경로"></script> //JS파일 적용 태그. 렌더링 순서에 의한 오류, 혹은 비효율적인 re-rendering을 방지하기 위해 defer를 사용더보기
[기본적으로 웹에 설정해줘야 하는 meta tag]
<meta property="og:type" content="website">
<meta property="og:url" content="url">
<meta property="og:title" content="Title">
<meta property="og:image" content="대표이미지">
<meta property="og:description" content="페이지 설명">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="en_US">
<!-- 필수는 아니지만, 포함하는 것을 추천하는 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
[네이버 블로그, 카카오톡 og]
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />
[트위터 og]
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" content="표시되는 이미지 " />
[페이스북 og] 자세한 내용(https://ogp.me)
<meta property="og:title" content="타이틀" />
<meta property="og:type" content="type" />
<meta property="og:url" content="url" />
<meta property="og:image" content="대표이미지" />
[모바일 앱 미리보기]
<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" /><body>
[body 기본태그]
<nav></nav> // 내비게이션 바; 메뉴바로 <ul><li>태그가 하위로 사용됨
<h1~6></h1~6> // heading, 한페이지에 3가지 이상 사용하지 않는 것이 좋음, 계층적으로 사용할 것
<p></p> // 표준 텍스트 단락
<div></div> // 블록 컨테이너
<span></span> // 인라인 컨테이너로 보기에는 아무 효과도 없음. CSS를 효과적으로 사용하기 위해 씀
<ul></ul> // unordered list 순서 없는 목록
<ol></ol> // ordered list 순서 있는 목록
<li></li> //List ul, ol 태그의 자식 태그로 쓰임. 목록의 항목을 감싸주면 됨<하이퍼링크>
[하이퍼링크를 위한 태그]
<a></a> // anchor; 링크, 하이퍼링크를 만드는 태그
<a href="url"></a> // 기본 사용 폼
//- target="_blank"를 추가하면 새창에서 열기
//- title은 링크에 대한 툴팁, 마우스 오버시 나옴
//- download 기본 저장 파일이름을 제공할 수 있음
//- mailto, tel을 사용하여 메일이나 전화번호 등의 연락처에 바로 연결 가능<사진, 비디오 등에 대한 태그>
[이미지 태그]
<img scr="이미지 경로"> 이미지 삽입
// - title : 이미지 제목
// - alt 태그 : 이미지 로드가 안 됐을 시 혹은 시각 장애인을 위한 설명문
// - width, height로 이미지 크기를 조정할 수 있음 → 권장하지는 않고, 미리 편집해두거나 css를 사용하는 것이 바람직함
[비디오, 오디오 태그]
<video src=“경로” controls> // 비디오 삽입
<audio src=“경로” controls> // 오디오 삽입
// → 브라우저에 따른 삽입은 MDN 링크 참고
[다른 웹페이지 내장]
<iframe></iframe> // 중첩 브라우징 맥락; 현재 문서 안에 다른 HTML 페이지를 삽입<텍스트 편집 관련 태그>
[텍스트 편집 태그]
<br> // bar 줄바꿈
<hr> // 구분선
<dl></dl> // description lists 서술형 리스트
<dt></dt> // description term 용어, 질문과 같은 상위항목
<dd></dd> // description definition 정의, 답변과 같은 하위항목
<sup></sup> // 위첨자
<sub></sub> // 아래첨자
<time datetime="표시형식"></time> 시간/날짜 표기
<blockquote></blockquote> 인용구 블록 cite 태그를 써서 출처를 표기할 수 있다
<q cite="출처링크"></q> 인라인 인용구
<cite><cite> 인용 출처를 나타낼때 사용 위에서 사용한 cite요소 안에 있는 출처에 대한 링크를 연결할 수 있음
<abbr title=""></abbr> 약어를 표시할 때 사용, 뒤에 오는 텍스트에 마우스 오버 시 툴팁으로 표시됨
<em></em> # 강조1(이탤릭으로 표현)
<strong></strong> # 강조2(굵은 글씨)
<u></u> # underline 밑줄
→ em, strong, u 태그는 강세 등 화면판독기 인식 시 다른 톤으로 표현되므로 단순한 텍스트 효과만을 위해 사용하지는 않는다. 단순한 효과를 줄때에는 css를 사용한다.
[대응하는 css 및 사용처]
<i></i> “이탤릭” 외래어, 분류학 명칭, 전문 용어, 생각 등
<b></b> “굵은 글씨” 주요단어, 제품 이름, 주요 문장 등
<u></u> “밑줄” 적절한 이름, 잘못된 철자 등<문서 하단>
<footer></footer> //구획의 작성자, 저작권 정보, 관련 문서 등의 내용
<address></address> //연락처 세부사항 표시; 홈페이지 맨밑에 많이<그 외>
[코드 나타내기]
<code></code> // 컴퓨터 코드를 표시
<pre></pre> // 공백(들여쓰기 표시)
<var></var> // 변수이름
<kbd></kbd> // 키보드의 키 표시
<samp></samp> // 출력 표시, 터미널에 나오는 것처럼 쓰고 싶을때'Last Record(Web Develop) > WEB' 카테고리의 다른 글
| JavaScript 기초3(Python과 비교하여, ES6 기준) : 배열 (0) | 2022.08.15 |
|---|---|
| JavaScript의 ES란? (ES5와 ES6의 차이점에 대하여) (0) | 2022.08.14 |
| JavaScript 기초2(Python과 비교하여, ES6 기준) : 조건문 (0) | 2022.08.11 |
| JavaScript 기초1(Python과 비교하여, ES6 기준) : 자료와 변수 (0) | 2022.08.11 |
| CSS 기초 (0) | 2022.08.10 |
블로그의 정보
Roen의 iOS 개발로그
Steady On