HTML & CSS 학습하기

웹사이트 개발을 위한 HTML5에 대해서 학습을 합니다.

## 01.[html이란](./intro) --- html5 의 소개와 개발을 위한 환경 설정에 대해서 설명을 합니다. * 인터넷 탄생 * w3c * 브라우저
## 02.개발환경 구축하기 --- html을 학습하기 전에 개념 학습과 환경설정을 준비합니다. ### [환경설정](./setup) 웹프론트 개발을 위한 로컬 PC 환경을 구축합니다. 개발 환경을 구축하기 위한 도구들을 설치합니다. * [크롬](./setup/chrome) 브라우저 설치 * [VSCode](./setup/vscode) 설치
## 03.[시작하기](./basic) --- 간단한 인사말 웹페이지 파일을 생성합니다. 웹 문서의 구조를 확인합니다. #### 헬로우 월드 웹브라우저에 `Hello world`를 출력해 봅니다. * [헬로우월드](./basic/hello) #### [문서구조](./basic/structure) html 문서의 기본 구조에 대해서 알아 봅니다. * HTML5 [문서구조](./basic/structure) #### 실습확인 html 코드의 작성을 도움을 줄 수 있는 확장 프로그램을 설치 합니다. * [설정방법](./basic/preview)
## 04.HTML4,5 알아보기 --- ### html4 html 글을 꾸미기 위한 기본적인 테그에 대해서 학습을 합니다. #### 글자출력 * [제목테그](./tag/h) * [본문](./tag/p) * [글자모형](./tag/fontshape) * [이동](./tag/ruby) #### 구분 * [분할](./tag/br) * [가로줄](./tag/hr) #### 하이퍼링크 * [이동](./tag/a) #### 공간영역 html 문서를 꾸미기 위한 공간 영역에 대해서 알아 봅니다. * [block 영역](./tag/div) * [inline 영역](./tag/span) #### 리스트/표 목록과 데이터를 출력하는 방법을 학습합니다. * [리스트](./list/list) 목록을 출력합니다. * 테이블 데이터를 표형태로 출력을 합니다. ### html5 시만텍테그 #### [미디어](./media) * [이미지](./media/image) * [오디오](./media/audio) * [비디오](./media/video)
## 05.마크다운 --- 마크다운으로 간단한 웹페이지 내용을 작성할 수 있습니다. * [마크다운](./markdown) 간단하게 html문서를 작성할 수 있는 규칙입니다.
## 06.FROM 요소 --- 사용자로 부터 정보를 입력 받을 수 있습니다. * [form](./form) * 메소드 * 엑션 ### input 값을 입력을 받습니다. * [입력](./form/input) * [라벨](./form/label) ### textarea 다중 문자열을 입력할 수 있습니다. * [textarea](./form/textarea) ### select 값을 선택할 수 있는 입력폼을 설계합니다. * [select](./form/select)
## 07. CSS 디자인 적용하기 --- html 문서를 꾸미기 위한 css에 대해서 알아 보도록 합니다. * CSS1/CSS2 * CSS3 ### CSS 라이브러리 CSS 라이브러리를 이용하여 화면을 구성합니다. * 부트스트랩 * 파운데이션
## 08.돔(dom) --- html의 트리구조에 대해서 알아 보도록 합니다.
## 09.HTTP 통신 프로토콜 --- HTTP 통신 및 meta 설정 방법에 대해서 알아 봅니다.
## 10.레이아웃 --- 웹사이트 제작을 위한 레이아웃 설계를 알아 봅니다. * desktop * 모바일 * 반응형 ### [레이아웃](./layout) 페이지의 외각 골격을 위한 레이아웃을 설정합니다. ### [템플릿](./template) 레이아웃을 이용하여 템플릿 화면을 처리합니다.
## 11.클론코딩 연습하기 --- ### 스타일 테그를 이용하여 html 문서를 작성하는 코드작성법에 대해서 알아 봅니다. * [코드스타일](./tag/style)