1. HTML 역사
2. HTTP (Hyper Text Tranfer Protocol)
| 클라이언트 | HTTP | 웹 서버 |
| 요청 메세지 - request 응답 메세지 - response |
||
3. VSCode extension
- live Server : 비쥬얼 스튜디오 코드 우측 아래 Go Live 클릭 시 live Server가 가상의 서버를 만들어서 (HTTP 통신으로) 파일을 오픈해줌. 파일을 연 것과는 달리 변경 내용을 바로 적용시켜줌(따로 새로고침 할 필요 없음)
단축키 : cmd + l + o
주소는 ip 주소와 port의 번호를 포함하여 만들어지며, 비쥬얼 스튜디오 코드 아래에 라이브 서버를 켜게되면, port번호가 노출되는데 이를 토글해주면 서버를 닫아줄 수 있다.
- Prettier : 저장하는 순간, 스타일을 ReFormatting (줄바꿈 등의 미리 설정해둔 설정이 자동으로 되어 가독성⬆️)
따로 설정을 해줘야하는 점
- Auto Rename Tag : 시작~끝 태그명을 변경할 때 자동으로 변경되는 기능
4. HTML (Hyper Text Markup Language)
1) 요소 Element
<Opening Tag> </Closing Tag> -> Use of Tag : 'Markup'
2) 빈 요소
내용이 없는(또는 필요 없는, 가질 수 없는) 요소, 속성만 소유
<br> <hr> <img> <input> <link> <meta> 등
<Closing Tag>는 필요 없고 <Opening Tag /> 형식으로 사용
인라인 요소
블록 요소
3) 요소의 속성
요소의 Content 외의 다른 정보를 정해줄 때
<img src="" alt=""/>
<input type=""/>
4) HTML 구조 설명
HTML5 문서는 <!DOCTYPE html> 으로 시작
<head> 와 <body>로 나눠지며, <head> 안에는 <body> 태그의 정보를 읽어 들이기 위한 정보가 존재한다
ex. 제목, 저장 방식, 브라우저 크기 등
<body>는 웹 브라우저에 출력되는 모든 요소들을 담는다
5) HTML 태그 정리
- <head>
- 메타 데이터를 포함하기 위한 태그
- 웹 페이지에 유일하게 존재
- HTML 문서의 title, style, link, script, meta 에 대한 데이터로 화면에 표시되지 않음
- <title> : HTML 문서의 제목
- <style> : HTML 문서의 style 정보 정의
- <link> : 외부 리소스와의 연결 정보 정의 - css
- <script> : javascript 연결
- <meta> : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보 -> 주로 브라우저 또는 검색 엔진에서 사용
- <meta charset="UTF-8">
- charset : 문자 인코딩에 대한 요약 정보를 나타내는 속성 (문자가 어떤 방식으로 인코딩 되었는지)
- 영문과 한글을 모두 사용하기 위해 UTF-8 사용
- 생략해도 무관하나 브라우저가 임의로 정하기 때문에 사용하고자 하는 문자가 깨질 가능성이 있어서 표기하는 것을 권장
- <meta http-equiv="X-UA-Compatible" content="IE=edge"> : 최신 버전의 IE 를 사용하라고 하는 태그
- http-equiv/content 해당 페이지에서 사용하는 HTTP 통신에 대한 정보
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 뷰포트를 기기 넓이에 맞추고 초기 배율을 1.0으로 설정해주는 것
- name/content 페이지의 정보
- name="author" 저자 / name="description" 설명 / name="keywords" 키워드/ name="viewport" 뷰포트
- content로 name의 정보를 추가
- <meta charset="UTF-8">
- body
6) Sematic Web
태그 자체로 컨텐츠에 대한 의미를 명확하게 설명할 수 있는 것
개발자가 의도한 요소의 의미가 명확하게 나타남
ex. <header> <footer> <img> <title>
특히 검색 엔진이 웹 페이지를 검색할 때 Sematic 요소를 검색
7) 제목 태그 <h1> ~ <h6>
자동 줄바꿈(block)
하나의 HTML 문서에는 하나의 h1 태그 권장
웹 검색 엔진이 제일 먼저 검색하는 태그
8) 문단 태그 <p>
본문을 적기 위한 태그
- 형식화(preformatted) 된 글자 <pre> 태그 : 나 <br> 사용 없이 에디터에 쓴 대로 웹에서도 보여줌
9) 문자 꾸미기 태그
<b> / <strong>
<i> / <em>
<del>
<u>
10) 줄 바꿈 태그 <br>
11) 수평줄 태그 <hr>
12) 이미지 태그 <img>
<img src="경로" alt="이미지의대체텍스트" />
src를 사용하여 이미지의 위치를 지정
컴퓨터의 파일 위치를 지정할 땐
./ : 작성 중인 파일이 속한 폴더, 상대경로
../ : 한단계 상위 폴더
/ : root 폴더, 절대경로
인터넷의 주소도 가능
alt는 이미지의 대체 텍스트로, 이미지를 제대로 못 불러왔을 때 텍스트로 해당 이미지가 무엇이었는지 표시할 수 있다.
시각 장애인이 웹을 사용할 때 사용되기에 필수
13) 컨테이너 태그
다른 요소 여럿을 묶어서 관리하기 위한 용도로 사용되는 태그
컨텐츠나 레이아웃에 영향을 주지 않음
ex. <div> <span>
14) 태그의 전역 속성
모든 HTML 태그에서 공통으로 사용할 수 있는 속성
- id : 요소에 고유한 이름을 부여하는 식별자 속성
- class : 요소를 그룹별로 묶을 수 있는 식별자 속성
- style : css를 적용할 때 사용하는 속성
- title : 요소의 추가 정보를 제공하는 속성, 이미지의 툴팁 제공
15) 하이퍼링크
기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 정보를 취득할 수 있는 기능 제공
- href : Hypertext Reference 이동할 페이지 링크
- 전화나 메일도 가능
- 전화의 경우 "tel:번호"
- 이메일의 경우 "mailto:이메일"
- target : 링크된 문서를 열었을 때 문서가 열릴 위치 표시
- _blank : 새탭
- _self : 현재 탭
16) 목록
연관 있는 항목들을 나열하는 태그
- 순서 있는 목록 <ol>
- type : 말머리 기호 변경 -> 1(기본값), A, a, I, i
- start : 시작 값 변경
- reversed : 역순 시작
- 순서 없는 목록 <ul>
- 항목 태그 <li>
- <div>처럼 작동
17) 선택 메뉴 <select>
- <select> 폼 생성
- name : select 박스 이름, 필수
- <option> select폼의 옵션 값 생성
- value : 실제적으로 전달되는 값, 서버에 전달해줄 값
- selected : 최초로 선택된 값으로 설정
- disabled : 보이지만 선택을 못하도록 설정
- <optgroup> : option의 그룹화
- label : optgroup의 이름(그룹명) 설정
18) 입력 값 받기 <input> -> 모든 타입을 입력 받으면 서버에 실제 값은 value가 전달됨!
type
- button
- value에 버튼 안에 넣어줄 문구 지정
- 훗날 <button></button> 이 새로 만들어졌음. 기능상 동일
- text
- placeholder : input 안에 입력 받기 전 써줄 문구 입력칸
- value로 고정된 값을 지정해줄 수 있음(추후 수정 가능)
- password
- checkbox : 같은 name 분류에서 여러 개 선택 가능한 토글 버튼
- name : 체크 박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 설정
- value : 체크 박스가 실제로 전달하는 값
- checked : 화면 최초 로딩 시 선택된 상태로 로딩
- radio : 같은 name 분류에서 한 개만 선택 가능한 토글 버튼
- name
- value
- checked
- date
- 특정 날짜를 선택
- name : 날짜 선택 폼 이름
- type="datetime-local" 으로 시간까지 선택 가능 (datetime은 지역별로 시간대의 영향을 받기 때문에 정확한 데이터 값 전달이 불가능하여 지금은 사용X)
- color
'학원에서 배운 것 > HTML' 카테고리의 다른 글
| 사용자 입력, form 태그에 대해 (0) | 2023.03.16 |
|---|---|
| KDT 5th 웹개발자 입문 수업 2일차 -1 (0) | 2023.01.27 |
| Html 정리 (0) | 2022.12.13 |
