[패캠 네카라쿠배 2기 도전] 4.HTML/ 개요, 요소 - 주요범위, 메타데이터
1. 블록 레벨과 인라인 요소
1)블록 요소
(1)div, h1, p
(2)특성: 사용 가능한 최대 가로 너비를 사용한다
=> 가로 사이즈를 정하지 않아도 100%로 나온다/ 단, 높이는 지정해야 나온다
=> 나오는 여백은 body태그의 margin, padding에 있는 것(초기화하면 된다)
(3)크기를 지정할 수 있다
: 가로, 세로 지정 가능
(4) width: 100%, height: 0; 로 시작 (둘다 auto로 들어가있지만 구현이 100%,0으로)
2)인라인 요소
(1)span, img
(2)특성: 필요한 만큼의 너비만 사용한다
=> 태그 안에 포함된 내용만큼만 너비가 생긴다
(3)크기를 지정할 수 없다
: 무조건 내용의 크기만큼만 있다
(4) width:0, height:0으로 시작(둘다 auto로 들어가있지만 구현이 0 ,0으로)
=> 태그 안 내용만큼 높이로 사용
3) display: block
블록 요소로 바꾼다
display: inline
인라인 요소로 바꾼다
2. html 태그 : 주요 범위, 메타데이터
1) <html> </html>
: 내용을 모두 이 안에 넣어야 html로 인식한다
속성
(1) lang : 어떤 언어를 쓸지 설정할 수 있다
ex. <html lang = "en">
ex. <html lang = "ko">
ISO 639-1코드 찾아보면 된다
(2)tab 또는 스페이스 4번
2)문서의 범위를 나누는 태그
(1)<head>: 문서의 정보
- <title>: html문서의 제목 (탭에 노출)
- <meta>: 기타 정보
빈 태그 : 닫히는 태그가 없는, <meta/>로 써도 되지만 한가지 방법으로 통일하기
속성이 있어야 기능
ex. name, content, charset
ex. charset = "UTF-8"(인코딩 방식 설정, 조합형) : 인코딩이므로 head에서 가장 위에 있어야 함(title보다도 위)
"EUC-KR"(완성형) - 완성된 조합이 있어야 표현 가능, 그러므로 한글이 깨지는 경우도 있다
ex. content는 http-equiv 또는 name 속성의 값을 정할 때 사용
- http-equiv: 서버나 사용자의 환경을 변경하는 지시 사항
어떤 IE에 최적화할지 렌더링 방식 정하는
- name: 문서 레벨의 이름을 정의한다
ex. <meta name= "author" content = "박영웅">
<meta name = "description content= "박영웅의 사이트입니다!">
<meta http-equiv="X-UA-Compatible" content = "IE=edge"> => 최신의 IE에 최적화해서 렌더링하는 방법
<meta name="viewport" content="width=device-width, inital-scale=1.0">
=> viewport : 반응형 웹사이트를 제공하기 위해 사용(영역 제공)
content width=device-width는 기기의 가로너비에 최적화, initial-scale의 확대 축소
<meta property="og:title> => 다른 사이트에서 url 공유 시 보이는 title (open graph)
cf. meta tag mdn 쳐서 더 읽어보기 (지원하는 사이트 등, 예시 등)
(2)스타일 외부에서 가져와서 연결
<link rel = "stylesheet" href = "./main.css"(./ : (주변에서 찾는다)상대경로, 생략 가능>
- link : 현재 문서와 외부 리소스와의 관계 명시해서 가져옴/ 메타데이터 콘텐츠/ 빈태그
- 속성:
charset: 쓸 수 없음
href: 링크된 리소스의 url (절대경로/상대경로)
hreflang: 링크된 리소스의 언어, 순수히 조언
rel: 링크된 문서와 현재 문서의 관계 명명
(3) <style>
- body태그 안에서도 작성은 할 수 있지만 비효율적. 기본적으로 head에 작성하도록!
-메타데이터 컨텐트(정보를 나타내는 태그다), 허용된 컨텐트: type 속성의 언어와 일치하는 스타일(ㄷㅌ. text/css) 정보
-속성
type
: 스타일링 언어 정의
ex. type = "text/css"
- html5에서는 굳이 명시하지 않아도 된다.
- mime 타입: 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 (가져오는 문서의 타입을 명시해줘서 오류 방지)
ex. link로 가져올 때 type = "audio/ggg" 등등
cf. style tag mdn 읽어보기
(4) <base>
: 문서에 포함된 모든 상대 url의 기준 url을 나타낸다
- 경로 입력 시 ./는 상대적. 경로가 복잡하면 base 태그를 통해 상위 폴더를 정해놓을 수 있다
- base는 경로를 작성한 태그 위에 써야 한다 ex. title 아래
- <base href = "./css"> : 상대경로를 정할 수 있는 기준을 미리 정해놓는(상위폴더, 출발 폴더를 정해주는 것)
- 유의점: 한 파일에서 하나만 쓸 수 있고 이하 모든 경로에 영향을 미친다
ex. <img>
개발자도구 왼위 커서 클릭해서 해당 요소 위에 커서 - img src = url을 복사해서 open in new tab
new tab에 있는 url을 가져와서
<img src = "해당 url" alt = "대체할 텍스트">
이때 같은 상위 url에서 가져오는 거라면 그걸 <base href = "url">로 사용한뒤
body에서 필요한 곳에서 나머지 url을 써서 사용할 수 있다
3) html 버전 명시하는 태그
<!DOCTYPE html> : html5