코딩/HTML\CSS\JS

[html] MDN 정리1

낫띵온미 2022. 12. 27. 15:34

HTML Element의 구조

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

속성

  1. 요소-속성, 속성-속성 사이 공백
  2. 속성 다음엔 등호(=)
  3. 속성값은 " "로 감싸기
    • 생략 가능 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 내용 담음

<meta charset="utf=8"> : 인코딩 방식 지정
<title> : 페이지 제목 설정, 브라우저 탭에 표시
<body> : 표시될 콘텐츠 포함

  • 공백 : 단일 공백으로 줄임

Entity references

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

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

주석

  • <!-- 내용 -->

head

제목 달기

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

meta

  • charset
    • utf-8 : 전세계 문자 집합
    • lang 태그 : <html>, <span>, <p>에 추가하여 언어설정
  • 관리자 머릿말 
    • name : 메타요소의 정보 형태 알려줌
    • content : 메타데이터 컨텐츠

link

  • 맞춤 아이콘
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  • CSS 파일
<link rel="stylesheet" href="my-css-file.css">
  • JavaScript : </body> 태그 바로 앞에 넣는 것이 좋음
<script src="my-js-file.js"></script>

제목과 단락

구조

  • <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

문서 구조

문서 기본 구조

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

줄바꿈

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

웹사이트 계획

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