html lang="ko" 한국어를 통해 ISO 639-1 코드목록
<!DOCTYPE html> <--- html5 의 타입이다
<html lang="ko">
<head> <--- 문서의 정보
- HTML 문서의 제목
- 기타정보
- 스타일 직접 입력
- 스타일 외부에서 가져와서 연결
</head>
<body> <--- 문서의 구조
</body>
<Meta> </Meta> 메타태그는 문자가 작성되는 인코딩 방식을 정의하는곳 UTF-8 로 작성한다
character sets 위키피디아 검색해서 보면 조금더 문자인코딩 방식을 볼 수 있다.
HTML 요소 레퍼런스 mdn google 에서 검색 후 ->
디바이스 크기에 맞춰서 viewpoint!
메타데이터 - LINK
href= 링크의 리소스 url
rel = 링크된 문서와 현재와의 문서와의 관계를 명명합니다.
메타데이터 - STYLE
정보를 지칭하는 태그 이다 헤드 태그안에 작성을 하는게 맞지만
바디태그에 들어가도 문제는 없다.
하지만 효율적인 방법이 아니다 문제될건 없지만 기본적으로는 스타일 태그는 헤드태그에 작성하는게 맞다!
메타데이터 - MIME TYPE
메타데이터 - base
href= ./main.css = 상대주소 나를 기준으로
<base href="./css/:>
주의하게 쓰일 경로만 html 에서는 한버밖에 사용이 되지 않는다.
아래 주소처럼 추출하려면 개발자도구에서 화면 클릭을 드래그 찍고 소스 부분에서 이미지 폴더안에
주소가 있을것이다. 경로이기 때문에 주소창에 쳐도 입력이 되지 않는다 그래서 open in new tab을 눌러서
새로운 페이지를 추출해서 그 드래그 주소를 입력하면된다 !! 주의!!
heropcode.github.io/GitHub-Responsive/img/bg-small.jpg
대신 base href=" (heropcode.github.io/GitHub-Responsive}" 를 적어주고
상대주소를 입력하면 img src="/img/bg-small.jpg" 로 바꿔서도 가능하다
base 태그는 하나만 들어가기 때문에 상대경로의 영향을 끼치기도 하기 때문에 일부분에서 사용하는 경우는 문제가 되 수 도 있다.
BODY 내 구조 개념
Header
<header> 요소는 소개나 탐색을 돕는것의 그룹 , 보통 사이트위의 바같은 것
-헤더안에 헤더를 넣을수없다 풋터라는 요소도 넣을 수 없다.
-어드레스태그 안에 헤더를 사용하면 안된다(규칙이다)
-전역 속성만을 포함한다.
Footer
<footer> 가장 가까운 구획화 컨텐츠나 구획화 루트의 푸터
일반적으로 작성자 구획 , 저작권 , 데이터 , 관련된 문서의 링크
H1 ~ H6
6단계의 문서 제목을 구현합니다.
- 제목 폰트를 줄이기 위해 낮은 폰트사용을 하면 안된다.
- css font-size 를 사용한다.
html 구조 css표현
h1-> h2를 쓰는게 맞다
또 두개의 제목을 입력하는 경우 <h1> 을 중복하지말고 <h2>로 중복
문제가 발생하진 않으나 h2로 수정해서 두번을 쓰는게 효율적이고 좋다고한다.
main
콘텐츠구역은 문서의 핵심 주제나 애픒리케이션의 핵심 기능성에 대해 부면 , 또는 직접적으로 연관된 컨텐츠
- IE 지원불가
- 한 문서에 하나의 <main> 요소만 포함 가능
article
독립적으로 구분되거나 재사용 가능한 영역을 설정 (매거진/신문 기사 , 블로그 등)
헤더 : 로고 , 메뉴
푸터 : 주소 사업자
메인 : 핵심
일반적으로 <h1> ~ <h6> 를 포함하여 식별
작성일자와 시간을 <time> 의 datetime 속성으로 작성
독립적이다(재사용)
section
문서의 일반적인 영역을 설정
일반적으로 <h1> ~ <h6>를 포함하여 식별.
섹션-> 아티클 , 아티클 -> 섹션 이 둘다 구조는 상관은 없다
div 도 일반적으로 의미 없이 사용을 한다 의미를 가지지 않는 구역
섹션은 의미를 가지는 구역 섹션과 div 를 비교하면 어떠한 구역을 설정하는 것은 똑같다.
article 을 포함하면 독립성을 포함하는 컨텐츠다
article << section << div 느낌이다.
'Front' 카테고리의 다른 글
| 프론트엔드 6일차 (0) | 2021.04.19 |
|---|---|
| 프론트엔드 4일차 (0) | 2021.04.16 |
| 프론트엔드 3일차 (0) | 2021.04.14 |
| HTML , CSS , JAVA Script 개요 (0) | 2021.04.12 |
