[블록레벨 요소와 인라인 요소]
블록 요소: 사용 가능한 최대 가로 넓이 사용
크기를 지정할 수 있음
기본 크기는 width:100%; height:0;
수직으로 쌓임
margin, padding 상,하,좌,우 사용 가능함
레이아웃으로 사용
ex) DIV, H1, P
인라인 요소: 필요한 만큼의 너비만 사용(즉 안에 들어있는 내용만큼의 범위만 사용할 수 있음)
크기를 지정할 수 없음
width: 0; height: 0
수평으로 쌓임
margin, padding 상, 하 사용을 할 수 없음
ex)SPAN, IMG
text로 사용
[주요범위]
<html>: HTML 문서의 범위를 설정
lang을 이용하여 문서의 언어를 지정해주어야함
<head>: HTML 문서의 정보를 설정
HTML 문서의 제목, 기타 정보, 스타일 직접입력, 스타일 외부에서 가져와서 연결 등을 할 수 있음
<body>: HTML 문서의 구조를 설정
[메타데이터]
body에서 사용하는 데이터
<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정
<base />: HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정
한 문서에 하나의 <base /> 요소만 포함 가능
ex) <base href="./css/">
<link rel="stylesheet" href="./main.css">
밑에 예시와 비교해 보면 ./css/가 빠진걸 볼 수 있음. <base>를 이용해 상대 경로로 입력할 수 있는
특정 경로를 정해버리는 것
<link />: 외부 리소스의 연결 및 현재 문서와의 관계를 명시
ex) <link rel="stylesheet" href="./css/main.css">
<meta />: 기타 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정
ex) <meta charset="UTF-8"> UTF-8로 인코딩 하겠다는 뜻, head안에 최상단에 위치함
<meta name="description" content="묘사>
<meta name="viewport" content=width=device-width, initial-scale=1.0">
반응형 웹사이트를 만들기 위해 필요한 코드, viewport는 화면에 정보를 렌더링하기 위한 영역을 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge">
이 문서는 인터넷 익스플로러에서 렌더링 될때 최신의 익스플로러 화면에 출력
<style>: 스타일 정보(CSS)를 설정
HTML body tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'기초 > HTML l& CSS' 카테고리의 다른 글
| <6> HTML & CSS (0) | 2022.07.19 |
|---|---|
| <5> HTML & CSS (0) | 2022.07.14 |
| <3> HTML & CSS (0) | 2022.07.10 |
| <2> HTML & CSS (0) | 2022.07.07 |
| <1> HTML & CSS (0) | 2022.06.30 |
댓글