MarkUp(마크업)

MarkUp(마크업)

웹페이지에서 여러가지 요소들에 디자인 스타일을 정의 사용자 인터렉션을 구현하기 위해

의미를 부여

- 시멘틱 마크업: 의미부여(웹접근성 강화)

-레이아웃 요소 추가

header

footer

nav id=mainmenu

section id=visual

article 실제내용들어가는 본문 

ad 그냥 광고

aside -탑버튼/ 빠른메뉴 등등

—————————————————————————————————————————————————————————————

[인라인태그/블럭태그]

-인라인 태그: a / span / img / input

-블럭 태그: 나머지 전부

—————————————————————————————————————————————————————————————

[컨텐츠 요소 / 레이아웃 요소]

-컨텐츠 요소 

:img / p / table / ul / li / dl / form

-레이아웃 요소

:div / section / nav / aside / article / header / footer

—————————————————————————————————————————————————————————————

마크업 요소 유효범위

 

1. 인라인 요소는 블럭요소 안에 넣어라 (오류는 아니지만, 스타일 잡기가 힘들다.)

       A < span < p < ul / li = table = dl = form < section = nav = header = footer =div 

1. 하나의 컨텐츠를 설명하기 좋다. Dl dt(제목) dd(내용)
2. Section (실제로 의미를 담고있는 태그) / div (배치를 위한 의미없는 태그) section 안에 section써도 됨.
3. Main 태그는 모바일에서만 사용.
4. 블럭요소는 기본으로 부모요소에 100퍼센트 찬다. 요소 하나 하나를 감싸려고 하지 말기.
5. 배치는 외우기 ( float / margin / position ) padding 은 안쪽 여백이지 배치가 아니다.
6. Float : 다음 요소와의 배치 1번 2번 요소는 float 쓰고 3번 요소는 clear:both로 떨어지고, 나부터 다시 배치하겠다. 
7. margin은 위 아래 여백 줄 때
8. Position: relative =>그냥 자기 위치 / 살짝 엇갈려 있을 때, 자유로운 배치는 포지션 absolute =>위에서 떠다니는 아이.. 정확한 영역 없음. 그래서 다음단이 그 영역을 차지하게 되어버림.

—————————————————————————————————————————————————————————————

웹 접근성

<a href=“링크” target=“_blank” title=“네이버새창으로바로가기”></a>