-
HTML (1)Web/html-css 2023. 10. 4. 17:24
1. 시작하기
- 짧은 클라이언트 서버 역사
과거: pc 통신 (p2p) 각자 개인 pc가 서버이자 클라이언트로 서로 연결됨
현재 : 서버 <-> pc 분리하여 서버에 대부분의 데이터를 저장해두고, pc는 약간 다운받아 쓰는 정도임 -> cloud로 발전
- 웹 개발 환경 만들기
> 브라우저 :크롬, vs code, extension: 라이브 서버 정도
> vs code에서 하나의 프로젝트(워크 플레이스) 여로 용도로 사용가능 (live서버에 root directroy)
2. HTML 시작하기
2.1 HTML 기본 문서 만들기
HTML : HyperText Markup Language -> 텍스트, 이미지, 영상등의 리소스 위치를 표시하는 역할한다.
-> 위치를 표시하기 위해 tag를 사용함
HTML 구조 파악 : <!DOCTYPE html> : 문서 유형 지정 -> 웹 브라우저 엔진이 html문서임을 인지
<html> : 문서 시작 의미 -> </html> 뒤에는 아무 내용도 없어야함
<head> : 웹 브라우저에 문서 정보를 알려줌 (웹 엔진이 문서 해석을 위해 필요한 정보)
<meta> : 웹 문서와 관련된 정보 지정 (특히 인코딩 정보)
기타 키워드, 제작자등 지정 가능하다.
<title> : 웹 문서 제목 지정
<body> : 웹 브라우저에 표시할 내용 입력
웹 문서 구조를 만드는 시맨틱 태그: 웹 문서 구조를 나타내는 몇 가지 태그로 HTML5에 추가됨
웹 브라우저가 문서 구조 파악하는 데 중요한 역할을 하는 태그이다.
주요 시맨틱 태그 : <header> : 헤더 영역 나타냄
<nav> : 다른 위치 링크, 웹 문서 위치에 영향 받지 않음(아무 시멘틱 태그에 포함되어도 됨)
<main> : 핵심 컨텐츠 표시, 메뉴나 사이드바 등 페이지 마다 똑같이 들어간 정보는 넣을 수 없고,
문서별로 다른 주요 내용을 구성 문서당 한 번만 사용가능
<article> : 독립적인 컨텐츠 담음, 여러개 사용가능, <section>태그 넣기 가능
<aside> : 사이드 바 영역 나타냄 , 본문 외 내용들
<footer> : 맨 아래 사이트 저작구너 정보 같은 것 footer영역에 header,section,article 등
다른 시맨틱 사용가능
<div> : 여러 소스를 묶는 태그 id,class등 태그 속성을 넣어서 영역 구분, 스타일 적용 등에 사용
3. 웹 문서에 다양한 내용 입력하기
3.1 텍스트 입력하기
- h태그: 제목
- br태그 : 줄바꿈
- p 태그 : 텍스트 단락
* <p> 텍스트 단락 <br> 텍스트 <br>로 <p>태그 효과 낼 수 있지만, 스타일 같은 거 줄 때 문제 발생
* 이미지보단 텍스트를 많이 사용하자 (검색엔진 인식, 검색 용이성, 유지보수 등등 이점이 많다함)
* 웹 서버 별 홈디렉토리를 설정하면, / <- 최상위 경로를 의미하게 된다.
(홈디렉토리가 어딘지가 중요하다 [서버별로 다르다])
현재 vscode에 경우 html폴더가 루트 디렉토리임, D: C:등은 윈도우에서 사용하는 루트 디렉토리 개념임
3.2 목록만들기
순서가 있는 목록 만드는 태그 <ol>,<li>태그 (ol태그는 start, type 속성 넣을 수 있다)
순서가 없는 목록 만드는 태그 <ul>,<li>태그
설명 목록을 만드는 <dl>,<dt>,<dd>태그
<dl> <dt>이름</dt> <dd>값</dd> </dl>
3.3 표만들기
<table> </table>로 시작
<tr>행 만들기 <td>셀 만들기 -> 행단위이다. (td는 colspan, rowspan 속성을 가짐)
<th>태그는 제목행 만들 때 사용 (가운데 정렬 볼드)
<caption> 표에 대한 설명
<thead><tbody><tfoot> : 테이블 구조 지정
(rowspan,colsapn에 영향, 테이블 어느 부분에 있던 head와 foot을 지정하면 테이블 맨 위나 아래로 간다.)
<colgroup><col> : 열 별로 묶어준다. 1열만 사용할것이라면 <col>만 사용 여러 열을 지정하려면,
<colgrouop>사용 [건너띄고 싶으면, 빈 <col> 적고 넘어가자 ]
3.4 이미지 삽입하기 오디오 비디오 삽입
<img src="path" alt="대체 텍스트"> (속성으로 width,height)
<audio src="경로">
<video src="경로">
속성은 controls,autoplay,loop,width,height 등이 있다.
*비디오는 서버에 저장해서 클라이언트에 뿌려주는 작업을 자주 하지 않는다. 이유는 트래픽 때문이다.
트래픽: 네트워크 장치에서 일정시간동안 흐르는 데이터의 양을 의미한다
ex 클라이언트가 웹페이지를 열 때 사진 + 글자 등 포함해서 4mb의 트래픽이 사용
대역폭: 주어진 시간동안 네트워크 연결을 통해 전송할 수 있는 데이터의 양 (Mbps 등으로 표현)
대역폭이 10Mbps이고, 동영상이 5Mb라고 할 때 10명의 클라이언트가 동시에 동영상을 서버로부터 받으면 50Mb이고,
이는 대역폭을 초과한다.
> 따라서 주로 영상은 iframe등을 사용하여 유튜브 영상 링크를 받아온다.
3.5 하이퍼 링크 삽입
<a href="링크할 주소">텍스트 또는 이미지 </a> (주소 외에도 태그 id 지정가능하다)
target 속성 사용가능
4. 입력 양식 작성하기
<form> 태그를 사용하여 입력 양식을 만들 수 있다.
주요속성: method, action, entype, autocomplete(자동완성)
<fieldset><legend> : 폼 안에서 구역 나누기 <legend>는 그룹 이름
<label> 폼요소에 레이블을 붙일 수 있다. <label for="태그_id">폼 요소와 레이블을 엮을 수 있다.
4.1 <input>
사용자 입력을 받기 위한 태그 <input> [서버에 값을 전송하기 위해서는 name 속성 필수]
type = text, password : 텍스트나 비밀번호 입력받기 위한 type
속성: size,maxlength, value(텍스트 필드가 화면에 표시될 때 보여주는 부분)
type = checkbox, radio: 항목 선택
value: 서버에게 넘겨줄 값
checked: 처음에 체크되는 값
type = numver,range : 숫자만 입력받게 제한할 수 있음 커서 같은게 뜬다.
min,max,step,value(초기값) 속성 지정 가능하다.
type= submit,reset : 전송,리셋 버튼
value = 버튼에 표시할 내용
type = image submit과 같은 기능을 하는 이미지 버튼
<input type="image" src="이미지경로" alt="대체 텍스트">
type=file : 파일 첨부에 사용
tpye=hidden: 표시안하지만 넘어갈 값 지정
input태그 주요 속성
수정불가 속성 :readonly,disabled(submit안됨)
placeholder : value지정과 비슷하지만, 전송되는 값이 아니다.
autofocus, required(필수 입력)
4.2 폼에서 사용하는 다른 태그
<textarea> 내용 </textarea>
속성 cols,rows
<select> ,<option> 드롭박스 만들어줌 (체크박스,radio 대안)
<select> <option value="1">선물용1</option> <option value="2">선물용2</option> <option value="3">선물용3</option> <option value="4">선물용4</option> <select>