html의 기본 구성 요소

태그

구성요소를 정의하는 역할 (<>)

• 문법을 이루는 가장 작은 단위

속성

태그의 의미나 기능을 보충해주는 역할 (옵션)
속성명/속성값

문법

태그 + 속성
요소(elements) = open tag + contents + close tag

콘텐츠가 없는 문법은 시작 태그만 사용

<br>
<!-- br 태그이면서 br 요소 -->

html의 기본 구조

DTD(Document Type Definition)
html : 문서의 시작과 끝

head : 메타 데이터 정의(문서에 대한 정보)

meta : 문자 집합을 정의
title : 문서의 제목 (중복X)
body:웹 브라우저에 노출되는 내용

html의 특징

블록 요소 & 인라인 요소

블록 요소 : 공간 유무에 상관없이 줄바꿈 되는 태그 (div, p)
인라인 요소 : 공간이 부족할 때만 줄 바꿈 되는 태그 (a, span)

부모, 자식, 형제 관계

상위태그는 부모, 하위태그는 자식

줄바꿈과 들여쓰기

가독성을 위해 필요

텍스트 작성하기

h 태그_n

제목이나 주제를 나타냄 (1~6까지의 중요도)

빈 숫자 뒤부터는 검색 엔진에 검색이 안되기 때문에
1~6을 차례대로 사용해야 함

p 태그_n

본문의 문단을 작성할 때 사용
쓰는대로 보여지지 않음, p 태그 안에서 br 태그를 안 쓰면 줄바꿈이 적용 안됨

br 태그

줄바꿈 태그

blockquote 태그_r, n

문단 단위의 인용문

	<!-- 출처가 확실하면 cite 속성을 이용-->
	<blockquote cite = www.naver.com>
        <p> 문단 단위의 인용문</p>
     </blockquote>

q 태그_r

짧은 인용문, " " 로 감싸짐

<q cite = www.goole.com> <p>짧은 인용문</p> </q>

ins & del 태그

각각 밑줄과 취소선

sub & sup 태그

아래 첨자, 윗 첨자

그룹 짓기

div 태그_g

인라인 요소와 블록 요소를 그룹으로 묶어줌

span 태그_g

인라인 요소를 그룹으로 묶어줌

인라인 요소
| 요소 | 요소 | 요소 |

블록 요소
요소
―――
요소
―――
요소

목록 만들기

ul 태그

비순서형 목록

ol 태그

순서형 목록

li 태그

목록 내용

dl 태그

정의형 목록

dt & dd 태그

용어 및 설명

링크와 이미지 넣기

a 태그

링크 생성
href 속성 : 하이퍼링크 구현
(경로가 불분명할 시 #)
target 속성 : 대상이 연결되는 방식 (_blank 多, _parent, _self, _top), 생략 가능
title 속성 : 링크를 설명할 수 있는 텍스트를 작성, 생략 가능

img 태그

이미지 삽입시 사용
src 속성 : 이미지 경로 (./ 현재 폴더 (생략 가능), ../ 상위 폴더)
alt 속성 : 이미지 설명
a 태그로 감싸면 이미지에 링크를 걸수도 있음

텍스트 강조하기

strong 태그

Bold체

em 태그

기울임체

(구) b, i 태그

폼 구성하기

form 태그

폼 양식 생성 (클라이언트한테서 정보를 입력받고 서버로 전송하기 위한 양식)
action 속성 : 입력받을 값들을 전송할 서버의 url 주소 (#, 서버 영역을 담당하는 개발자가 적음)
method 속성 : 입력받은 값을 서버에 전송할 때 송신 방식 (보안이 요구되면 post, 아니면 get)

input 태그

입력받는 요소 생성
type 속성 (필수), 속성값 : submit, reset, button 등등 (p.84 참고)
name 속성 : 입력 요소의 이름을 작성
value 속성 : 입력 요소의 초기값

label 태그

form 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용

+ 시각적인 도움이 필요하신 분들의 보조도구인 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별함

암묵적인 사용 : label 태그에 상호작용 요소를 포함함
명시적인 사용 : label 태그의 for 속성값 = 상호작용 요소의 id 속성깂 (p.86~87)

fieldset & legend 태그_g

form 태그 안에 사용된 상호작용 요소를 그룹 지음
그룹별로 박스 모양의 테두리 생성

textarea 태그

여러 줄의 입력 요소를 생성할 때 사용 (input 태그 대신)

select, option, optgroup 태그

각각 콤보박스 생성, 콤보박스의 항목 추가, 항목의 그룹화
size 속성 : 콤보박스에서 화면에 노출될 항목 갯수 (기본 1개)
multiple 속성 : 여러 속성을 함께 누를 수 있게 됨
selected 속성 : 기본 선택 항목 지정

button 태그

input 태그에서 type 속성값을 submit, reset, button으로 지정한 생성
or 별도의 button 태그로 생성할 수도 있습니다.

폼 관련 태그에서 사용할 수 있는 추가 속성

disabled 속성 : 비활성화 (input, textarea, select, button 태그)
readonly 속성 : 읽기 전용
-->  disabled는 서버에 값을 전송할 때 값 전송 안됨, readonly는 값이 전송됨
maxlength 속성 : 입력 글자수 제한 (input이나  textarea 태그)
checked 속성 : 요소를 선택한 상태로 표시 (input 태그의 type 속성값이 checkbox나 radio 요소)
placeholder 속성 : 입력 요소에 넣을 값에 대한 힌트

표 만들기

summary 속성은 사라짐

table 태그

표 생성

caption 태그

표 제목 지정

tr 태그

행 생성

th, td 태그

열 생성 (제목 열, 데이터 열)

rowspan, colspan 속성

행과 행을 병합할 때는 rowspan 속성
열과 열을 병합할 때는 colspan 속성 사용

thead, tfoot, tbody 태그

표에서 행을 그룹화하는 태그 (웹 접근성 올려줌)
thead 태그 : 헤더 영역에 해당하는 행
tfoot 태그 : 푸터 영역에 해당하는 행
tbody 태그 : 본문 영역에 해당하는 행

!반드시 thead, tfoot, tbody순!

col과 colgroup 태그

표에서 열을 그룹화하는 태그
col 태그 : 하나의 열을 그룹화
colgroup 태그 : span 속성과 함께 사용해 2개 이상의 열을 그룹화

scope 속성

표 생성시 사용할 수 있는 속성 중 웹 접근성 향상을 목적으로 사용

멀티미디어 설정하기

audio, video 태그

각각 오디오 파일, 비디오 파일 삽입
controls 속성 : 컨트롤 패널

지원 파일 포맷 & 미디어 타입 p.109, 111

source 태그

audio, video 태그 사이에서 리소스(파일)의 경로와 미디어 타입을 명시 (필수는 아니지만,, 형식 지원을 하지 않을 경우, 웹 접근성을 고려해 등록하는 것이 좋음)

웹 페이지 구조를 설계하는 시맨틱 태그

의미가 있는 태그

header 태그

웹페이지의 헤더 영역

nav 태그

웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역

section 태그

웹 페이지에서 논리적으로 관련 있는 내용 영역

table, form, a 태그 등등 : 시맨틱 태그
div, span 태그 등등 : 논시맨틱 태그

article 태그

웹 페이지에서 독립적인 영역을 구분

aside 태그

웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article 태그나
section 태그로 영역을 구분할 수 없을 때 사용

footer 태그

웹 페이지에서 푸터 영역을 구분

main 태그

웹 페이지의 주요 내용을 지정할 때 사용하는 태그

태그 종류에 상관없이 사용하는 글로벌 속성

class 속성

요소에 클래스명을 지정할 때 사용
CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있음

id 속성

요소에 아이디를 지정할 때 사용

style 속성

CSS 코드를 인라인으로 작성할 때 사용

title 속성

요소에 추가 정보를 넣을 때 사용되는데, 마우스를 올리면 툴팁으로 표시

CSS

문법과 주석

선택자 (html 태그를 선택) + 선언부 (스타일 작성)

/* h1은 선택자, {}는 선언부 */
h1 {
	color : red
    }

css 적용

내부 스타일 적용

<style>
	css 코드
</style>

html의 style 태그 안에 css 작성
보통 head 태그 안에 사용
사전에 css 불러오기 가능, but 문서 해석시 매번 다시 읽음

외부 스타일 적용 多

css파일을 만들어 html 파일에 연결하는 방식

<link rel="stylesheet" href="css 파일 경로">

인라인 스타일 이용하기 (거의 사용 X)

html 태그 속 style 태그에서 css 코드를 직접 작성, 선택자 부분 X

확장 프로그램
Auto Rename Tag : 태그 추천 및 자동완성
Prettier : 자동 줄바꿈, 들여쓰기

연습 문제

2장
1.html 문법을 이루는 가장 작은 단위는?
태그
2.html의 기본 요소가 아닌 것은?
5번 p

3장
1. hn 태그를 올바르게 사용한 예시는
-> 1번 h1, 3, 4 태그만 사용, 4번 h1 태그만 사용
2. div태그는 인라인 요소와 블록 요소를 그룹 짓는 데 사용하고, span 태그는 인라인 요소를 그룹 짓는데 사용합니다.
3. 목록을 생성할 수 있는 ol, ul, dl 태그가 있음
순서가 필요하면 ol, 필요없으면 ul, 정의형 목록은 dl 태그, 용어의 제목은 dt, 설명은 dd.
4. <a href= _"www.naver.com"_ blank>
<img _src = "./naver_logo.png" _alt_="네이버 로고"></a>
5. 잘못 짝지어진 것은?
-> 2번 input는 한 줄 입력 + 버튼 등등 여러가지 요소 가능
6. 태그와 설명이 올바르게 짝지어진 것은?
-> 2번 caption - 표의 제목을 지정하는 데 사용
7. 시맨틱 태그를 모두 고르시오
-> header, footer 태그

4장
1. 다음 중 설명이 올바르지 않은 것은?
2번 인라인 스타일 방법은 별도의 css 파일이 필요합니다. -> 외부 스타일 시트 사용에 대한 설명임