HTML&CSS

1강 HTML5의 개요 및 개발환경 구축

1. 웹이란?

-Web(웹)이란, 사전적인 의미로 거미줄이란 뜻으로 IT에서는 WWW(world wide web) 말의 줄임말로써 사용된다. 세계의 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적이 있다. 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 한다.

2. HTML5란?(HTML5의 개발 배경)

- 수많은 플러그인들로 인한 부작용을 막기 위해 개발되었다.

HTML5 개발 단계

- 익스플로러 독점

- 익스플로러에 맞는 많은 플러그인 양산

- 거대해져가는 브라우저 및 보안 취약점 발생

- MS를 제외한 회사들이 HTML표준안을 W3C에 제시

- HTML 표준안 무시

- 무시당한 회사들이 Web Application 1.0 개발

- W3C는 XHTML2.0 개발

- XHTML2.0의 쇠퇴

- W3C에서 Web Application 1.0을 웹표준안으로 수용

- Web Application 1.0을 HTML5로 개명

- 2014년 HTML5 정식 배포

3. 웹 표준이란?

- 모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것

- W3C에서 HTML5를 웹 표준으로 권고하고 이를 따름

- W3C[World Wide Web Consortium] - http://www.w3.org 월드와이드웹(WWW)의 창시자인 팀 버너스 리를 중심으로 창립된 월드와이드웹 컨소시엄

4. HTML5과 XHTML의 차이

- HTML5는 내용과 디자인을 분리하여 유지보수에 장점이 있다.

- XHTML은 내용과 디자인이 한 페이지에 있고

- HTML5는 분리되어 있다.

5. HTML5의 특징

- HTML5는 지금도 개발 중에 있고, 다양한 기능이 추가되었다.

- 멀티미디어를 직접 재생할 수 있다.

- 서버와 통신할 수 있다.

- 시멘틱 태그가 추가되어, 검색엔진의 검색능력을 극대화할 수 있다.

6. CSS3란?

- 웹 문서를 꾸며주는 언어이다.

- Cascading Style Sheets의 약자

- 웹 문서의 레이아웃을 설정한다.

- 하나의 웹 문서를 다양한 디바이스에 최적화해서 출력한다.

7. HTML5와 CSS3

- HTML5와 CSS3는 실과 바늘처럼 거의 항상 같이 한다.

- 내용 : HTML

- 디자인 : CSS

8. 개발 도구 익히기

- HTML5와 CSS3을 편집(코딩) 하기 위한 도구를 알아본다.

Notepad++

- 무료 버전으로 검색사이트에서 쉽게 다운받을 수 있다.

Visual Studio 2013 Express for Web

- 무료 버전으로 MS사이트에서 쉽게 다운받을 수 있다.

(Visual Studio 2013 Express for Web 검색 > 다운로드 > 설치)

9. HTML문서 무작정 만들어 보기

- 처음으로 HTML문서(웹 문서)를 제작해 본다.

10. 무료 웹 호스팅 신청하기

- zpat.info 무료 웹 호스팅 계정을 신청한다.

- (지금은 없어서 새로 찾아봐야 할듯...)

11. FTP란?

- file transfer protocol의 약자로 파일을 전송하는 프로토콜이다.

- FTP 서버(서버용 프로그램)

- FTP 사용자(클라이언트용 프로그램)

12. FTP 설치 및 사용방법

- FTP프로그램을 이용해서 FTP서버에 파일을 업로드할 수 있다.

13. 서버(웹)에서 HTML문서 확인

- 서버에 파일을 업로드 하고, 브라우저에서 확인해 본다.

14. 구글 크롬 설치

- 구글 크롬 브라우저를 설치하고 웹 문서를 출력해 본다.

15. 개발자 도구

- HTML문서를 제작하는데 만은 도움을 주는 도구이다.

F12 또는 오른쪽 마우스 > 요소검사를 선택한다.

학습정리

- HTML5의 등장 이유 : XHTML의 쇠퇴에 따른 대안으로 HTML5를 W3C에서 채택했다

- CSS란? : 웹 문서의 디자인을 담당하는 언어이다.

- FTP란? : 실제 서버에 웹 문서를 업로드 해서 어디서나 브라우저를 통해서 출력이 가능하게 만들어 주는 프로토콜이다.

2강 HTML5 태그 1 (HTML5 기본 태그 및 아이디 속성을 이용한 페이지 제작)

1. 태그와 속성

- HTML 문서는 '태그'로 만들어진다.

- HTML 문서의 뼈대는 html, head, body 태그로 구성되어 있다.

- 주로 body 태그 안에 실제 웹 문서에 표현되는 수없이 많은 태그들이 존재한다.

- 태그는 시작 태그와 종료 태그로 짝을 이루는 태그도 있고, 시작 태그만 존재하는 태그도 있다.

- 시작 태그와 종료 태그는 '/'로 구분한다.

- 각각의 태그마다 속성이 존재하고 속성에는 속성값이 존재한다.

2. 주석

- 주석은 html문서가 브라우저를 통해서 출력될 때 노출되지 않는다. (프로그래밍 설명문)

- 주석을 사용하는 이유

- 지금 내가 작성한느 문서를 나 자신 또는 다른 사람이 먼 훗날 다시 보게 될 때 좀 더 쉽게 문서를 파악하기 위해서 작성하는 프로그래밍 설명문

- 처음에는 다소 귀찮은 작업일수도 있지만 추후 발생되는 디버깅 또는 유지보스를 생각한다면 주석은 아주 중요한 요소

- 처음 HTML을 학습하는 단계에서는 주석의 중요성을 못 느낄 것이다. 그 이유는 주석은 어느 정도 규모가 되는 프로젝트에서 많은 문서를 제작할 때 그 필요성을 느끼게 해주기 때문이다.

- 지금처럼 html을 학습하는 초기 단계에서는 간단한 예제 위주로 html 문서를 작성하므로, 주석이 없어도 한눈에 HTML 문서의 구조를 파악할 수 있다.

3. HTML 문서 구조

- HTML 문서는 DOCTYPE, html, head, meta, title, body로 구성

<head> : head 태그에는 주로 웹 문서의 정의가 기술됨

<title> : 브라우저 창이 뜰 때 창에 나오는 제목

<body> : body 태그에는 주로 웹 문서의 내용이 기술됨

- 우리가 실제로 브라우저를 통해서 확인되는 내용은 거의 대부분이 body태그의 내용

4. 텍스트 관련 태그

- 웹 문서는 주로 텍스트와 이미지로 구성됨

- 이 중에서 텍스트는 정보를 전달하기 위한 기본적인 요소로써, HTML에서도 다양한 태그를 제공하고 있음

- <h1> ~ <h6> 및 <p> 태그는 아주 많이 사용되는 태그

- <hr>태그를 사용하면 HTML화면에 줄이 그어진다

5. 하이퍼링크 태그

- 웹문서의 꽃인 앵커 태그가 가지고 있는 속성

<a>태그 : 웹 문서를 이동할 수 있게끔 해주는 태그

href 속성 : 웹 문서가 이동하게 될 주소를 속성값으로 가진다.

- <a>태그는 웹 서비스의 가장 중요한 요소 중 하나
- <a href = " @!#$%^*&^%$# " ></a>

- 앵커태그라고도 한다

6. 아이디 속성을 특정 위치 이동

- 태그의 아이디 속성을 이용한 페이지 내에서 특정 위치로 이동

- 작성예 : <hr id="info01" /><p><a href="#info01"></a></p>

학습정리

<h1>~<h6> 태그 : 주로 타이틀을 나타내는 태그로 사용된다.

<p> 태그 : 문단을 구분할 때 사용되는 태그이다.

<a href="#">태그 : 문서의 이동을 담당하는 태그이다. 앵커 태그의 경우 다양한 속성과 속성값을 알아두어야 한다.

3강 HTML5 태그 2 (목록 구성 태그)

1. 목록 관련 태그

- 목록을 나타내는 태그에는 대표적으로 ol, ul태그가 있다. 이들은 모두 목록(리스트)를 나타내기 위한 태그이다.

<ol> 태그

- 순서가 있는 목록을 나타낸다.

- 목록의 아이템은 <li>태그를 사용한다.

<ul>태그

- 순서가 없는 목록을 나타낸다.

- 목록의 아이템은 <li>태그를 사용한다.

- 기본적으로 웹 문서에서 목록을 나타낼 때는 <ol>또는 <ul> 태그 중 하나를 사용하고 아이템은 <li> 태그를 사용한다.

- 목록 태그의 구조 : <ol><li></li></ol>, <ul><li></li></ul>

- 목록을 나타내는 태그로 dl, dt, dd 태그도 있음 <dl><dt><dd></dd></dt><dt><dd></dd></dt></dl>
도 있다.

- CSS에서 li { list-style :none; } 을 하면 list 스타일이 적용되지 않아 수평으로 출력이 된다.

2. 테이블 태그

- 표를 나타내는 태그는 <table>태그를 사용한다. <table> 태그 내부에 <tr>, <td> 등을 사용해서 내용을 표현한다.

<table> 태그 : 표를 나타내기 위한 태그

<tr> 태그 : table태그 내부태그로 테이블에서 행을 표현

<td> 태그 : table 태그 내부태그로 테이블에서 열을 표현

- table 태그는 과거에는 웹 문서의 전체적인 레이아웃을 만들 때 많이 사용되었으나, 웹 표준 시대에는 회원가입, 게시판, 설문조사 등에 사용된다.

- <table border="1"><tr><th></th></tr><tr><td></td></tr></table>

- 열을 합치는 속성 colspan="?", 행을 합치는 속성 rowspan="?"

학습정리

<ol>태그 : 순서가 있는 목록을 나타낼 때 사용하는 태그로 목록 아이템은 <li>태그를 사용한다. 추후에 학습하게 될 CSS를 이용해서 가로형태로 변형도 한다.

<ul>태그 : 순서가 없는 목록을 나타낼 때 사용하는 태그로 목록 아이템은 <li>태그를 사용한다. 추후에 학습하게 될 CSS를 이용해서 가로형태로 변형도 한다.

<dl> 태그 : ol, ul태그와 함께 많이 사용되는 태그로 내부 태그로 dt, dd태그를 이용해서 리스트의 아이템을 나타낸다.

<table> 태그 : 표를 나타내는 태그로 내부태그로 tr, th, td태그를 사용해서 셀을 나타낸다. 셀을 합치는 경우에는 colspan(열), rowspan(행) 속성을 이용한다. 주로 회원가입, 게시판, 설문조사 등과 같은 페이지의 레이아웃을 제작할 때 사용된다.

4강 HTML5 태그 3 (데이터 전송 및 이미지 태그)

1. 폼 관련 태그

- 사용자의 정보를 서버로 전달하기 위한 용도로 사용되는 태그

- <form><input/>...</form> → 데이터 처리

<form> 태그 : 데이터 처리 문서의 주소와 데이터 전달 방식을 속성으로 갖는다.

action은 input태그에 있는 submit버튼을 누를 때 해당되는 URL로 정보를 전송한다.

<input> 태그 : type 속성을 이용해서 사용자의 다양한 정보를 얻을 수있다.

text, password, file, radio, checkbox, submit

name 속성은 서버가 식별할 수 있는 이름이다. name이 중복되면 서버가 헷갈릴 수 있다.

radio 속성의 경우 name값을 동일하게해야 여러개 중 하나를 선택하게 할 수 있다.

checked 속성은 화면에 처음 출력이 될 때 기본값으로 체크되게 해준다.

<select> 태그 : n개중에 하나를 선탁할 때

multiple 속성을 사용하면 다중 선택이 된다.

- 디자이너와 퍼블리셔는 폼 관련 태그를 디자인에 중점을 둔다.

- 웹 프로그래머는 데이터의 처리에 중점을 두고 작업을 한다.

- 다양한 데이터에 적합한 폼을 구성, 데이터 전송에 GET방식과 POST방식을 구분

GET방식은 URL에 정보가 추가되어 서버로 전송이 된다. 보안에 취약함

POST방식은 URL에 정보가 추가되지 않고 암호화되어 서버로 전송이 된다. 보안이 됨

이름 : <input type="text" name="uname" /><br />

아이디 : <input type="text" name="uid" /><br />

비밀번호 : <input type="password" name="upw" /><br />

연락처 : <input type="text" name=uphone1" size="5" /> -

<input type="text" name=uphone2" size="5" /> -

사진 : <input type="file" name="upic"/><br />

성별구분 : <input type="radio" name="gender" value="m"> 남,

사용언어 : <input type="checkbox" name="lan" value="kor" checked="checked" />한글,

<input type="checkbox" name="lan" value="eng" />영어,

<input type="checkbox" name="lan" value="jap" />일어,

자기소개 : <textarea rows="5" cols="20"> 간단하게 입력하세요. <textarea><br />

국적 : <select>

<option>KOREA</option>

<option>JAPAN</option>

<option>CHINA</option>

</select><br />

좋아하는음식 : <select multiple="multiple">

</select><br />

</form>

2. 이미지 태그

- 이미지를 사용하여 보다 효율적인 정보 전달을 할 수 있다.

- <img src="위치정보">

<img>태그 : 웹 문서에 이미지를 삽입하기 위한 태그

src 속성 : 이미지의 위치 정보를 속성값으로 가지고 있다.

alt 속성 : 사용자가 src주소에서 정보를 얻지 못할 때 해당 이미지의 정보가 무엇인지 사용자에게 알려주는 속성, alt 속성을 이용하여 시각장애인에게 사운드로 출력되어 정보를 전달해 줄 수 있다.

- 이미지는 웹 문서에서 텍스트와 함께 정보 전달 수단으로써 아주 중요한 역할을 하는 요소

- 이미지의 위치는 로컬뿐만 아니라 외부에 존재할 수도 있다.

- 이미지 태그와 속성을 이용한 이미지 삽입

<p><img src="img/Navi_dr.png" alt="꿈 story" width="500"></p> 이미지의 크기를 결정해주는 속성

<p><a href="#"><img src="#" alt="#"></a></p> 이미지에 링크를 삽입하는 경우

- 리스트 구조를 만들고, 리스트의 아이템으로 이미지를 사용

<ol><li><img src="#" alt="#"><a href=#"></a></li></ol> 이와 같이 사용할 수 있다.

학습정리

<form>태그 : 사용자의 정보를 서버로 전달하기 위한 태그

<input>태그 : 사용자의 다양한 정보를 type 속성을 이용해서 적절하게 처리한다.

ex) type="password" → 비밀번호 입력

<img src="이미지 위치 정보">태그 : 웹 문서에 텍스트 외에 이미지를 삽입하여 효율적인 정보 전달을 가능하게 한다. alt 속성은 이미지가 손상되었을 때 이미지를 설명해주는 태그

5강 HTML5 태그 4 (HTML5 레이아웃 및 시멘틱 웹페이지 제작)

1. 페이지 레이아웃 설정 태그

- block 타입의 태그와 inline 타입의 태그

block 타입의 태그의 경우 자동으로 개행이 된다. Ex: <p>태그, <li>태그

inline 타입의 태그의 경우 <br>태그를 하지 않는 이상 개행이 안된다. Ex: <img>태그

<div>태그

- block 타입의 대표적인 태그

- 웹 문서의 레이아웃을 설정하는 용도로 많이 사용된다.

<span> 태그

- inline 타입의 대표적인 태그

- 웹 문서에서 특정한 의미를 나타내지는 않는다.

- <div>태그를 이용해서 웹 문서의 레이아웃을 자유롭게 구성할 수 있어야 한다.

2. 시멘틱 태그

- 검색 엔진이 보다 효율적으로 데이터를 검색할 수 있게 특정 태그를 사용해서 웹 문서를 제작하는 것을 시맨틱 웹이라고 한다.

- 시멘틱 태그 웹 문서 ← 효율적인 검색 ← 검색엔진

- 시멘틱 주요 태그

<header> 페이지의 헤드 영역

<footer> 페이지의 하단 영역

<nav> 페이지의 네비게이션(메뉴) 영역

<section> 페이지의 내용

<article> section과 유사하며, 글 또는 어떠한 내용 출력

<aside> 부가적인 내용

3. 시멘틱 태그를 이용한 웹페이지 제작

- 일반 태그는 <div></div> 위주로 구성되어 있음

- 시멘틱 태그는 <header></header> <nav></nav> <section></section> <footer></footer>로 구성되어 있음

- 검색엔진에 검색을 할 때 시멘틱 태그가 더 좋다.

학습정리

<div> 태그 : 웹 문서의 레이아웃을 설정하는데 가장 많이 사용되는 태그

시멘틱 태그 : 검색 엔진이 보다 효율적으로 데이터를 검색할 수 있게 특정 태그를 사용해서 웹 문서를 제작하는 것을 시멘틱 웹이라고 한다. 시멘틱 태그의 사용은 권장사항이다. 즉, 사용하지 않아도 웹 문서를 제작할 수 있다.

6강 HTML5 태그 5 (HTML5 멀티미디어)

1. 멀티미디어 관련 태그

- 웹 문서에 멀티미디어 요소를 삽입하면, 정보 전달이 보다 효율적이다.

<embed> 태그 :

embed 태그를 이용해서 멀티미디어 요소를 삽입할 수 있다.

src : 재생하려는 파일의 경로와 이름

width : 가로 사이즈

height : 세로 사이즈

autostart : 자동실행 여부(true/false)

<audio> 태그 :

audio 태그를 사용하면 웹 문서에 음악을 삽입할 수 있다.

audio 태그에는 다양한 속성이 있다.

src : 재생하려는 파일의 경로와 이름

controls : 컨트롤러 출력 (true.false로 출력하는 것이 아님)

autoplay : 자동 실행 (true.false로 출력하는 것이 아님)

loop : 반복 실행

<video> 태그 :

vidio 태그를 사용하면 웹 문서에 동영상을 삽입할 수 있다.

vidio 태그의 다양한 속성이 있다.

src : 재생하려는 파일의 경로와 이름

type : 재생매체 타입

controls : 컨트롤러 출력

autoplay : 자동 실행

loop : 반복 실행

- 과거에 주로 사용된 embed 태그 외에 audio, video 태그를 이용해서 멀티미디어 요소를 웹 문서에 삽입할 수 있다.

학습정리

<audio> 태그 : 웹 문서에서 음악을 재생하기 위한 태그이다.

<video> 태그 : 웹 문서에서 동영상을 재생하기 위한 태그이다.

7강 CSS3 선택자 1 (스타일 기초 및 필수 선택자)

1. CSS3 적용 방법

- 다양한 CSS3 적용 방법

- HTML 태그에 직접 적용하는 방법

해당 HTML 태그에 직접 기술하여 CSS3의 속성을 적용한다.

Ex) <div style="background:#ff0000;">

- HTML 문서 내부에서 적용하는 방법

HTML 문서 내부에서 <style> 태그를 이용해서 CSS3를 적용한다.

<style>

div {

background : #000000 ;

}

</style>

- HTML 문서 외부에서 적용하는 방법

HTML 문서 외부에서 .css 파일을 이용해서 CSS3를 적용한다.

- 가장 많이 사용되는 방법은 .css파일을 외부에 두고 HTML문서에서 <link> 태그를 이용하는 방법이다.

2. 선택자와 속성

- CSS3의 선택자와 속성

- CSS3 선택자

HTML 요소에 스타일을 적용하기 위해서는 우선적으로 해당 요소를 선택해야 한다.

HTML 요소를 선택하기 위해서 선택자를 이용한다.

CSS3에서는 크게 태그, 클래스, 아이디 선택자를 제공하고 있다.

- CSS3 속성

선택자를 이용해서 HTML요소를 선택한 후, 적절한 속성을 적용한다.

- CSS3을 잘 다루려면 우선적으로 HTML 문서의 전체적인 구조를 파악해야 한다.

- 문서의 구조를 파악하지 못하면 해당 요소를 정확하게 선택할 수 없다.

3. 전체 선택자

- CSS3의 대표적인 선택자

- 선택자

HTML 문서의 모든 요소를 선택하기 위한 선택자 *

<style>

color : #000000 ;

}

</style>

4. 태그, 아이디, 클래스 선택자

- CSS3의 대표적인 선택자

- 태그 선택자 태그명

특정 태그를 선택할 때 사용

- 아이디 선택자 #아이디명

HTML 태그에 아이디를 지정하고, 지정된 아이디의 태그를 선택하는 선택자

- 클래스 선택자 .클래스명

HTML 태그에 클래스를 지정하고, 지정된 클래스의 태그를 선택하는 선택자

아이디 선택자와 차이점은 아이디는 주로 유니크한 이름을 사용하며, 클래스는 여러 개의 태그에 동일한 이름을 가질 수 있다는 점

학습정리

태그 선택자 : HTML의 특정 태그를 선택할 때 사용한다.

아이디 선택자 : HTML 태그에 부여된 아이디를 이용해서 태그를 선택할 때 사용한다.

클래스 선택자 : HTML 태그에 부여된 클래스를 이용해서 태그를 선택할 때 사용한다.

8강 CSS3 선택자 2 (알아두면 편리한 다양한 선택자)

1. 속성 선택자

- HTML 태그의 속성을 이용하는 선택자

- 태그속성을 이용하는 방법

태그선택자[속성]

Ex) a[href] { color : #000000 }

- 태그 속성값을 이용하는 방법

태그선택자[속성=속성값]

Ex) a[href='http://www.google.com'] { color: #000000 }

- 속성 선택자의 사용방법

<style>

input {

color : green;

font-size : 30px;

font-weight : bold;

}

input[type=text] {

color : orange;

font-size : 50px;

width : 200px;

}

input [type=tel] {

color : red;

}

img[src] {

border : 5px solid green;

}

</style>

2. 링크 선택자

- <a> 태그에 CSS3 속성을 적용할 때 사용

- link 선택자

<a>태그를 선택할 때 사용

Ex) a:link::after { content: '-' attr(href); }

content는 <a href="#">요기가 content다</a>

attr은 속성의 약자

링크선택자를 이용해서 CSS3 적용

#content a:link::after{

content: ' - ' attr(href);

}

<li><a href="#" target=_blank">T아카데미</a></li>

적용결과 : T아카데미 - #

3. 부정 선택자

- 명시한 선택자들 외의 요소를 선택할 때 사용

- 부정(:not) 선택자

:not 선택자를 이용해서 명시한 선택자들 외의 HTML 요소를 선택

Ex) li:not(.fa) { background-color:#000000 }

4. 문자 선택자

- 문자의 특정속성을 이용해서 CSS3를 적용할 때 사용

- :first-letter 선택자

첫 번째 문자를 선택할 때 사용

Ex) #history1 : first-letter { font-size:2em }

- :first-line 선택자

첫 번째 행을 선택할 때 사용

Ex) #history1 : first-line { font-weight:bold }

5. 후손 및 자손 선택자

- HTML 태그의 계층구조를 이용해서 CSS3를 적용할 때 사용

- 후손 선택자

특정 HTML 태그의 아래에 있는 모든 태그요소를 선택할 수 있다.

Ex) div li { background-color : red }

문서내에 div 하고 한칸 띄운후 li라고 하면 div안에 있는 후손인 li를 선택할 수가 있다.

후손은 자식, 손자까지 div안에 있으면 전체다 선택이 된다.

- 자손 선택자

특정 HTML 태그의 바로 아래에 있는 태그요소를 선택할 수 있다.

Ex) div > h1 { font-weight:bold }

문서네에 div한후 > 를 이용하면 >뒤에 나오는 h1만 선택하는 것이다.

- div:nth-child(숫자) 이 숫자는 몇번째child를 뜻하는 숫자이다.

6. 동위, 반응, 산태 선택자

- 동위 선택자

HTML 태그 계층구조를 고려하여 동등한 위치에 있는 태그요소를 선택한다.

Ex) h3~div { font-size : 10px }

~를 사용하면 h3와 동급인 태그 모두를 선택하여 CSS를 적용한다.

h3+div {font-size : 20px}

+를 사용하면 h3를 기준으로 했을 때 첫번 째로 나오는 태그만 선택하여 CSS를 적용한다.

- 반응 선택자

웹 사이트를 이용하는 사용자의 반응에 따라 HTML 태그 요소를 선택한다.

Ex) :hover ◇마우스가 태그 위에 올라왔을 때 선택된다.

.class명 : hover{ 속성값 } 이와같이 사용된다.

- 상태 선택자

HTML 태그 요소의 상태에 따라서 선택한다.

Ex) :focus ◇초점이 맞추어진 상태

:checked ◇input 태그중 checked 상태

마우스의 focus가 맞추어 졌을 때 상태 선택자가 실행이 된다.

checked의 경우 체크가 됐을 때 상태 선택자가 실행이 된다.

학습정리

속성 선택자 : HTML태그의 속성을 이용해서 요소를 선택한다.

부정 선택자 : 선택한 태그요소 외에 나머지 태그요소를 선택할 수 있다.

후손 및 자손 선택자 : HTML 태그의 계층구조를 이용해서 태그요소를 선택한다.

후손 : 하위 모든 태그 선택

자손 : 바로 아래 태그만 선택

9강 CSS3 속성 1 (가시상태 속성)

1. 단위

- CSS3에서 주로 사용되는 단위로 px, em, pt가 있다.

- px단위 이용방법

절대적으로 속성의 크기를 설정한다.

Ex) font-size : 12px;

%를 사용하면 절대적에서 상대적으로 변경된다.

- em단위 이용방법

상대적으로 속성의 크기를 설정한다.

default 값이 1.0 그러므로 1.0보다 작게하면 축소, 1.0보다 크게하면 확대이다.

Ex) font-size : 1.5em

모든 디바이스 환경을 고려했을 때 em이 상대적이기때문에 px보다 응용범위가 넓다.

- pt단위 이용방법

절대적으로 속성의 크기를 설정한다.

Ex) font-size : 16pt

2. display 속성

- HTML 요소를 화면에 출력하고, 제거하는 스타일 속성

- display 속성 이용방법

- display 속성값으로 none, block, inline, inline-block이 있다.

none : 브라우저 화면에 HTML요소를 제거

display : none;

화면에 출력을 하지 않는다

block : HTML요소를 block 타입으로 출력

display : block;

weight, height 값을 가진다.

inline : HTML요소를 inline타입으로 출력

display : inline;

inline 속성값을 사용하면 weight, height가 무시된다.

inline-block : 기본적으로 inline속성과 동일하고, 넓이(weight)와 높이(height)을 가질 수 있다.

display : inline-block;

3. visibility 속성

- display 속성과 비슷한 기능을 하며, 차이점을 확실하게 학습한다.

- visibility속성 이용방법

visibility 속성값으로 visible, hidder이 있다.

visible : HTML 요소를 출력한다. (default)

hidden : HTML요소를 출력하지 않는다.

Ex) visibility : hidden;

- display : none 과 visibility : hidden 비교

display : none → HTML 요소를 화면에 출력하지 않는다.

visibility : hidden → HTML 요소를 화면에 출력하지 않지만, 공간은 유지한다.

4. opacity 속성 (투명도)

- HTML 요소의 투명도를 조절할 수 있다.

- opacity 이용방법

0.0부터 1.0까지 투명도를 조절할 수 있따.

0.0 → 투명

1.0 → 불투명

Ex) opacity : 0.7;

학습정리

display 속성 : HTML 요소를 화면에 출력 또는 출력하지 안는다.

visibility 속성 : HTML요소를 화면에 출력 또는 출력하지 않는다. 출력하지 않더라도, HTML요소의 공간은 유지된다.

opacity 속성 : HTML 요소의 투명도를 설정할 수 있다. (0.0~1.0) [0.0 = 투명] [1.0 = 불투명]

10강 CSS3 속성2 (레이아웃 관련 속성)

1. width & height 속성

- 태그 요소의 가로와 세로 크기를 설정할 수 있다.

- width & height 이요방법

가로와 세로의 크기를 설정한다.

단위는 주로 px, %를 사용한다.

Ex) width : 200px; height : 100px;

2. margin & padding 속성

- 태그 요소의 여백과 관련한 속성

- margin 이용방법

margin 속성값으로 태그요소의 외곽 여백을 설정할 수 있다.

Ex) margin-top : 10px;

margin-right : 15px;

margin-bottom : 20px;

margin-left : 25px;

한번에 입력할 경우 margin : 10px, 15px, 20px, 25px; 로 적용된다.

상하와 좌우가 같을 경우 margin : 10px, 15px; 로 작성하면 상하는 10px, 좌우는 15px가 적용된다.

- padding 이용방법

padding 속성값으로 태그요소의 내부 여백을 설정할 수 있다.

Ex) padding-top : 10px;

padding-right : 15px;

padding - bottom : 20px;

padding - left : 25px;

한번에 입력하는 방법과 상하,좌우 방법은 padding도 똑같다.

3. 테두리 관련 속성

- 테두리 관련 속성을 이용하면 전체 사이즈의 크기를 변경할 수 있다.

- box-sizing 속성 이용방법

border-box와 content-box 속성값을 이용해서 테두리의 위치를 태그요소의 내부 또는 외부로 위치할 수 있다.

Ex) box-sizing : border-box, box-sizing : content-box

border-box의 경우 영역 내부, content-box의 경우 영역 외부에 해당된다.

- border속성 이용방법

border속성을 이용해서 태그요소의 테두리를 설정할 수 있다.

Ex) border-width : 5px;, border-style : solid;, border-color : #ff6a00;

border : 5px solid #ff6a00; (단축해서 사용하는 방법)

solid : 실선, dashed : 점선, dotted : 점

border-radius는 모서리를 둥굴게 하는 정도를 나타내는 속성값이다.

Ex) border-radius : 10px, 10px, 0px, 0px; (Top Right Bottom Left)

4. 배경 관련 속성

- HTML 요소의 배경을 지정할 수 있다.

- background-image 이용방법

태그요소에 배경 이미지를 지정할 수 있다.

Ex) background-image; 배경에 이미지를 넣는 방법

url('#');

background-size : 100%; (default값)

background-repeat : no-repeat; (repeat는 이미지가 반복되서 나타나게하는 것이다.

default로 repeat 값을 가진다.)

background-repeat : x-repeat (x축으로반복한다.)

background-repeat : y-repeat (y축으로 반복한다.)

background-attachment : fixed; (이미지를 한 자리에 고정하는 것, 즉 스크롤을 내려도 이미지는 고정된다.)

학습정리

width & height 속성 : HTML요소의 가로 및 세로의 크기를 설정한다.

margin&padding 속성 : HTML요소를 외부(margin) 및 내부(padding) 여백을 설정한다.

테두리 관련 속성 : HTML요소를 테두리의 두께와 모양을 설정한다.

배경 관련 속성 : HTML요소를 배경에 이미지를 설정한다.

11강 CSS3 속성 3 (위치 관련 및 알아두면 편리한 속성)

1. 폰트 관련 속성

- 폰트와 관련된 선택자

- 아무리 좋은 폰트라도 사용자 컴퓨터에서 해당 폰트가 없으면 안보인다.

- font-size, font-family 속성 이용방법

font-size : 폰트의 크기를 설정할 수 있다.

Ex) font-size : 2.0em

font-family : 폰트를 설정할 수 있다.

폰트가 없으면 브라우저 기본폰트가 사용된다.

Ex) font-family : MingLiU_HKSCS-ExtB

- font-style, font-weight, line-height 속성 이용방법

font-style : 폰트의 이택릭체를 설정할 수 있다.

Ex) font-style : italic;

font-weight : 폰트의 볼드체를 설정할 수 있다.

Ex) font-weight : bolder;

line-height : 행간 설정을 할 수 있다.

Ex) line-height : 20px;

- text-align, text-decoration 속성 이용방법

text-align : 폰트의 정렬을 설정할 수 있다.

Ex) text-align : right; (속성값으로 right, left, center가 있다.)

text-decoration : 폰트의 표시를 설정할 수 있다.

Ex) text-decoration : none; (none을 사용하면 하이퍼링크를 지울 수 있고, underline은 줄을 추가한다.)

2. position 속성

- 태그 요소의 위치를 설정하는 속성

- position 속성에는 4가지의 속성값이 있다.

static : default 속성값으로 특별히 설정하지 않으면 static이다.

Ex) position : static;

absolute : 절대좌표를 이용해서 위치를 설정한다.

Ex) position : absolute; top : 100px; left : 100px;

relative : 기본 위치를 기준으로 설정만큼 이동된다.

Ex) position : relative; top : 0; left : 100px;

fixed : 브라우저의 절대좌표를 기준으로 설정된다.

fixed를 사용하면 해당 요소를 스크롤을 내려도 고정되게 할 수 있다.

Ex) position : fixed; top : 100px; left : 100px;

z-index : z축 좌표로 겹치는 부분에서 숫자가 높으면 위로, 숫자가 작으면 아래로 표시된다.

3. overflow 속성

- overflow 속성은 내용이 태그 요소의 크기보다 클 때 설정할 수 있다.

- overflow 속성 이용방법

hidden과 scroll 속성값을 이용해서 넘치는 내용을 가리거나, 스크롤을 이용할 수 있다.

Ex) overflow : hidden, overflow : scroll

여기서 hidden을 사용하면 내용이 넘처도 scroll이 안 생긴다.

여기서 scroll을 사용하면 해당 요소에 scroll이 생긴다.

4. float 속성

- HTML 요소의 위치를 설정하는 속성, 주로 레이아수을 설정할 때 사용

- float 이용방법

left, right 속성값을 이용해서 HTML 요소를 정렬시킬 수 있다.

Ex) float : left(left값은 default로 가진다.), float : right;

하나의 요소에 float : left를 설정하면 이어져 오는 요소도 float : left 속성을 가지게 된다.

5. 그림자 속성

- HTML요소에 그림자를 설정할 수 있다.

- text-shadow 이용방법

태그요소에 그림자를 만들어준다.

Ex) text-shadow : 5px, 10px, 15px, black; (오른쪽거리, 아래쪽거리, 투명도, 색상)

6. 그라디언트

- 2가지 이상의 색을 표현 할 때 사용되는 속성

- 그라디언트 이용방법

http://colorzilla.com/gradient-editor/에 접속해서 쉽게 이용할 수 있다.

- vender prefix (벤더프리픽스)는 각 제조사마다 벤더프리픽스를 만들어 내가 쓰는 코드는 이렇게 써야 한다는 것을 명시하는 것이다.

-webkit 사파리, 크롬

-moz 파이어폭스

-o 오페라

-ms 인터넷 익스프롤러

없으면 표준 속성이다.

학습정리

폰트 관련 속성 : font-size, font-style, font-weight, line-height 등을 이용해서 폰트에 스타일 속성을 적용할 수 있다.

position 속성 : position 속성의 static, absolute, relative, fixed 속성값을 이용해서 html 요소의 위치를 설정할 수 있다.

float 속성 : float 속성의 left, right 속성값을 이용하면, html 요소의 정렬을 설정할 수 있다.

gradient 속성

CSS에서 gradient 속성은 설정하기 까다롭다. 따라서 http://colorzilla.com/gradient-deditor/에 접속하여 쉽게 gradient를 설정한다.

12강 CSS3 속성 4 (변형 속성 및 PC용 웹사이트 제작①)

1. Transition 관련 속성

- CSS를 이용한 HTML요소의 변형 기능

- transition-xx 속성 이용방법

transition-duration : 몇 초 동안 변형될지를 설정한다.

Ex) transition-duration : 3s → 변형이 3초 동안 이루어진다.

transition-delay : 몇 초 후에 재생될지를 설정한다.

Ex) transition-delay : 2s → 2초 후에 변형이 시작된다.

transition-property : 변형이 적용되는 속성을 설정한다.

transition-timing-function : 변형과 관련된 함수를 설정한다. :ease-in과 :ease-out라는 속성값이 있다.

:ease-in의 경우 변형되는 속도가 점점 빨라지는 것이며

:ease-out의 경우 변형되는 속도가 점점 느려지는 것이다.

- animation-xx 속성 이용방법

animation-duration : 몇 초 동안 애니메이션 될지를 설정한다.

Ex) animation-duration : 3s → 애니메이션이 3초 동안 이루어진다.

animation-delay : 몇 초 후에 애니메이션 될지를 설정한다.

Ex) animation-delay : 2s → 2초 후에 애니메이션이 시작된다.

animation-name : 애니메이션의 이름을 설정한다.

animation-timing-function : 애니메이션과 관련된 함수를 설정한다.

- 애니메이션을 설정할 때는

@keyframes (animation-name에서 설정한 이름값){

from { 속성값 }

to { 속성값 }

}

이와같이 설정한다.

- 애니메이션을 설정하는 속성 값중 transform : rotate(0deg~360deg); 를 사용하면 회전이 적용된다.

2. 웹 페이지 개요 및 레이아웃 구분

- 웹사이트의 레이아웃

우리는 다양한 웹사이트를 경험하고 있다.

하지만, 수많은 웹사이트의 레이아웃도 전체적으로 거의 비슷한 레이아웃을 가지고 있다.

3. 초기화

- 초기화란?

CSS를 작성하면서 가장 먼저 하는 작업은 초기화

초기화란 기본적인 설정(margin, padding, font-xx..) 등을 미리 설정해 두고 사용하는 것

*{ 기본적인 설정을 작성 } 이렇게 작성하는 것이 초기화이다.

Ex) a { text-decoration : none }

- Normalize.css란?

많이 사용하는 초기화 관련 스타일중 normalize.css는 브라우저간의 스타일을 동일하게 유지해주고 있다.

Download URL : http://neclolas.gethub.io/normalize.css/

4. 헤더 및 수평 메뉴 작성

www.yahoo.com를 통해서 전체적인 레이아웃을 만들어 본다.

width의 경우 100%로 잡았을 때 깨지는 경향이 있으니 99%를 잡는 것이 좋다.

학습정리

변형 및 애니메이션 : transition-xx, animation-xx 속성을 이용해서 HTML요소에 변형 및 애니메이션을 설정할 수 있다.

웹 페이지 레이아웃 : 지금까지 학습한 CSS속성들을 이용해서 헤더 및 수평메뉴를 만들 수 있다.

13강 CSS3 속성4 (PC용 웹사이트 제작②)

1. 본문 구성

2. 목록 구성

3. 푸터 구성

학습정리

웹 페이지 구조 파악 : 제작하려는 웹 페이지를 가로로 면을 분할하면 쉽게 제작할 수 있다.

14강 CSS3 규칙

1. @import 규칙

- CSS 파일에 또 다른 CSS파일의 설정을 사용하기 위한 규칙

- @import 규칙 사용방법

@import url( '또 다른 CSS 파일명' );

Ex) @import url('title.css');

- @import 규칙을 사용해서 다른 CSS파일의 설정을 사용

1. link를 대신할 수 있습니다.

2. <style> 태그 내부에 위치해야 합니다.

3. <style> 태그 상단에 위치해야 합니다.

2. @media 규칙

- 하나의 HTML 문서를 다양한 장치에서 서로 다르게 CSS를 설정할 수 있는 기능을 제공

- link 태그에 media 속성을 이용하여 상황에 따른 CSS를 적용하는 방법

link 태그에 media속성과 속성값을 이용해서 CSS를 구분한다.

Ex) <link rel="stylesheet" href="content_pc.css" media="screen" />(PC환경 화면)

- link태그 대신 @media 규칙을 이용하여 상황에 따른 CSS를 적용하는 방법

@media규칙을 이용해서 CSS를 구분한다.\

Ex) @media screen {...}

- @media속성을 이용해서 다양한 장치에 맞게 CSS를 설정

- 미디어 종류

all : 모든 미디어 타입

aural : 음성 합성 장치

braille : 정자 표시 장치

handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도

print : 인쇄 용도

projection : 프로젝터 표현 용도

screen : 컴퓨터 스크린을 위한 용도

tv : 음성과 영상이 동시 출력되는 TV와 같은 장치

embossed : 페이지에 인쇄된 점자 표시 장치

3. 웹 폰트

- 웹 폰트란?

인터넷만 열결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록 고안된 폰트

- 웹사이트를 방문하는 순간, 웹 폰트를 다운받아 웹사이트를 구성

link태그를 이용해서 사용하고, 웹 폰트의 URL을 속성값으로 사용한다.

Ex) <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

- 구글폰트에서 원하는 폰트를 검색을 한 후 원하는 소스코드만 복사 붙여넣기를 하면된다. 이는 CSS, JavaScript다 된다.

학습정리

@import 규칙 : 다른 CSS파일의 설정을 사용할 수 있다.

@media 규칙 : 다양한 장치에 따라 CSS설정을 다르게 할 수 있다.

웹 폰트 : link 태그와 href 속성을 이용해서 웹에 있는 폰트를 사용할 수 있다.

15강 모바일 웹페이지 개발 환경 및 뷰포트

1. 모바일 개발 환경

- IDE(Integrated Development Environment) 툴 설치

- Aptana Studio 설치 (Eclips가 더 좋음)

Nodejs_windows 설치 : http://go.aptana.com/installer_nodejs_windows

Aptana Studio 설치 : http://www.aptana.com

- Aptana 사용

프로젝트 및 웹 문서 만들고, 서버에서 확인

aptana 실행 및 workspace 변경

웹 프로젝트 생성

서버에 업로드 및 브라우저를 통한 확인

- 네이버에서 제공하는 코딩 전용서체를 사용하면 가독성이 뛰어나다

2. 뷰포트 개요 및 설정

- 모바일 환경에서 뷰포트의 개요와 설정에 대해서 학습한다.

- 뷰포트 개요

PC환경과 달리 모바일(스마트폰)환경에서는 디바이스마다의 해상도가 상이해서 PC환경의 웹 페이지가 모바일 환경에서는 매우 작게 보일 수 있음.

이를 해결하고자 뷰포트 기능을 사용함.

- 뷰포트 설정

width : 가로 넓이

Ex) width=device-width

initial-scale : 초기 확대 비율

Ex) initial-scale=1.0

user-scalable : 확대 및 축소 가능 여부

Ex) user-scalable=no

minimum-scale, maximum-scale : 최소, 최대 비율

Ex) minimum-scale=1.0, maximum-scale=2.0

뷰포트를 종합한 예

name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

3. 반응형과 뷰포트

- 뷰포트와 같이 모바일 환경에서 웹페이지를 효율적으로 출력하기 위해서 CSS를 사용하는 방벙이 있다. 긜고 이러한 방법을 흔히 반응형 웹이라고 한다.

- 반응형 웹

사용자의 디바이스 환경에 따라 CSS를 적용 (@media)

Web 문서 → pc.css

→ mobile.css

→ tablet.css

학습정리

개발 환경 : 본인에 맞는 IDE툴을 선택하여 사용하고, FTP를 이용해서 서버에 업로드함.

뷰포트란? : PC환경과 달리 모바일(스마트폰) 환경에서는 디바이스마다의 해상도가 상이해서 PC환경의 웹 페이지가 모바일 환경에서는 매우 작게 보일 수 있음. 이를 해결하기 위해 뷰포트를 사용함.

반응형 웹 : 뷰포트와 달리 CSS속성을 이용해서 디바이스의 종류에 따라서 적합한 CSS를 적용함.

16강 반응형 웹사이트 제작

1. 반응형 웹사이트 개요

- 반응형 웹이란?

최근 들어 다양한 디바이스가 등장

동일한 HTML문서가 해당 디바이스에서 최적화되어 보여야 할 필요성이 생김

하나의 HTML문서로 다양한 디바이스에 대응하기 위한 방법으로 미디어 쿼리를 이용한 방법이 반응형 웹이다.

<!DOCTYPE html>

<html>

<head>

<style>

/* 모바일 */

@media screen and (max-width : 767px) {

#wrap {

background-color : #ff0000;

color : #ffffff;

}

/* 태블렛 */

@media screen and (min-width : 768px) and (max-width : 959px) {

#wrap {

background-color : #00ff00;

color : #ffffff;

}

/* PC */

@media screen and (min-width : 960px) {

#wrap {

background-color : #0000ff;

color : #ffffff;

}

#wrap {

width : 80%;

border : 1px solid #cccccc;

margin : 0 auto;

}

#header {

width : 100%

border : 1px solid #cccccc;

}

#section {

width : 100%

border : 1px solid #cccccc;

}

#footer {

width : 100%

border : 1px solid #cccccc;

}

</style>

</head>

<body>

header

</div>

section

</div>

footer

</div>

</body>

</html>

2. 미디어 쿼리

- 다양한 디바이스의 특징을 이용해서 CSS를 분기할 수 있다. 즉, 하나의 HTML 문서를 가지고 다양한 출력 장치에 맞게 CSS를 적용할 수 있다.

PC : @media screen and (min-width : 960px)

모바일 : @media screen and (max-width : 767px)

태블릿 : @media screen and (min-width : 768px) and (max-width : 959px)

3. PC용 및 스마트용 웹사이트 제작

- 미디어 쿼리를 이용해서 간단하게 pc, 태블릿, 모바일용 웹사이트를 제작한다.

학습정리

반응형 웹 : 다양한 디바이스에 최적화된 CSS을 적용한 웹

미디어 쿼리 : CSS를 분기하여 하나의 HTML문서에 여러 개의 CSS를 적용할 수 있다.

17강 태블릿 레이아웃 제작

1. 태블릿 웹사이트 제작

- 태블릿 환경을 이해하고 그에 맞게 레이아웃을 설정합니다.

- 태블릿 환경에서 리스트의 경우 왼쪽에 두는 경우가 많거나 메뉴를 숨기는 기능을 사용한다.

- clear : both 속성을 사용하면 float로 영향을 받은 요소가 더이상 영향을 받지 않는다.

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin : 0; padding : 0; }

body { font-family : 'Segoe UI' }

li { list-style : none; }

# {

height : 100px; line-height : 100px; background-color : #75356c; color : #ffffff;

}

#header p{

text-align : center; font-size : 2em; font-weight : bold;

}

#wrap {

background-color:#e1e262;

overflow : hidden;

}

#wrap #nav_lnb {

width : 250px;

float : left;

}

#wrap #nav_lnb ul {

overflow : hidden;

}

#wrap #nav_lnb ul li a {

text-decoration : none; color : #ffffff;

padding : 20px;

display : block;

border-bottom : 1px dashed #dddddd;

}

#wrap #content_wrap {

background-color : #75356c;

width : 100%;

float : left;

margin-left : -250px;

}

#wrap #content_wrap #content {

padding : 20px;

padding-right : 270px;

}

#wrap #content_wrap #content div:nth-child(1) img {

float : left;

padding : 20px;

}

#wrap #content_wrap #content div:nth-child(2) img {

clear : both;

float : right;

padding : 20px;

}

</style>

</head>

<body>

<p>

Tablet PC Layout

</p>

</div>

<ul>

</ul>

</div>

<div>

<h2>SEOUL ANIMATION CENTER</h2>

<p>

Operation of a comprehensive support ...

</p>

</div>

</body>

</html>

학습정리

브라우저의 크기를 고려한 레이아웃 : 다양한 디바이스의 화면 크기를 고려해서 margin 속성을 응용하여 레이아웃을 설정합니다.

18강 유동형 웹사이트 제작

1. 유동형 레이아웃 개요

- 유동형웹은 레이아웃을 비롯한 모든 요소를 상대적인 크기로 지정함

- 유동형웹이란?

웹문서의 모든 요소를 %로 설정하여, 브라우저의 크기에 대응함.

반응형웹과 달리 css문서를 하나만 작성하면 됨.

실제적으로 세부적인 요소까지 상대적인 크기로 설정하기 어려운 점이 있음.

<!DOCTYPE html>

<html>

<head>

<style>

margin : 0;

padding : 0;

list-style : none;

color : #343434;

}

#wrap {

width : 80%;

margin : 0 auto;

border : 1px solid #cccccc;

box-sizing : border-box;

}

#wrap nav {

width : 100%;

}

#wrap nav ul {

overflow : hidden;

}

#wrap nav ul li {

float : left;

width : 20%;

border : 1px solid #ff0000;

box-sizing : border-box;

text-align : center;

}

#wrap section {

width : 100%;

background-color : #00ff00;

overflow : hidden;

}

#wrap section article {

float : left;

width : 70%;

}

#wrap section aside {

float : left;

width : 30%;

}

#wrap section aside div:nth-child(1) {

border : 1px solid #dddddd;

box-sizing : border-box;

text-align : center;

}

#wrap section aside div:nth-child(1) img {

max-width : 100%;

}

#wrap section aside div:nth-child(2) {

border : 1px solid #dddddd;

box-sizing : border-box;

text-align : center;

}

#wrap section aside div:nth-child(2) img {

min-width : 100%;

max-width : 100%;

}

#wrap section aside div:nth-child(3) {

border : 1px solid #dddddd;

box-sizing : border-box;

text-align : center;

}

#wrap section aside div:nth-child(3) img {

min-width : 100%;

}

</style>

</head>

<body>

logo img

</div>

</header>

<nav>

<ul>

</ul>

</nav>

<div>

article1

</div>

<div>

article2

</div>

</article>.

<aside>

</aside>

<aside>

</aside>

<aside>

</aside>

</section>

</body>

</html>

학습정리

유동형 웹 : 반응형 웹과 달리 html 요소의 상대적 크기를 이용해서 웹문서를 제작합니다. CSS문서를 하나만 만들어 사용하며, 세부적인 설정에 어려움이 있어 주로 심플한 레이아웃에 이용됩니다.

19강 그리드 시스템

1. 플러그인 설치

- 그리드 시스템 플러그인을 설치함.

- 플러그인 다운로드 및 설치

다운로드 : http://960.gs/

설치 : grid.css파일을 프로젝트 폴더로 이동함.

Column width 컬럼 두께

Number of columns 컬럼수

Gutter width 여백

2. 그리드 시스템을 이용한 레이아웃

- 그리드 시스템 플러그인을 이용해서 고정 & 가변 레이아웃을 제작함.

- <div class="clear"></div>를 사용하여 float 등 기존에 설정된 값을 clear 할 수 있다. 개행 효과도 있다.

<!DOCTYPE HTML>

<html>

<head>

<style>

li {

ist-style : none;

}

.wrap {

text-align : center;

}

.header .gnb {

text-align : center;

}

.header .gnb ul {

overflow : hidden;

}

.header .gnb ul li {

width : 15%

float : left; padding-left : 20px; padding-right : 20px;

}

.wrap .logo {

margin : 0 auto;

border : 1px solid #cccccc;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

<div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

li {

list-style : none;

}

.header {

}

.header .gnb ul {

overflow : hidden;

}

.header .gnb ul li {

float : left

width : 20%;

}

.logo {

margin : 0 auto;

border : 1px solid #cccccc;

width : 200px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

LOGO

</div>

</div>

</body>

</html>

학습정리

그리드 시스템 : 지금까지 살펴본 예제들을 보면 전체적인 레이아웃을 개발자가 처음부터 만들어야 했습니다. 이러한 수고를 조금 줄여주고자 개발된 플러그인이 있습니다. 몇 가지 계산과 규칙만 알고 있다면 개발자는 쉽게 전체적인 레이아웃을 만들 수 있습니다.

20강 SPA(Single Page Application)

1.SPA란?

- Single Page Application이란 단일 페이지를 이용한 웹서비스를 구성함

- template를 사용하여 SPA를 만들 수가 있다.

- 명령을 하면 template가 변환하면서 페이지가 변경된다.

2. SPA 프레임웍

- 프레임웍이란?

- 다양한 SPA 프레임웍이 존재한다.

Sammy.js : http://sammyis.org/

Backbone.js : http://backboneis.org/

Knockout.js : http://knockoutjs.com/

Angular.js : https://angularjs.org/ (구글에서 만듬, 유명함)

- MVC 란?

Model : 사용자 데이터를 서버로 보내거나 데이터 베이스를 연결시켜주는 역할

View : HTML을 뿌려주는 것

Controller : 사용자로부터 어떤 요청이 들어왔는지 확인하는 것

3. SPA를 활용한 웹페이지 제작

- Sammy.js을 이용해서 SPA웹을 구성합니다.

- SPA 웹서비스 구성

라우트 → Main_template

→ Register_template

→ Login_template

라우트는 template를 고르는 역할을 한다.

학습정리

SPA란? : 기존의 웹서비스 구성은 여러 개의 html이 서버와 통신하는 방식이다. SPA는 하나의 페이지만을 이용해서 변경되는 정보만을 가공하여 미리 만들어 놓은 틀(템플릿)을 이용해서 정보를 출력한다.

'Legend 개발자 > T아카데미' 카테고리의 다른 글

UX/UI 기획 (0)	2017.09.04
jQuery (JavaScript) (0)	2017.09.02
컴퓨터 알고리즘 중급 (0)	2017.08.31
JavaScript (0)	2017.08.30
컴퓨터 알고리즘 초급 (0)	2017.08.10

Write Thinking

카테고리

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

링크

글 보관함

달력

82025 이전 다음

HTML&CSS

'Legend 개발자 > T아카데미' 카테고리의 다른 글

티스토리툴바