1. HTML의 기본 구조
<html>
<head>
<meta> // 웹브라우저에는 보이지 않지만 웹문서와 관련된 정보를 지정할 때 사용. 한글로된 내용을 표시할 때는 UTF-8이라는 문자 세트를 사용한다고 웹브라우저에 알려주어야 한다. <meta charset="UTF-8"> 하지 않으면 한글이 깨질수도 있다.
<title>웹문서의 제목 입력</title> // 웹 브라우저 제목 표시줄에 표시
</head>
<body> // 실제 웹 브라우저 화면에서 보여주는 내용 작성
<header></header>
<main></main>
<footer></footer>
</body>
</html>
2. 이외 개념
1) HTML 기본구조 자동입력하기 : 첫 줄에 ! 입력 후, Tab 또는 Enter, 입력 후 lang="en"을 lang="ko"로 변경
2) 웹 문서의 영역 : 헤더, 메인, 푸터, 사이드바
3) 경로 입력 시, 절대경로, 상대경로 구분 유의
절대경로 : 속성값이 항상 같은 경로 ex) https://naver.com
상대경로 : 현재 작성하는 문서의 위치를 기준으로 함. 문서의 위치에 따라 바뀜. ex) ./sub/sub2.html, ../index.html
※ 경로 표기법
/ : 최상위 경로
./ : 현재 폴더 위치
../ : 상위 폴더 위치
4) 코딩의 대전제 : 2개 이상의 요소는 하나로 묶는다. 단일이어도 특정 스타일을 적용할 경우도 div로 묶는다.
텍스트 요소는 별 의미없이 묶을 땐 <span>을 사용. <strong>강조 <em> 특별한 의미일 경우 묶는다.
5) 태그 구분 block, inline-block, inline
block : h1~h6, p, adress, ol, ul, li, dl, table(테이블로 따로 분류되기도 함), form, fieldset, div, header, section, footer, nav, article, aside
inline-block : <img>(홑태그), <input>(홑태그), textarea, select
inline (text) : a, em, strong, mark, b, small, sub, sup, label, span,
table : table (블럭같이 행동함)
6) 부모 자식 상속 관계와 예외
- 부모가 블럭이면 누구든 자식으로 받을 수 있다.
- 부모가 인라인이면 인라인만 자식으로 받을 수 있다.
- 단, 몇몇 블럭은 자식으로 블럭을 둘 수 없다. 아래와 같이 주로 텍스트 위주로 사용되는 태그들이 그렇다.
<h1>~<h6>, <p>, <address>, <dt>
댓글