웹 개발 스터디 01 - HTML, CSS

Web Study 01
HTML, CSS
Copyright© 2015 by YoWu. All rights reserved.
http://luckyyowu.tistory.com (uyu423@gmail.com)

커리큘럼
1주차 : HTML, CSS
2주차 : Bootstrap, JavaScript
3주차~ : PHP, MySQL

실습환경
• XShell, Putty와 같은 터미널 프로그램을 사용해서
직접 서버에 작업
• Linux, Vim에 익숙하지 않다면 연습하세여
• 진짜 리눅스 못해먹겠다 싶으면 Notepad++ 사용

Web ?
• WWW(World Wide Web)를 사용하는 서비스를 흔히 웹(web)이라 부름
• 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전
세계적인 정보 공간
• Web은 클라이언트와 서버사이 요청(Request)과 응답(Response)의 연속

http ?
• HTTP(Hyper Text Transfer Protocol)
• 인터넷에서 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를
전송하기 위해 사용되는 통신 규약
• 프로토콜 (Protocol)
• 컴퓨터간에 정보를 주고받을 때의 통신방법에 대한 규칙과 약속

Server Side ? Client Side?
•Server Side Language
• PHP
• ASP
• JSP
• ASP.NET
•Client Side Language
• Javasciprt
• Python

Server Side Language
• 웹에서 서버 사이드 언어란 클라이언트의 요청을
서버 측에서 처리하는 언어를 말함.

Client Side Language
• 웹에서 클라이언트 사이드 언어란 클라이언트의
요청을 클라이언트 측에서 처리하는 언어를 말함.

HTML ?
• HTML (Hyper Text Markup Language)
• 웹을 통해서 볼 수 있는 문서를 만들 때 사용하는 기본적인 프로그래밍
언어의 한 종류
• 하이퍼 텍스트를 작성하기 위한 언어
• 대소문자 구분이 없음
• 순차적으로 실행되며 하나 이상의 공백은 무시

HTML TAG - 1
• 기본 형태
• ~/public_html/hello.html
태그 설명
<html>…</html> HTML 문서의 시작과 끝을 정의
<head>…</head> 헤더의 시작과 끝
<title>…</title> 웹 브라우저의 제목 및 스타일 정의
<body>…</body> 본문의 시작과 끝을 정의

HTML TAG - 2
• 제목, 문단, 이미지 태그

HTML TAG - 2
• 제목, 문단, 이미지 태그
tag 설명
<h1>,<h2>…<h6> 제목을 정의
<p>…</p> 문단을 지정
<br/> 줄 바꿈 (개행)
<a>…</a> 하이퍼링크를 걸어줌
<img/> 그림파일을 삽입

CSS 분리
•HTML FILE •STYLE(CSS) FILE
• 분리 왜 함?
• 웹 개발자, 웹 디자이너 업무 분리 유리
• 모듈화, 재사용, 유지 보수 용이

HTML TAG - 3
• 테이블 태그 tag 설명
<table>…</table> 표를 만듦
<tr>…</tr> 표의 행을 생성
<td>…</td> 표의 열을 생성

실습 - 1
• 배경색 지정 : style="background-color: blue;"
• 위에서 사용된 색상 : yellow, blue, red, gray, green, pink, black

HTML TAG - 4 (input 태그)
tag 설명
<form>…</form> 데이터를 서버로 전송하기 위해 사용
<input ..…/> 폼 양식에서 사용자의 입력을 받을 때 사용
<select>…</select> 하나 이상의 선택 목록을 만듦
<option>…</option> Select 의 하위 태그로 선택지를 설정
<textarea>…</textarea> Input 과 달리 여러 줄의 텍스트를 받을 때
사용

과제
• 스터디 시간에 한 실습 및 예제
• 리눅스 기본 명령어, vi 명령어 조사 및 익숙해지기
• 앞에서 배운 HTML 태그 속성 조사
• HTTP Method (전송방식) 조사
• HTTP 응답코드 종류 조사
• Table 태그를 사용해 다음학기 예상 시간표 작성
• 스터디 시간에 배운걸로 회원가입 폼 만들기
• <div> <span> 태그에 대해 뭔지와 차이점 조사
• Bootstrap이 뭔지 조사해보고 Bootstrap Grid System에 대해
조사

웹 개발 스터디 01 - HTML, CSS

More Related Content

What's hot

Viewers also liked

Similar to 웹 개발 스터디 01 - HTML, CSS

More from Yu Yongwoo

웹 개발 스터디 01 - HTML, CSS