HTML STUDY

구조적 마크업 이해 마크업 언어 -

웹페이지의 디자인 요소 강화

구조적, 표현적 혼용 문제 - (웹접근성 저해, 더높은 유지비용, 문서 크기 비대화)

블록레벨 요소 - 제목, 문단 , 줄바꿈이 일어나는 요소 인라인 요소 - 줄바꿈이 일어나지 않는 요소 (강조, 링크, 이미지 등)

세션 요소 -컨텐츠의 집합 - 하나의 독립적인 컨텐츠 단위

div 요소 - 아이디, 클레스 속성 적용

<section> - 범용섹션 (제목을 시작하는 컨텐츠) <h1> <h1> <nav>네비게이션링크로 구성 되는 섹션, 목록으로 작성 (목차로 사용) <ul>... <article> 기사등 독립적 <aside> 문서의 주요 콘텐츠와 별개의 영역 정의 <header> 페이지 머리글, 네비게이션 등 정의 <footer> 저작원 정보, 작성자, 링크 등

<hgroup> h1~h6까지 있음 (헤딩을 순서대로 사용하지 않아도 됨)

제목에 따른 섹션 분리 <address> article 또는 body 요소의 연락처 정보 의미 (가장 가까운 조상 요소) <a herf >

그룹콘텐츠 요소

순서가 있는 목록 : 순소가 바뀌면 의미가 바뀌는 목록 <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 "로딩중 등 이미지 대체 " (단독 사용)