🎇 CHAPTER01 HTML5 개요
👉 웹의 역사
- 미국 국방성에서 시작.
- 냉전체제를 기점으로 급발전.
- 인터넷의 발전.
- 인터넷 공간 내에서 문서가 서로 이동할 수 있는 새로운 개념인하이퍼 링크개발.
- 이를 바탕으로 World Wide Web 개발하여 1991년 처음 배포 및 1993년 관련 소스 코드 공개. - 1차 웹 브라우저 전쟁.
- 플러그인 : 웹브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치, 웹브라우저 기능을 확장하는 방법.
- 웹 2.0 시대
- WHATWG : Web Hypertext Application Technology Working Group.
- 2차 웹브라우저 전쟁
- 2010년 XHTML 2.0 표준이 붕괴하여 이를 계기로 웹브라우저 점유율을 뒤집을 기회를 얻음.
- 2019년 기준 구글 크롬의 승리로 정리. - 마이크로소프트의 인터넷 익스플로러 지원 중단.
- HTML : 웹페이지의 내용, CSS : 웹페이지의 스타일.
🎇 CHAPTER02 HTML5 기본 태그
👉 기본 환경
- 코드를 위한 에디터 프로그램 : VSCode
- HTML을 보기 위한 웹브라우저 : Chrome
👉 HTML5 기본 용어 정리
🐽 태그와 요소
<> </>: 시작 태그 ~ 끝 태그를 따로 입력하는 요소.<>, </>: 시작태그와 끝태그를 함께 입력하는 요소.
🐽 속성
- 모든 HTML 요소는 속성을 가지고 있다.
- HTML 태그의 데이터 표현.
🐽 주석
<!-- -->: 프로그램 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용.
🐽 HTML5 기본 구조
<!DOCTYPE html>
<html>
<head></head> : 웹페이지 관련 설정
<body></body> : 웹페이지 실제 노출 코드
</html>※ 주의사항
구글 크롬에서 실행한 결과를 다른 웹브라우저에서 실행하면 결과는 같지만 폰트는 다를 수 있다. 실제 웹 페이지를 제작할 때는 모든 브라우저에서 동일한 화면을 볼 수 있도록 폰트를 강제로 지정해준다.
🐽 기본 태그
title tag
- 사이트 제목(탭 제목) 태그
h tag
- 문단 제목 태그
- 현대에는 IPv4로 수용이 불가하여 IPv6로 업그레이드 된 IP 주소를 사용하는데, 이처럼 웹사이트의 수는 점차 증가한다. 이처럼 많은 사이트들을 검색엔진에서 구분하여 검색하기 위해서는 사이트의 title 태그와 h 태그의 값으로 어떠한 사이트인지 여부를 판별하여 검색한다.
- 웹사이트의 제작 의도에 맞도록 검색에 노출되기 위해서는 h 태그와 title 태그를 명확하게 입력해줘야 한다.
p tag
- 하나의 문단을 작성할 때 사용하는 태그.
br tag
- 줄바꿈 태그.
blockquote tag
- 블록형태의 인용구 사용 태그.
q tag
- 인용구 사용 태그.
ins & del tag
- 줄긋기(delete) + 추가할 값 입력(insert) 태그.
sub & sup tag
- 작은 글자 표기 태그.
- sub(원소표기), sup(지수표기)
루비문자
- 일본에서 자주 사용되는 문자형식으로 글자 위에 다른 글자를 나타내는 태그.
div tag
- 공간을 나눌 때 사용되는 태그.
- 관련 있는 태그끼리 block 형태로 공간을 나눠주기 위해 사용하는 태그.
span tag
- 태그 내 문자의 특정 부분을 나누는 태그.
- 태그 내 문자의 일부만 css를 적용할 때 사용하기 위한 태그.
목록 tag
- ul / ol / li
- ul : 순서가 없는 목록 태그.
- ol : 순서가 있는 목록 태그.
- li : ul 또는 ol 하위 항목 태그.
dl tag
- dl / dt / dd
- dl : 설명 목록 태그.
- dt : 설명 항목 중 제목을 나타내는 태그.
- dd : 설명 항목 중 내용을 나타내는 태그.
a tag
- 하이퍼 링크를 참조하기 위한 태그.
- href 속성 : 참조할 문서를 하이퍼 링크 형태로 지정해주는 속성.
- target 속성 : 참조한 문서를 열어줄 대상을 지정하는 속성.
- _blank : 새로운 탭을 열어준다. + href로 지정된 참조를 열어준다.
- _self : 자신의 탭에 href로 지정된 참조를 열어준다.
img tag
- 이미지를 참조하기 위한 태그.
- alt 속성
- 이미지 대체 문구(이미지가 노출 되지 않는 경우 대체 노출되는 문구)
- 이미지 사용 시 함께 작성하는 속성으로서 이미지를 검색할 때 검색 조건에 포함되므로 반드시 입력해줘야 노출이 된다. - src 속성
- 상대 경로로서 문서가 저장된 경로를 기준으로 출력할 이미지 위치를 표기 해줘야 한다.
- 절대 경로의 경우, 해당 파일을 배포 시 다른 컴퓨터 내에서 동일한 경로에 파일이 존재하지 않을 수 있기 때문에 상대경로로 지정해준다.
table tag
- table / tr / th / td
- tr : 행의 갯수
- th : 테이블 제목
- td : 테이블 설명
- rowspan : 셀의 높이 지정, 아래의 행까지 병합함.
- colspan : 셀의 너비 지정, 옆의 열까지 병합함. - scope 속성 : 웹 접근성 측면에서 위치를 표시하기 위한 속성.
- 웹접근성 : 어떠한 사람들도 웹사이트에 접근이 가능하도록 해주는 것을 의미한다.
- 시각 장애인들의 경우 이미지로는 데이터의 구조를 구분하기 어렵기 때문에 코드로 col(열)인지 row(행)인지를 구분해주어 웹 접근성을 높여준다.
audio tag
- src : 음악 파일의 경로 지정
- source : 음악 파일의 확장자 지정
video tag
- src : 비디오 파일의 경로 지정
문자 강조 tag
- em tag : 문자 누이기.
- strong tag : 문자 강조하기.
시멘틱 구조 tag
- 별도의 기능은 없지만 웹페이지의 영역을 구분하기 위한 의미를 가진 요소.
- 시용 시 브라우저와 개발자 모두에게 그 의미가 명확하게 설명이 가능하다.
- 특정한 태그에 의미를 부여해서 웹페이지를 만드는 것을 시멘틱웹이라고 표현한다.
- 시멘틱 요소 종류
- header : 헤더 영역을 의미.- nav : 내비게이션 영역을 의미.
- section : 문서 내 하나의 섹션을 의미.
- article : 주 내용을 의미.
- aside : 주 내용 이외의 보조 내용을 의미.
- footer : 문서 또는 세션의 바닥을 의미.
- details : 사용자가 필요에 따라 열고 닫을 수 있는 추가 세부 정보를 의미.
- summary : details 요소의 제목을 의미.
- figure : 그림, 도표, 사진, 코드 목록과 같은 태그를 지정 자체에 포함된 내용을 의미.
- figcaption : 캡션을 저장하는 figure 하위 요소 의미.
- main : 문서에서 메인 영역을 의미.
- mark : 문구에서 강조해야할 부분을 의미.
- time : 날짜/시간을 의미.
입력 양식 tag / 기본 input tag
- 웹브라우저로 부터 데이터를 입력받고 싶을 때 사용하는 태그.
- action 속성 : 웹브라우저로부터 입력 받은 데이터가 전송되는 url 주소 명시.- label tag : 입력 받을 데이터의 종류를 명시하기 위한 태그.
- 명시적 방법 :
<label for="id명"> </label> - 묵시적 방법 :
<label> <input> </label> - fieldset tag : 입력 태그를 공통 사항으로 구분하기 위한 태그.
- legend 속성 : fieldset 제목.
- 명시적 방법 :
- textarea tag : 여러줄을 입력받는 입력 태그.
- select tag : 아래로 여러 항목 중 선택하도록 하는 입력 태그.
- optgroup tag : select 태그 내 여러 항목을 공통 내용으로 구분하기 위해 사용하는 태그.
- size 속성 : 여러 항목 중 한번에 보이는 갯수를 지정하는 속성.
- multiple 속성 : 여러 항목을 한번에 선택하는 속성.
- selected 속성 : 처음 select 항목 중 default 항목을 지정하는 속성.
- disabled 속성 : 비활성 속성.
- readonly 속성 : 읽기 전용 속성.
- maxlength 속성 : 입력 데이터 길이를 제한하는 속성.
- checked 속성 : 체크박스에 미리 체크하는 속성.
- placeholder 속성 : 입력 창 안에 입력 값에 대한 설명을 적는 속성.
- label tag : 입력 받을 데이터의 종류를 명시하기 위한 태그.
button tag
- 초기에 input tag의 button type을 사용했지만 HTML 발전과 button 기능의 확장으로 인해 button tag가 새롭게 추가되었으며 button 태그를 사용하는 것이 다양한 기능 사용에 적합.
global 속성(전역 속성)
- 모든 태그 내부에 사용이 가능한 속성.
- title 속성 : 마우스를 해당 요소에 올려놓을 때 툴팁(tooltip)이 표시되는 속성.
- style 속성 : 해당 요소에 인라인으로 css 스타일을 적용하고 싶을 때 사용하는 속성.
- class 속성 : HTML 문서 상에서 여러 요소를 하나의 클래스명으로 묶고 싶을 때 사용하는 속성.
- id 속성 : HTML 문서 상에서 하나의 요소에 이름을 부여하고 싶을 때 사용하는 속성.
- tabindex 속성 : 키보드읭 tab 키를 사용하여 웹페이지를 탐색할 때 요소에 포커스가 가능한지 여부와 포커스가 잡히는 순서를 제어하기 위해 사용하는 속성.
- data-xx : HTML에 정의되지 않은 커스텀 속성을 사용하고 싶을 때마다 사용하는 속성.
백엔드 서버 엔지니어