* HTML Semantic Elements(그룹핑)
Semantic Element : 의미적 요소
- Groping 하는 요소
: div, span : 의미를 무여하지 않고 단순 Grouping
: header, section : 의미를 부여하면서 Grouping = > 특정 영역에 대한 의미를 부여
1. header
- 웹사이트의 시작 영역 : 로고
- 메뉴, 로그인 같은 링크
- 하나이상의 제목 요소
2. nav:navigation
- 메뉴 링크를 Grouping
3. section
- 주제별 콘텐츠 그룹
4. article
- 독립적으로 배포할 수 있는 내용
* section & article ==> Case By Case : 상황에 맞게 사용하면 된다.
5. aside
- 메인이 되는 내용의 콘텐츠를 제외한 중요도가 낮은 콘텐츠
Ex) 광고
6. figure/figcaption
: figure => 그림,도표,사진같은 요소들을 Grouping
: figcation => figure로 Grouping 하는 요소들에 대한 설명
7. footer
: 바닥글
- 제작 정보,저작권,연락처,사이트맵,Top 링크(맨 위로가기),관련 페이지(정보 정책)
8. main
: 메인 콘텐츠
- 웹 페이지에 각 한번씩만 사용되어야 한다.
- 일반 Semantic Element에 포함되는 형태로 사용하면 안된다.
Ex)
<header></header>
<nav></nav>
<!-- 위->아래/왼쪽->오른쪽 -->
<! -- 세로,가로 방향의 흐름이 갈라지지 않도록 하나의 영역으로 묶어준다. -->
<main>
<section></section>
<article></article>
<aside></aside>
</main>
<footer></footer>
* 태그 분류시 주의점
1. Element 형태 분류
- 일반 요소 : 시작/종료 쌍으로 구성되는 형태
- 빈 요소 : 시작태그로만 구성되는 형태
2. Element의 기본 표시 방법 분류
- Block Element
: 하나의 그룹 콘텐츠는 한줄씩 표시 된다.
: 해당 줄의 전체 너비를 채운다.
: 일반 요소 모두 포함 가능하다(Block,Inline,Text).
- Inline Element
: 하나의 그룹콘텐츠는 새 줄에서 시작하지 않는다.
: 필요한 만큼의 영역 너비만 채운다.
: Inline, Text 요소만 포함 가능하다(Block 요소는 포함할 수 없다.)
3. div , span
- 단순 Grouping 컨테이너 요소
- div : block element
- span : inline element
* 경로 지정 방식
1. 절대 파일 경로
- 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식
- 항상 같은 위치에 접근할 수 있다.
- 주소의 길이가 길다.
- 웹사이트 전체가 이전을 하게되면 주소의 업데이트가 반드시 필요하다.
* 표기방식
- 폴더 경로 : 폴더이름/
Ex)
- 대한민국 서울특별시 마포구 공덕동 A아파트 1동 1호
- https://www.w3schools.com/html/html_filepaths.asp
- https://www.w3schools.com/
- https://www.youtube.com/watch?v=qP9gE8Enxfo
2. 상대 파일 경로
- 출발 지점에 따라서 도착지가 달라질 수 있는 경로 방식
- 첫 출발지를 어떻게 선택하는지가 중요하다.
- 위치 기준이 되는 파일의 위치가 변경되면 파일 경로를 모두 업데이트 해야한다.
- 내부 위치의 변경 없이 웹사이트 전체가 이전이 되는경우 업데이트할 필요가 없다.
Ex)
- 1동 1호 (출발지 : 대한민국 서울특별시 마포구 공덕동 A아파트)
- html_filepaths.asp
* 표기 방식(현재 파일 위치 기준)
- ./ : 현재 폴더 - ./file_paths.asp
- ../ : 상위 폴더 - ../file_paths.asp
3. 루트 상대 경로 방식
- A아파트 1동 1호
* 표기 방식 : / -루트(root) 경로( 최상위 폴더 )
Ex)
- 절대경로 : https://www.w3schools.com/html/html_filepaths.asp
- 루트경로 : /html/html_filepaths.asp
사례)
주소 : www.w3schools.com
폴터 구조
/ - html - a.html
- images - flower.jpg
1) 절대 주소 : <img src="http://www.w3schools.com/images/flower.jpg" />
2) 상대 주소 : <img src="../images/flower.jpg" /> => a.html 기준(현재)
3) 루트 주소 : <img src="/images/flower.jpg" />
(위치변경) => / - html - intro - a.html
- about
- images - flower.jpg
1) 절대 주소 : <img src="http://www.w3schools.com/images/flower.jpg" /> =>변동 없다
2) 상대 주소 : <img src="../../images/flower.jpg" /> => 위에 폴더가 하나 더생겨서 상위폴더를 한번 더
3) 루트 주소 : <img src="/images/flower.jpg" /> => 변동 없다
(주소변경) => www.w3schools.com => www.w3schools-frontend.com
1) 절대 주소 : <img src="http://www.w3schools-frontend.com/images/flower.jpg" /> =>주소가 변동 되어야 한다.
2) 상대 주소 : <img src="../../images/flower.jpg" /> => 변동 없다.
3) 루트 주소 : <img src="/images/flower.jpg" /> => 변동 없다