웹 개발 스터디 01 - HTML, CSS

Web Study 01

HTML, CSS

Copyright© 2015 by YoWu. All rights reserved. http://luckyyowu.tistory.com ([email protected])

커리큘럼

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/> 그림파일을 삽입

HTML TAG - 2 + CSS

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 태그)

HTML TAG - 4 (input 태그)

tag 설명

<form>…</form> 데이터를 서버로 전송하기 위해 사용

<input ..…/> 폼 양식에서 사용자의 입력을 받을 때 사용

<select>…</select> 하나 이상의 선택 목록을 만듦

<option>…</option> Select 의 하위 태그로 선택지를 설정

<textarea>…</textarea> Input 과 달리 여러 줄의 텍스트를 받을 때사용

실습 - 2

과제

• 스터디 시간에 한 실습 및 예제

• 리눅스 기본 명령어, vi 명령어 조사 및 익숙해지기

• 앞에서 배운 HTML 태그 속성 조사

• HTTP Method (전송방식) 조사

• HTTP 응답코드 종류 조사

• Table 태그를 사용해 다음학기 예상 시간표 작성

• 스터디 시간에 배운걸로 회원가입 폼 만들기

• <div> <span> 태그에 대해 뭔지와 차이점 조사

• Bootstrap이 뭔지 조사해보고 Bootstrap Grid System에 대해조사

웹 개발 스터디 01 - HTML, CSS

Software

Transcript of 웹 개발 스터디 01 - HTML, CSS