[html] MDN 정리1

HTML Element의 구조

<oepning tag> content </closing tag>
단일태그 : <img>

속성

요소-속성, 속성-속성 사이 공백
속성 다음엔 등호(=)
속성값은 " "로 감싸기
- 생략 가능 but 오류 야기
- ' ' & " " : 모두 가능하지만 혼용X
- 특수문자 표시에는 HTML entities 사용

bool 속성 : 값이 없는 속성, 속성의 이름과 동일한 하나의 값만 가질 수 있음

속성	사용 태그	역할	속성	사용 태그	역할
href	<a>	웹주소로 연결	title	<a>	링크에 대한 추가정보
target	<a>	_blank: 새탭에서 열기	disabled	<input>	bool 입력 비활성화
lang	<html>, <p>	언어 설정

블럭 레벨 vs 인라인

블록레벨

줄바꿈
구조적 요소를 나타냄
단락, 목록, 네비게이션 메뉴, 꼬리말 표현

중첩 : 블록 ⊃ 블록 / 인라인 !⊃ 블록

인라인

항상 블록 레벨 내에 포함
문장, 단어와 같은 작은 부분에 적용
줄바꿈 하지 않음
ex) <a: 하이퍼링크>, <em>, <strong>

HTML 문서 구조

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title></title>
    </head>
	<body>
    	<p></p>
    </body>
</html>

<!DOCTYPE html> : 유효 문서 양식
<html> : 기본요소, 전체 페이지의 콘텐츠 포함
<head> : 사용자에게 보이지 않지만 검색결과에 노출될 키워드, 홈페이지 설명, CSS 내용 담음

공백 : 단일 공백으로 줄임

Entity references

특수문자 HTML 코드로 해석되지 않도록

<	lt
>	gt
"	quot
'	apos
&	amp
공백	nbsp (NonBreakingSPace)

주석

head

제목 달기

<h1> : 페이지 내용물의 제목, 일반적으로 페이지당 한번 사용
<title> : html 문서 타이틀 표현 메타데이터

제목과 단락

구조

<p> : 단락
<h#> : 제목 (1~6)
- <h1> : 페이지당 하나
- <h3> : 하위 표제
- 한 페이지에 3개 이하 사용 권유
<span> : 아무 의미 없고 css 적용시킬 때 사용

구조의 필요성

읽기 편하게
검색 엔진 최적화
시각 장애인에게 개요 제공

리스트

<ul> : Unordered List 묶음
<ol> : Ordered List 묶음
<li> : 리스트 항목

중요

<em> : 기본 이탤릭체 표시, 다른 톤 목소리
<i>, <span>

강조

<strong> : 굵게, 다른 톡 목소리
<b>, <span>
<u> : 밑줄

하이퍼링크

기본

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

href : 링크
title : 링크 정보
URL : 웹/파일 연결
- 같은 디렉토리 : 파일명
- 하위 디렉토리 : 폴더명/파일명
- 부모 디렉토리 : ../폴더명/파일명
id : 문서 내부 연결

<h2 id="Mailing_address">Mailing address</h2>

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

이메일 링크 : URL 스키마 (mailto:)
- subject : 메일 제목
- cc/bcc : 참조, 부참조
- body : 내용

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

팁

링크 라벨은 가능한 짧게
동일 사이트 내에선 가능한 상대 링크 사용
Not HTML 연결시 명확히 표시
다운로드 연결시 다운로드 속성 사용

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Download Firefox 39 for Windows
</a>

Description lists

용어 및 정의, 질답 같은 일련의 항목을 표시

구조

<dl>
<dt> : 상위 (용어, 질문)
<dd> : 하위 (정의, 답변)

인용구

<blockquote> : 블록 레벨
<q> : 인라인 레벨
- cite : 출처 표기 속성, 화면에 노출X
- <cite> : 화면에 표시, 링크 연결

설명

<abbr title=""> : 약어 표시
<address> : 작성자 연락처 세부정보 표시

기타 유형

<sup>, <sub> : 위첨자, 아래첨자
<code> : 컴퓨터 코드 표시
<pre> : 초과 공백을 유지
<var> : 변수명 특별 표시
<kdb> : 키보드 입력 표시
<samp> : 프로그램 출력 표시

시간과 날짜 표시

<time> : 기계가 읽을 수 있는 형식으로 시간/날짜 표시
- datetime : 0000-00-00 00:00

문서 구조

문서 기본 구조

header : <header>
navigation bar : <nav>
- 메인 섹션으로 연결
- 헤더와 같이 다른 페이지로 넘어가도 고정시킴
main content
- <main> : 페이지에 한번만 사용, <body> - <main> (중첩X)
- <article> : 독립적으로 구분되는 구성, 여러개 사용
- <section> : 제목 포함, <article>과 함께 사용
- <div>
sidebar : <main> - <aside>
- 주변 정보, 링크, 인용부호, 광고

줄바꿈

<br> : 단락에 줄바꿈
<hr> : 수평선 만듦

웹사이트 계획

모든 페이지 공통 포함 정보 작성
페이지 구조 스케치, 블럭 기능 작성
포함시킬 컨텐츠 리스트 작성
컨텐츠 그룹화하여 페이지 구성
사이트맵 그리기

'코딩 > HTML\CSS\JS' 카테고리의 다른 글

[html] MDN 정리3 (1)	2023.01.04
[html] MDN 정리2 (0)	2023.01.03
[JS 클론코딩] 노마드코더 JS크롬앱만들기 (0)	2022.11.07
[CSS] 생활코딩 반응형 디자인, 미디어쿼리, CSS 파일 (0)	2022.11.05
[CSS] 생활코딩 box model : block, inline, div, span, grid (0)	2022.11.05