HTML BASIC
1. 블록과 인라인
1) Block
: "최대 가로 너비" 사용하는 요소 (FOR 레이아웃)
ex)div, h1, p
- 기본 크기: width:auto->100%, height:auto->0에서 시작해서 내용 포함하는 만큼;
- 가로, 세로 크기를 수정할 수 있음
- "수직"으로 쌓임
<body>
<div>안녕하세요!</div>
<div>안녕하세요!</div>
<div>안녕하세요!</div>
</body>안녕하세요!
안녕하세요!
안녕하세요!
- margin, padding의 위, 아래, 좌, 우 사용 가능
2) Inline
: "필요한 만큼의 너비"만을 사용하는 요소 (FOR TEXT)
ex) span, img
- 기본 크기: width:0, height:0;
- 가로, 세로 크기 수정할 수 없음
- "수직"으로 쌓임
<body>
<span>안녕하세요!</span>
<span>안녕하세요!</span>
<span>안녕하세요!</span>
</body>안녕하세요! 안녕하세요! 안녕하세요!
- margin, padding의 위, 아래 사용 불가 (ONLY 좌, 우)
+) DISPLAY 속성
: Inline요소와 Block요소를 각각 다른 요소로 작용할 수 있도록 돕는 속성
span{
//Inline 요소를 Block처럼 작용
display: block;
}
div{
//Block 요소를 Inline요소처럼 작용
display: inline;
}2. 기본 구조
1. HTML 태그
: 문서의 처음과 끝을 show
PLUS) 느낌표 + tab => 자동으로 기본 서식 보여줌
<!DOCTYPE html>
// 이 이하의 범위는 html5로 해석할 것
<html lang="ko">
<head></head>
<body></body>
</html>i) HEAD
: 문서의 '정보' 부분
- 문서의 제목 : title 태그
- 기타 정보
- 스타일 직접 입력 or 외부에서 연결
ii) BODY
: 문서의 '구조' 부분
2. 메타데이터
1) META 태그
: HEAD 부위의 주요 태그로, title을 제외한 모든 기타 정보를 나타내는 빈 태그
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
- 닫히는 태그 없음
- 속성 필수
- main으로 두고 공부할 필요는 없음
i) charset
: 문자가 인코딩되는 방법을 명시하므로, title태그보다 위에 주로 작성
ex) UTF-8, EUC-KR(깨지는 형상)
ii) http-equiv
iii) name
iv) content
<head>
<meta charset="UTF-8">
<meta name="author" content="zoom-in">
<meta name="description" content="zoom-in의 우당탕탕 기록지">
</head>2) LINK 태그
: 외부의 파일을 가져올 때 필수 사용 (CSS)
i) rel 속성
: relationship 약자 > 외부 문서와 현 문서와 관계 지정
ii) href 속성
: 파일 위치 호출
<head>
<link rel="stylesheet" href="./css/main.css">
</head>3) STYLE 태그
: CSS 내용
-> body 태그 안에 작성할 수도 있긴 하지만, 효율적이지 X
-> type은 생략 가능
i) media 속성
: 미디어 쿼리
ii) MIME Type
: 가져온 문서의 타입에 대해 나타내는 방식 (중요한 내용은 X)
ex) text/html, audio/mpeg, image/jpeg
<style type="text/css">
div{ 내용 }
</style>4) BASE 태그
: 경로를 축소해 표현하고 싶을 때 사용 (once in file)
-> link에 경로 작성한 것보다 위에 작성 (잘 사용하지는 X)
<head>
<base href-"./css/">
<link rel="stylesheet" href="main.css">
</head>3. 콘텐츠 구분
1) HEADER 태그
: 상단바와 같은 부분 (로고, 명칭, 메뉴, 검색 바 등)
- header 태그 안에 다시 등장할 수는 없음
https://developer.mozilla.org/ko/docs/Web/HTML/Element/header
2) FOOTER 태그
: 하단바와 같은 부분 (작성자, 저작권, 주소, 연락처 등)
- header 태그 안에 다시 등장할 수는 없음
3) H1~H6 태그
: 6단계의 문서 제목을 정리 -> 중요성대로 목차 가능 (h1이 제일 큼)
- 중요: 정보의 중요성을 내포하는 태그이기 때문에 단순히 폰트 크기를 바꾸려는 용도로 사용하면 안됨
- h1은 최대한 적게 (1 per pg)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements
4) MAIN
: 문서 내부의 핵심적 PART 나타냄 (1 per 문서)
5) ARTICLE
: '독립적'으로 구분되거나 '재사용' 가능한 영역
주로 h1~h6 태그로 실현 (애매한 것 같으면 다른 태그로 대체 사용)
ex) 기사, 블로그
6) SECTION
: 일반적인 영역 묶는 것
문서의 type에 따라 section 안에 article이 있거나 반대일 수 있음
7) ASIDE
: 별도 콘텐츠 (광고
8) NAV
: 다른 페이지의 링크를 제공하는 영역 (안에 li 들로 여러 개 묶으며 실현)
ex) 메뉴, 목차 등
9) ADDRESS
: 연락처, 주소 등의 정보 묶음을 제공할 때 쓰는 영역
10) DIV
: 별 의미 없는 영역으로, 어떤 거에도 막 갖다 쓸 수 있음
4. 문자 콘텐츠
1) OL, UL, LI
: 정렬된 목록(ol) 또는 정렬되지 않은 목록(ul) 속 각 항목들(li)
i) OL 안의 LI
: 정렬된 목록 (1. 2. 3. )
-> 순서가 중요도를 의미할 수 있음
- type 속성으로 list명 변경 가능 (1, a, A, I 등)
ii) UL 안의 LI
: 정렬되지 않은 목록 ( o o o)
-> 더 많이 사용됨
2) DL, DT, DD
: 쌍(dl) of 용어(dt)와 정의(dd) == key:value
- 스타일링이 까다로움 (DIV 태그 불가)
- ul 이나 ol 사용으로 '대체' 가능 for 스타일링
<dl>
<dt>COFFEE</dt>
<dd>원두와 물</dd>
<dt>LATTEE</dt>
<dd>원두와 우유</dd>
</dl>
3) P, HR
i) p 태그
: 하나의 문단을 설정 - "시각적"으로 문단이 나뉘는 것에 중심
ii) hr 태그
: 의미상 필요성을 위해 문단을 '분리' - "의미적"인 관점
4) PRE
: 문자의 서식을 그대로 출력
ex) pre 영역 안에 있으면, 띄어쓰기가 100개여도 그대로 출력되는 것
5) BLOCKQUOTE
: 인용문 설정하는 영역
<blockquote cite="http://어쩌고">
인용문
</blockquote>5. 인라인 텍스트
1) A 태그
: 현재 문서에서 다른 곳으로 나갈 때를 위해 하이퍼링크 설정
- 같은 문서 안에서 특저 위치로 움직일 수도 있음 (예시의 # 부분 확인)
i) href 속성
링크 URL 연결 (거의 필수)
ii) target 속성
링크 URL의 표시 위치 (브라우저의 탭 상에서)
iii) rel 속성
문서들 간의 관계
iv) 추가 속성
: download, type, etc
<a href="http://www.google.co.kr" target="_blank">Google</a>
<ul>
<li><a href="#title1">제목 1</a></li>
<li><a href="#title2">제목 2</a></li>
</ul>
<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>2) SPAN 태그
: 별 의미 없는 태그 (div와 유사, 근데 inline인)
텍스트 일부의 굵기, 크기, 색상 변경할 때 사용가능
3) CODE
: 코드가 들어갈 때, 문서를 바꾸려는 게 아니라 문서의 내용 중 일부임을 명시
<code>document.getElementById('id-value')</code>는 코드의 일부이다.4) BR
: 줄바꿈 하는 태그 - 닫는 태그 필요없음
줄 간에 br 여러개 쓰지 말고 css로 줄 간 간격 높이기 (전체 p로 묶은 다음)
p{
line-height=50px;
}5) ABBR 태그
: 약어 지정하는 태그
- 전역 변수 -> 커서 위에 올려두면 풀네임 보임
<abbr title="HyperTextMarkup Language">HTML</abbr>6) DFN
: 용어 정의할 때 쓰는 태그
(유사: dl, dt, dd)
<dfn id="def-internet">Internet</def>
7) CITE
: 창작물에 대한 참조 (책, 영화, 논문 등의 제목)
8) Q
: 짧은 인용문 (긴 경우 blockquote)
9) KBD
: keyboard의 약어로, 키보드에의 입력임을 나타냄
-> 비주얼적으로 키보드 버튼처럼 보여짐
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd>10) SUP, SUB
: 각각 위 첨자, 아래 첨자
11) 서식
i) B
: 문체가 다른 글자의 범위 설정으로, 보통 굵게 표시 (별 의미X)
ii) MARK
: 관심있는 부분에 하이라이팅 표시 (의미보다는 시각)
iii) EM
: 기울림체 표시로 단순 의미 강조 (Emphasis)
중첩가능하며, 중첩될수록 강조 의미가 강함
iv) STRONG
: 의미의 중요성을 나타내기 위해 굵게 표시 (b와 같은 출력이지만 의미가 다름)
v) I
: 위의 태그로 표현하긴 애매하고, 암튼 다른 글자랑 구분하기 위해 사용 (아이콘, 기호)
vi) U
: 밑줄 사용 -> 의미 없어서 그냥 css로 대체 가능
<span style="text-decoration: underline;">
으로 주로 대체함vii) TIME
: 시간 관련 -> 거의 사용 안함
12) DEL, INS
: 삭제, 수정된 정보와 관련
i) del
: 삭제된 텍스트의 범위 지정 (있었지만 삭제한 정보) -> 중간선
ii) ins
: 새로 추가된 텍스트의 범위 지정 (새로 추가된 정보) -> 언더바
