chapter1 html
기본 문법
<!DOCTYPE html>>
<html lang="ko">
<head>
<title>문서 제목</title>
</head>
<body>
문서의 내용 수정하게 괸면
</body>
</html>콘테츠를 가지는(열리고, 닫히는 태그) /가지지않는 태크 (단일 태크)
<div title = "제목">하하<div/>
title 속성
"제목" : 값
하하 : 콘텐츠
html 기본 문서
1.문서 버전<!DOCTYPE html>
2. html 문서 시작 선언 및 문서 기본 언어 설정 <html lang="ko">
3. 문서에 필요한 정보가 기입되는 곳 <head>
4. 문서 제목 <title>
5. 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳 <body>
들여쓰기 중요! 부모요소 자식요소
올바른 코드의 깊이 (depth라고도 함)뎁스
실습
<!DOCTYPE html>>
<html lang="ko">
<head>
<title>문서 제목</title>
</head>
<body>
문서의 내용 수정하게 괸면
</body>
</html>
chapter2 <head>
사람 눈에 보이지 않는 "문서의 정보"가 담기는 영역
정보 종류
1. 타이틀
2. 메타데이터 (인코딩 정보, 문서 설명, 문서 작성자)
인코딩 : charset은 문서에서 허용하는 문자의 집합 utf-8
3. css,javascript
section2
style 꾸미기
link 단일태크 <rel(이름),href(경로)> : 파일을 별도로 분리 가능( ex) style시트
script (콘텐츠 방식, 링크 방식)
chapter3 Body
<body> 사람누엥 실제로 보이는 컨텐츠 내용
1. block (블록 레벨 요소)
레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉차는 요소
페이지의 구조적 요소
ex) <div, article,section
2. inline (인라인 레벨 요소)
블록 요소 내에 포함되는 요소
ex) span, a, strong
3.inline-block
글자처럼 취급되나 ,block태크의 성절을 가지는 요소
css로 성질을 바꾼 것이기 떄문에 의미상 인라인 레벨요소다.
chapter4 레이아웃
콘텐츠 분할 요소 div : 구역을 나누기위한 캐그
header : 주요 정보를 담는 태그
footer : 부차적인 정보를 담는 태그
main : 주요 콘텐츠를 담는 태그
section : 콘텐츠의 구역을 나누는 태그
article : 독립적 문서를 제공 (블로그, 포스트,뉴스기사)
aside : 문서의 주요 내용에 간접적인 정보를 전달하는 태그
레이아웃 태그를 알아야하는 이유
html5부터 태그를 의미있게 사용하기 위해 시멘틱 태그르 사용하여 문서 구조를 작성
단순히 의미 구분자인 div를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보롸 구조를 의미 있게 전달
시멘틱 하게 마크업을 함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩속드를 높인다.
※절대경로와 상대경로
절대 경로 : 최상위 폴더부터 파일까지 모든 경로를 나타낸 표기법
상대 경로 : 현재 파일(문서)의 위치를 기준으로 상대적인 경로
/ : 최상위 폴더
./ : 현재 폴더
../ : 현재 파일 위치의 상위폴더
절대경로는 사이트 웹사이트 URL과 같이 현재 문서와 상관 없이 변하지 않는 경로를 나타내야 할 때 사용할 수 있고
상대경로는 현재 문서와 함께 있는 파일을 연결하거나 현재 문서를 기준으로 상대적으로 파일의 경로를 찾아가야 할 때 사용할 수 있어요.
일반적으로 개발을 할 땐 상대경로를 사용
'언어 > Frontend' 카테고리의 다른 글
| [반응형 웹] html, css (0) | 2023.02.23 |
|---|---|
| [CSS]꾸미기, 박스 모델, 표시 유형과 레이아웃, 주의 사항 (0) | 2023.02.22 |
| [CSS]선택자, 상속과 초기화, 결합자, 우선순위, 단위 (0) | 2023.02.22 |
| [chapter 5 콘텐츠]멀티미디어, 리스트, 표, 아이프레임, 양식태그, html 주의사항 (0) | 2023.02.22 |
| Intro( html/css/js) visual studio 기본 설정 (0) | 2023.02.22 |
