구조적 마크업 이해
마크업 언어 -
1.
구조적 마크업 - 구조정의
2.
표현적 마크업 - 외형정의
웹페이지의 디자인 요소 강화
•
문서의 구조와 표현 엄격히 분리
html - 문서 구조만 정의
css - 문서의 레이아웃과 디자인 정의
구조적, 표현적 혼용 문제 - (웹접근성 저해, 더높은 유지비용, 문서 크기 비대화)
블록레벨 요소 - 제목, 문단 , 줄바꿈이 일어나는 요소
인라인 요소 - 줄바꿈이 일어나지 않는 요소 (강조, 링크, 이미지 등)
세션 요소 -컨텐츠의 집합 - 하나의 독립적인 컨텐츠 단위
div 요소 - 아이디, 클레스 속성 적용
<section> - 범용섹션 (제목을 시작하는 컨텐츠)
<h1> <h1>
<nav>네비게이션링크로 구성 되는 섹션, 목록으로 작성 (목차로 사용)
<ul>...
<article> 기사등 독립적
<aside> 문서의 주요 콘텐츠와 별개의 영역 정의
<header> 페이지 머리글, 네비게이션 등 정의
<footer> 저작원 정보, 작성자, 링크 등
<hgroup> h1~h6까지 있음 (헤딩을 순서대로 사용하지 않아도 됨)
제목에 따른 섹션 분리
<address> article 또는 body 요소의 연락처 정보 의미
(가장 가까운 조상 요소)
<a herf >
그룹콘텐츠 요소
1.
문단가 인용
<p> 콘텐츠 문단 (시작과 끝에 사용)
저작권, 작성자 - footer
<blokquate cite = >
<pre>형식화 된 텍스트 블록 (공백을 포함한 입력한 텍스트가 그대로 웹 브라우저에 출력 됨
<hr>문단 레벨에서 주제의 분리 (단일요소)
문단안에서 주제의 분리를 나타냄
선을 긋는 목적으로 사용하지는 않기
순서가 있는 목록 : 순소가 바뀌면 의미가 바뀌는 목록
<ol>
<li> 숫자 또는 알파벳 (css를 통해 적용)
<ul> 순서 없는 목록 정의
정의 목록
<dl>
<dt><dd>
<dt><dd>
<figure> <img> <figcaption>
<div>구조적으로 의미없음, 스타일 또는 스크립트 분리 목적으로 사용
콘텐츠 요소
id : 코드내 유일한 식별자 (중복안됨)
id : 코드내 유일한 식별자 (중복안됨)
class :다수 가질수 있음 - css,자바스크립트의 적용을 위해 사용
title :요소의 조언정보를 나타냄, 웹브라우저에서 툴팁으로 표시
텍스트 관련 요소
<nav>
<a href="" target="_self"
_self: 현재의 웹브라우저 창에서 링크가 열림
_parent : 부모창이 있을 경우 부모창에서 링크가 열림
_top : 최상위 웹 브라우저 창에서 링크가 열림
_blank : 새로운 웹브라우저 창을 생성하고 링크가 열림
<em> 내용강조 (중첩해서 사용 가능)
<strong> 내용 중요 (중첩해서 사용 가능)
<q> 인용을 나태내는 인라인 요소 (blockquote0 soqn)
<cite> 인용 문구의 원문 주소)
<abbr>약어 및 두문자 (title속성을 통해 원형표시)
ex)IT "따움표가 생김"
<i> - 이탤릭체 (랭속성에 프랑스어 사용 정의)
<b> - 굵게
<sup> 위첨자
<sub> 아래첨자
<span> 컨텐츠 분리 (단락내에서)
<br> 단순 줄바꿈 (문단분리 x, 단독)
<img src = alt "로딩중 등 이미지 대체 " (단독 사용)
