0. 강의 내용
- HTML 기본 내용
1. HTML(Hyper-Text-Markup-Language)
- 웹 브라우저가 이해할 수 있는 언어.1) tag의 구분
tag 구분은 크게 두 가지로 나눌 수 있다.
- Contents를 가지는 tag : "<div>Contents</div>"
- Contents를 가지지 않는 tag : "<br />". 여기서 "/>"은 self closing이라고 부른다.
2) 속성과 값
ex) <div id = "1234"> 에서 id는 속성, "1234"는 값이다. attribute = "value"
3) 들여 쓰기
들여 쓰기로 부모-자식 태그를 구분해야 한다. 비록, 웹 브라우저는 들여쓰기를 굳이 구분하지 않지만, 인간이 쉽게 이해하기 위해서 필요하다.
<!-- 좋은 예 -->
<body>
<div>
Contents
</div>
</body>
<!-- 나쁜 예 -->
<body>
<div>
Contents
</div>
</body>4) 주석 처리
<!-- --> 으로 주석 처리를 한다.
예)
<!-- 주석 내용 -->5) 기본 tag
- head :
문서의 정보를 저장하는 tag이다.
- title : 문서의 제목을 입력하는 tag.
- meta : 문서의 정보를 저장하는 tag. ex) "charset(인코딩 방식)="utf-8" ", "name(저자 이름 or 문서 종류)="이름" ".
- style : html tag의 style을 정의하는 tag.
body { color : blue; } - link : 외부 .css파일을 링킹하는 tag.
ex)<link rel="stylesheet" href="style.css" /> - script :
- Contents 방식 : <script> const hello = "world"; console.log(hello); </script>
- 링킹 방식 : <script src="script.js"></script>
- body : 실제로 보이는 Contents를 정의하는 영역.
요소 별 레벨 block inline inline-block 블록 블록 내부(문장, 단어 ..) 글자이지만, block tag의 성질을 갖음. 크기 조절 O 크기 조절 X 크기 조절 O 좌우 여백 조절 O 좌우 여백 조절 O 좌우 여백 조절 O blcok을 자식 요소로 X blcok을 자식 요소로 X <div> <span>
6) layout tag
layout 태그를 사용하는 이유 : Semantic(의미있는) markup 문서를 사용함으로써, 검색 엔진, 짜임새있는 구조 등의 이점을 얻을 수 있다.- div : 흔히 사용되는 layout tag. 단순히 구역 나누기를 위한 tag.
- header : 글 제목, 작성자, 작성일 등의 주요 정보를 담는 tag.
- footer : 페이지의 맨 바닥의 내용. 저작권, 연락처 등의 부가적인 내용을 담는 tag.
- main : 페이지의 주요 컨텐츠를 담는 태그. 사이트 제목, 주요 메뉴 등. 한 페이지 당 무조건 한 번만 사용함.
- section : 콘텐츠의 구역을 나누는 태그.
- article : section 태그 내의, 작성된 정보를 전달하기 위한 독립적인 태그.
- aside : 문서의 부가적인 내용을 전달하는 tag. 예) 오늘 본 상품, 참고 사이트, 사용자 프로필 등
7) Contents 태그
- h1 ~ h6 : 제목. 순서 어긋나는 것은 지양함.
- p : 문단 구분.
- b, strong : 글씨의 두께 조절. b는 굵기만, strong은 강조까지.
- i, em : 글씨의 기울기 조절. i는 문단의 내용이 구분되어야 하는 경우, em은 강조까지.
- u : 글씨에 밑줄을 넣고, 주석을 가지는 단어. 단순 밑줄용은 span 태그를 이용.
- s, del : 글씨에 취소선 추가. s는 단순한 취소선, del은 글자가 제거되었다는 의미까지이며, ins와 함께 사용하여 수정된 글씨를 추가할 수 있음.
- a : anchor의 역할. href 특성을 다른 페이지로 이동 시에 사용. target 특성.
- img : 문서 내에 이미지를 넣는 태그. alt 특성을 이용하여 이미지가 나타나지 않을 때, 텍스트로 대체함.
- figure, figcaption : 하나의 독립적인 콘텐츠로 만듦. 이미지, 비디오, 오디오 등을 넣고 이에 대한 설명을 작성함.
- video : 문서 내에 비디오를 추가하는 태그. src 특성 이용 or 태그 내에 source 태그 사용.
- audio : 문서 내에 오디오를 추가하는 태그. src 특성 이용 or 태그 내에 source 태그 사용.
- svg(Scalable Vector Graphics) : 일반 이미지(래터스 이미지)와 달리 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않음. ex) pdf파일, 작은 로고 등
8) List tag
- ul, li : 순서 x. ul은 무조건 li만 자식 태그로 가짐.
- ol, li : 순서 o. ol은 무조건 li만 자식 태그로 가짐.
- dl, dt, dd : 설명 목록 태그, dt 태그에 단어, dd 태그에 설명. dl은 전체 감싸기.단어1단어1에 대한 설명단어2단어2에 대한 설명
9) table tag
- table : tr 태그로 행을 구분, td 태그로 열을 생성. td에서 colsapn 특성을 이용하여 셀(열)을 병합할 수도 있음.
- th : 열의 제목을 나타내는 태그. 글자 bold, 가운데 정렬.
- thead : 제목 그룹 태그. 내부에 tr로 묶어진 th 태그들을 갖고 있음. 테이블 내 한 번만 사용. layout용.
- tbody : 표 본문 요소 태그. 내부에 tr로 묶어진 td 태그들을 갖고 있음. 테이블 내 한 번만 사용. layout용.
- tfoot : 표 바닥글 요소 태그.
- caption : 표 설명 태그.
10) iframe tag
- iframe : 현재 문서 안에 외부 문서를 불러올 수 있는 태그. src 속성에 html문서 or URL 주소를 넣을 수 있다. 보안 등의 이슈로 사용 시 주의.
- name 속성을 입력한 후, a 링크에서 해당 name을 target으로 잡아줄 시, 버튼을 클릭하면 해당 iframe이 a 링크의 href로 iframe이 변경됨.
11) 양식 tag
- form : 정보를 제출하기 위한 태그.
- 정보 입력 및 선택 : input, selectbox, textarea
- 정보 제출 : button
- 정보 제출 시 페이지 이동 : action
- 정보 제출 처리 방식 : method
- label : 설명을 작성할 수 있는 태그. label 태그 안에 input, textarea, selectbox 등의 태그가 오며, 해당 label을 클릭 시 포커스가 위 태그들로 이동함.
혹은 태그의 id를 for 특성으로 지정하여 해당 label 클릭 시 해당 id의 태그로 포커싱시킬 수 있음. - input : 사용자에게 데이터를 입력 받는 태그.
- type 속성에 따라 데이터 유형이 다름. cheackbox, radio, file, button, hidden
- name 속성으로 고유의 input으로 지정 가능.
- value 속성으로 기본 입력 값 지정 가능.
- select : option 정의 태그.
- textarea : 여러 줄을 입력할 수 있는 태그. cols, rows 속성으로 박스 크기 지정 가능.
- input, select, textarea의 속성 : readonly(수정x), required(필수 입력), placeholder(부가 설명, select는 사용x), disabled(요소 비활성화, 제출이 안됨)
- button : 클릭 가능한 버튼.
- reset type : form 내에 입력한 모든 양식 초기화
- submit type : default type으로, form 내에 모든 입력값 제출.
- button 태그 내 contents에 입력 가능하지만 block 레벨 태그는 사용 X.
<!-- button 클릭 시, input과 option 값을 action의 주소로 get 방식으로 제출하겠다. -->
<form action="second.html" method="get">
<input name="id" type="text">
<input name="password" type="password">
<select name="opt">
<option>옵션1</option>
<option>옵션2</option>
<option>옵션3</option>
</select>
<!-- 전송 시 action 주소 뒤에 "?전송내용"이 붙음. -->
<button type="submit">전송</button>
</form>
<!-- get으로 전송 완료 시) 도메인이 URL주소?id=xxx&password=xxx&opt=옵션x 로 변경됨. ex)검색 엔진 -->
<!-- post으로 전송 완료 시) 도메인 변경 x. 개발자 도구에서 payload에서 전송 값을 확인 가능. ex)로그인 -->12) 주의 사항
- Markup 언어는 소문자로 통일한다.
- 닫는 태그(</tag>)를 생략하지 않는다.
- contents를 제외한 나머지 내용은 영어로 작성한다.
- tag들의 id값을 중복시키지 않는다. (고유한 id)
- 태그 중첩 시, 태그 간의 순서를 유의한다.
- 들여 쓰기를 잘 유지한다.
- 태그 중첩 시, 같은 의미를 갖는 태그를 중복하지 않는다. 의미X.
- a 태그 사용 시, a 태그 내에 버튼 태그를 넣지 않는다. 클릭 시 -> href 링크 이동 + 버튼 클릭 으로 되어 의미가 중첩됨.
천천히, 그리고 꾸준히.