3주 css basic

77
css WEB UI BASIC | 3주차

Upload: -

Post on 26-Jun-2015

328 views

Category:

Software


0 download

DESCRIPTION

WEB UI 3주. CSS Basic

TRANSCRIPT

Page 1: 3주 CSS Basic

cssWEB����������� ������������������  UI����������� ������������������  BASIC����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  3주차

Page 2: 3주 CSS Basic

목표웹페이지에����������� ������������������  style을����������� ������������������  어떻게����������� ������������������  적용하는지����������� ������������������  안다.����������� ������������������  

cascading과����������� ������������������  상속을����������� ������������������  이해하고����������� ������������������  있다����������� ������������������  

css의����������� ������������������  기본적인����������� ������������������  selector를����������� ������������������  다룰����������� ������������������  줄����������� ������������������  안다.����������� ������������������  

font,����������� ������������������  background����������� ������������������  등의����������� ������������������  기본����������� ������������������  속성을����������� ������������������  적용할����������� ������������������  줄����������� ������������������  안다����������� ������������������  

BOX����������� ������������������  MODEL을����������� ������������������  이해한다.����������� ������������������  

position����������� ������������������  으로����������� ������������������  내����������� ������������������  프로젝트의����������� ������������������  영역을����������� ������������������  만들����������� ������������������  수����������� ������������������  있다

Page 3: 3주 CSS Basic

Quiz����������� ������������������  

Page 4: 3주 CSS Basic

1)����������� ������������������  빨간����������� ������������������  색이����������� ������������������  되는����������� ������������������  부분은����������� ������������������  무엇인가요?,����������� ������������������  그����������� ������������������  이유도����������� ������������������  적어보세요.����������� ������������������  

!<div id="jisu">! <span>abc</span>! <span>efg</span>! <p>첫번째 단락</p>! <p>두번째 단락</p>!</div>

#jisu > p:nth-child(2) {! color : red;!}

2)����������� ������������������  다음의����������� ������������������  결과로����������� ������������������  어떤����������� ������������������  색이����������� ������������������  나올까요?����������� ������������������  이유는����������� ������������������  무엇인가요?����������� ������������������  .myClass { color : red; } !#myId { color : blue; }

1분반����������� ������������������  

Page 5: 3주 CSS Basic

2분반����������� ������������������  

1)����������� ������������������  아래를����������� ������������������  붉은����������� ������������������  색으로����������� ������������������  지정할����������� ������������������  수����������� ������������������  있는����������� ������������������  CSS를����������� ������������������  작성해보세요.����������� ������������������  

여러가지����������� ������������������  방법이����������� ������������������  있다면����������� ������������������  다����������� ������������������  작성합니다����������� ������������������  

그렇게����������� ������������������  작성한����������� ������������������  이유도����������� ������������������  적어주세요.

<body>!! <section>! <h2>단락정보</h2>!! ! <p>첫번째 단락입니다.</p>!! ! <p>두번째 단락입니다.</p>!! ! <p>세번째 단락입니다.</p>!! </section>!</body>

Page 6: 3주 CSS Basic

3분반����������� ������������������  

1) 다음의����������� ������������������  css에는����������� ������������������  몇가지����������� ������������������  문제점이����������� ������������������  있다.����������� ������������������  모두����������� ������������������  찾아����������� ������������������  수정하고����������� ������������������  이유를����������� ������������������  적으세요����������� ������������������  

결과는����������� ������������������  ‘두번째����������� ������������������  단락입니다’����������� ������������������  부분만����������� ������������������  붉은색으로����������� ������������������  나와야����������� ������������������  하며����������� ������������������  다른����������� ������������������  엘리먼트와는����������� ������������������  간

격이����������� ������������������  아래����������� ������������������  숫자(10)만큼����������� ������������������  있어야����������� ������������������  합니다.

<body>!! <section>! <h2>단락정보</h2>!! ! <p>첫번째 단락입니다.</p>!! ! <p>두번째 단락입니다.</p>!! ! <p>세번째 단락입니다.</p>!! </section>!</body>

#section h2 p:nth-child(2){!! padding : 10pt;! background-color : red!}

HTML CSS

Page 7: 3주 CSS Basic

숙제확인

HTML5����������� ������������������  Semantic����������� ������������������  TAG����������� ������������������  -����������� ������������������  nav,����������� ������������������  section����������� ������������������  의����������� ������������������  사용����������� ������������������  

ID����������� ������������������  이름����������� ������������������  공백����������� ������������������  

UL����������� ������������������  /����������� ������������������  LI����������� ������������������  의����������� ������������������  폭넓은����������� ������������������  사용����������� ������������������  

Class,����������� ������������������  id����������� ������������������  무조건����������� ������������������  필요한가요?

Page 8: 3주 CSS Basic

c s s ����������� ������������������   ����������� ������������������  ����������� ������������������  화면의����������� ������������������  디자인을����������� ������������������  입히다

Page 9: 3주 CSS Basic

CSS가����������� ������������������  없을����������� ������������������  때����������� ������������������  어떤지����������� ������������������  우린����������� ������������������  봤다.

Page 10: 3주 CSS Basic

C S S ����������� ������������������   적 용 하 기

Page 11: 3주 CSS Basic

span { color :red; }

selector(선택자) property value

Page 12: 3주 CSS Basic

style을����������� ������������������  HTML페이지에����������� ������������������  적용하는����������� ������������������  세����������� ������������������  가지����������� ������������������  방법����������� ������������������  

inline����������� ������������������  

internal����������� ������������������  

external����������� ������������������  

Page 13: 3주 CSS Basic

html����������� ������������������  태그����������� ������������������  안에다가����������� ������������������  <inline>����������� ������������������  

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> </head> !<body> <span style=”color:red;”> HELLO NEXT ! </span> </body> </html>

Page 14: 3주 CSS Basic

style����������� ������������������  태그로����������� ������������������  지정하기����������� ������������������  <internal>����������� ������������������  

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> <style> span {

color :red; }

</style> </head> !<body> <span> HELLO NEXT ! </span> </body> </html>

Page 15: 3주 CSS Basic

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> <link rel=”stylesheet” type=”text/css” href=”main.css” /> </head> !<body> <span> HELLO NEXT ! </span> </body> </html>

span { color :red;

} main.css

외부파일(.css)로����������� ������������������  지정하기����������� ������������������  <external>����������� ������������������  

Page 16: 3주 CSS Basic

어떤����������� ������������������  방법이����������� ������������������  왜����������� ������������������  더����������� ������������������  좋을까?

inline����������� ������������������  

internal����������� ������������������  

external

Page 17: 3주 CSS Basic

내����������� ������������������  프로젝트의����������� ������������������  

css����������� ������������������  파일을����������� ������������������  만들고����������� ������������������  분리해보자.

#wrap { color : pink; }

Page 18: 3주 CSS Basic

cascading

Page 19: 3주 CSS Basic

CSS는����������� ������������������  여러가지����������� ������������������  스타일정보를����������� ������������������  기반으로����������� ������������������  ����������� ������������������  최종적으로����������� ������������������  ‘경쟁’에����������� ������������������  의해서����������� ������������������  적절한����������� ������������������  스타일이����������� ������������������  반영된다.����������� ������������������  

Page 20: 3주 CSS Basic

span { color : red; } !span { color : blue; }

blue

Page 21: 3주 CSS Basic

span { color : red; } !span { color : blue; }

blue

동일하면����������� ������������������  나중에����������� ������������������  것

Page 22: 3주 CSS Basic

body > span { color : red; } !span { color : blue; }

red

Page 23: 3주 CSS Basic

body > span { color : red; } !span { color : blue; }

red

구체적인����������� ������������������  것이����������� ������������������  있다면����������� ������������������  먼저

Page 24: 3주 CSS Basic

#a { color : red; } !.b { color : blue; }

<div id="a" class=“b"> text.. </div>

red

Page 25: 3주 CSS Basic

id����������� ������������������  ����������� ������������������  >����������� ������������������  class����������� ������������������  >����������� ������������������  element

red

#a { color : red; } !.b { color : blue; }

<div id="a" class=“b"> text.. </div>

Page 26: 3주 CSS Basic

Google search ! ‘css specificity’

Page 27: 3주 CSS Basic

내����������� ������������������  프로젝트의����������� ������������������  

제일����������� ������������������  바깥쪽����������� ������������������  영역의����������� ������������������  넓이,높이를����������� ������������������  지정하자,����������� ������������������  ex)width����������� ������������������  :����������� ������������������  1000px;����������� ������������������  

미션

Page 28: 3주 CSS Basic

중앙정렬을����������� ������������������  해보자����������� ������������������  ����������� ������������������  (margin을����������� ������������������  이용한����������� ������������������  중앙정렬����������� ������������������  방법����������� ������������������  검색)

미션

Page 29: 3주 CSS Basic

상속

Page 30: 3주 CSS Basic

css����������� ������������������  속성은����������� ������������������  하위����������� ������������������  태그에����������� ������������������  상속된다.����������� ������������������  뒤에����������� ������������������  나오는����������� ������������������  box관련����������� ������������������  스타일은����������� ������������������  제외(border,����������� ������������������  padding,����������� ������������������  margin)

Page 31: 3주 CSS Basic

<body>����������� ������������������  

<div����������� ������������������  id=”jisu”>����������� ������������������  

����������� ������������������  <div>����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <span>����������� ������������������  span����������� ������������������  tag����������� ������������������  </span>����������� ������������������  

����������� ������������������  </div>����������� ������������������  

����������� ������������������  <span>����������� ������������������  span����������� ������������������  tag����������� ������������������  2����������� ������������������  </span>����������� ������������������  

</div>����������� ������������������  

<bod>

body����������� ������������������  {����������� ������������������  color����������� ������������������  :red����������� ������������������  }

Page 32: 3주 CSS Basic

CSS����������� ������������������  Selector

Page 33: 3주 CSS Basic

WEB����������� ������������������  UI����������� ������������������  개발이라는����������� ������������������  거..����������� ������������������  

DOM����������� ������������������  을����������� ������������������  찾고����������� ������������������  지우고����������� ������������������  바꾸고����������� ������������������  변경하고����������� ������������������  ..뭐����������� ������������������  그런거����������� ������������������  아니겠어요?����������� ������������������  !����������� ������������������  

Page 34: 3주 CSS Basic

WEB����������� ������������������  UI����������� ������������������  개발이라는����������� ������������������  거..����������� ������������������  

DOM����������� ������������������  을����������� ������������������  찾고����������� ������������������  지우고����������� ������������������  바꾸고����������� ������������������  변경하고����������� ������������������  ..뭐����������� ������������������  그런거����������� ������������������  아니겠어요?����������� ������������������  !����������� ������������������  

일단����������� ������������������  찾아야지.

Page 35: 3주 CSS Basic
Page 36: 3주 CSS Basic

css����������� ������������������  selector����������� ������������������  ����������� ������������������  HTML의����������� ������������������  요소를����������� ������������������  ����������� ������������������  

tag,����������� ������������������  id,����������� ������������������  class,����������� ������������������  html����������� ������������������  태그속성등을����������� ������������������  통해����������� ������������������  쉽게����������� ������������������  찾아주는����������� ������������������  방법����������� ������������������  

Page 37: 3주 CSS Basic

css����������� ������������������  selector����������� ������������������  ����������� ������������������  기본����������� ������������������  

Page 38: 3주 CSS Basic

element에����������� ������������������  style을����������� ������������������  지정하기����������� ������������������  위해서,����������� ������������������  ����������� ������������������  3가지����������� ������������������  기본����������� ������������������  선택자를����������� ������������������  사용할����������� ������������������  수����������� ������������������  있음����������� ������������������  

tag����������� ������������������  

id����������� ������������������  

class����������� ������������������  

Page 39: 3주 CSS Basic

tag로����������� ������������������  지정하기.����������� ������������������  

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> <style> span {

color :red; }

</style> </head> !<body> <span> HELLO NEXT ! </span> </body> </html>

Page 40: 3주 CSS Basic

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> <style> #spantag {

color :red; }

</style> </head> !<body> <span id=”spantag”> HELLO NEXT ! </span> </body> </html>

id로����������� ������������������  지정하기

Page 41: 3주 CSS Basic

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> <style> .spanClass {

color :red }

</style> </head> !<body> <span class=”spanClass”> HELLO NEXT ! </span> </body> </html>

class����������� ������������������  로����������� ������������������  지정하기

Page 42: 3주 CSS Basic

내����������� ������������������  프로젝트의����������� ������������������  

li에����������� ������������������  기본����������� ������������������  style을����������� ������������������  reset����������� ������������������  해주자.����������� ������������������  

원하는����������� ������������������  영역의����������� ������������������  글자색(color)을����������� ������������������  반영해보자.

미션

Page 43: 3주 CSS Basic

css����������� ������������������  selector����������� ������������������  ����������� ������������������  ����������� ������������������  다양한����������� ������������������  활용����������� ������������������  

Page 44: 3주 CSS Basic

id,class����������� ������������������  요소����������� ������������������  선택자와����������� ������������������  함께����������� ������������������  활용����������� ������������������  

!#myid {color : red}

div.myclassname { color : red}

Page 45: 3주 CSS Basic

그룹����������� ������������������  선택����������� ������������������  

h1, span, div { color :red }

h1, span, div#id {color : red}

h1. span, div.classname { color : red}

Page 46: 3주 CSS Basic

자식����������� ������������������  선택����������� ������������������  (����������� ������������������  >����������� ������������������  )

#jisu > span { color :red }

<div id=”jisu”>

<div>

<span> span tag </span>

</div>

<span> span tag 2 </span>

</div>

하위����������� ������������������  요소����������� ������������������  선택����������� ������������������  (공백)

#jisu span { color :red }

<div id=”jisu”>

<div>

<span> span tag </span>

</div>

<span> span tag 2 </span>

</div>

Page 47: 3주 CSS Basic

n번째����������� ������������������  자식요소를����������� ������������������  선택����������� ������������������  (nth-child)

#jisu����������� ������������������  >����������� ������������������  p:nth-child(2)����������� ������������������  {����������� ������������������  color����������� ������������������  :red����������� ������������������  }

<div id=”jisu”>!

<h2>단락 선택</h2>!

<p>첫번째 단락입니다</p>!

<p>두번째 단락입니다</p>!

<p>세번째 단락입니다</p>!

<p>네번째 단락입니다</p>!

</div>

어떤����������� ������������������  것이����������� ������������������  선택될까?

Page 48: 3주 CSS Basic

그밖의����������� ������������������  selector����������� ������������������  

Page 49: 3주 CSS Basic

미션아래����������� ������������������  접속해서,����������� ������������������  ����������� ������������������  속성����������� ������������������  선택자를����������� ������������������  사용해서����������� ������������������  ����������� ������������������  ‘nhn’����������� ������������������  문자열을����������� ������������������  포함하는����������� ������������������  link에만����������� ������������������  빨간색으로����������� ������������������  표시하게����������� ������������������  해보자.����������� ������������������  

http://jsbin.com/IVopopU/1/edit

Page 50: 3주 CSS Basic

미션다음그림과����������� ������������������  같이����������� ������������������  붉은배경이����������� ������������������  나오도록����������� ������������������  해보세요.����������� ������������������  (단.����������� ������������������  id����������� ������������������  selector를����������� ������������������  사용할����������� ������������������  수����������� ������������������  없습니다)

Page 51: 3주 CSS Basic

f o n t , ����������� ������������������   ����������� ������������������  

c o l o r , ����������� ������������������  

b a c k g r o u n d

Page 52: 3주 CSS Basic

font����������� ������������������  style����������� ������������������  선택����������� ������������������  font-family����������� ������������������  :����������� ������������������  ‘sans-serif’;����������� ������������������  

font-family����������� ������������������  :����������� ������������������  ‘굴림’,Gulim,����������� ������������������  Helvetica,sans-serif;����������� ������������������  

font-face라는����������� ������������������  걸����������� ������������������  사용하면����������� ������������������  web����������� ������������������  font를����������� ������������������  다운로드해서����������� ������������������  다양한����������� ������������������  font제공도����������� ������������������  가능.(ex>����������� ������������������  ‘google����������� ������������������  web����������� ������������������  font’)

font����������� ������������������  size����������� ������������������  선택����������� ������������������  기본����������� ������������������  :����������� ������������������  ����������� ������������������  16px����������� ������������������  (1em)����������� ������������������  

font-size����������� ������������������  :����������� ������������������  0.9em;����������� ������������������  

Page 53: 3주 CSS Basic

font의����������� ������������������  색깔을����������� ������������������  변경����������� ������������������  ����������� ������������������  color����������� ������������������  :����������� ������������������  red;����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  /*����������� ������������������  color����������� ������������������  name����������� ������������������  (google에서����������� ������������������  ‘css����������� ������������������  color����������� ������������������  names’����������� ������������������  를����������� ������������������  검색해보자)����������� ������������������  */����������� ������������������  

����������� ������������������  color����������� ������������������  :����������� ������������������  rgb(255,����������� ������������������  255,����������� ������������������  0);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  /*����������� ������������������  red,����������� ������������������  green,����������� ������������������  blue����������� ������������������  */����������� ������������������  

����������� ������������������  color����������� ������������������  :����������� ������������������  rgba����������� ������������������  (255,����������� ������������������  255,0,0.5);����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  /*����������� ������������������  red,����������� ������������������  green,����������� ������������������  blue,����������� ������������������  alpha����������� ������������������  */����������� ������������������  

����������� ������������������  color����������� ������������������  :����������� ������������������  #3344ff����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  /*����������� ������������������  16����������� ������������������  진수����������� ������������������  표기법����������� ������������������  */����������� ������������������  

����������� ������������������  color����������� ������������������  :����������� ������������������  #34f����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  /*����������� ������������������  16진수����������� ������������������  축약����������� ������������������  표기법����������� ������������������  */

색상의����������� ������������������  선택����������� ������������������  http://www.colorpicker.com/����������� ������������������  

Chrome����������� ������������������  개발자����������� ������������������  도구����������� ������������������  

Page 54: 3주 CSS Basic

미션

자신의����������� ������������������  프로젝트에����������� ������������������  임의����������� ������������������  폰트를����������� ������������������  설정하자.(ex)����������� ������������������  gulim����������� ������������������  적용)����������� ������������������  body����������� ������������������  태그에����������� ������������������  font����������� ������������������  크기를����������� ������������������  12로����������� ������������������  한다.����������� ������������������  하위����������� ������������������  엘리먼트에����������� ������������������  em을����������� ������������������  사용해서����������� ������������������  font����������� ������������������  size를����������� ������������������  조정해보자

Page 55: 3주 CSS Basic

background����������� ������������������  배경에����������� ������������������  이미지를����������� ������������������  넣을����������� ������������������  수����������� ������������������  있다.����������� ������������������  ����������� ������������������  

이미지를����������� ������������������  어디에����������� ������������������  어떻게����������� ������������������  넣는지에����������� ������������������  대한����������� ������������������  속성이����������� ������������������  있음.����������� ������������������  ����������� ������������������  

(윈도우����������� ������������������  바탕화면을����������� ������������������  변경했던����������� ������������������  걸����������� ������������������  기억해보자!)����������� ������������������  

background-color����������� ������������������  

background-image����������� ������������������  

background-position����������� ������������������  

background-repeat����������� ������������������  

!한����������� ������������������  줄로����������� ������������������  적용할����������� ������������������  수도����������� ������������������  있음����������� ������������������  background����������� ������������������  :����������� ������������������  #0000ff����������� ������������������  url(“.../gif”)����������� ������������������  no-repeat����������� ������������������  center����������� ������������������  top;����������� ������������������  

Page 56: 3주 CSS Basic

����������� ������������������   b o x

Page 57: 3주 CSS Basic

Box����������� ������������������  Model����������� ������������������  HTML의����������� ������������������  element는����������� ������������������  사각형����������� ������������������  박스의����������� ������������������  형태를����������� ������������������  가지며,����������� ������������������  

다음과����������� ������������������  같은����������� ������������������  속성을����������� ������������������  가진다

참고 : http://www.w3schools.com/css/css_boxmodel.asp

Page 58: 3주 CSS Basic

naver����������� ������������������  검색창의����������� ������������������  box����������� ������������������  확인하기����������� ������������������  개발자����������� ������������������  도구����������� ������������������  활용

Page 59: 3주 CSS Basic

element에����������� ������������������  ����������� ������������������  크기를����������� ������������������  지정하자.����������� ������������������  width����������� ������������������  :����������� ������������������  200px;����������� ������������������  

height����������� ������������������  :����������� ������������������  200px;����������� ������������������  

!width����������� ������������������  :����������� ������������������  50%;����������� ������������������  

height����������� ������������������  :����������� ������������������  50%;

Page 60: 3주 CSS Basic

element의����������� ������������������  테두리를����������� ������������������  부여하자.����������� ������������������  border����������� ������������������  :����������� ������������������  ???

next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이

border

content

Page 61: 3주 CSS Basic

미션

자신의����������� ������������������  프로젝트에����������� ������������������  

각����������� ������������������  영역별����������� ������������������  높이/넓이를����������� ������������������  설정하고����������� ������������������  

테두리를����������� ������������������  만들자.

Page 62: 3주 CSS Basic

padding����������� ������������������  ����������� ������������������  테두리와����������� ������������������  콘텐츠와의����������� ������������������  간격����������� ������������������  

padding-top����������� ������������������  

padding-right����������� ������������������  

padding-bottom����������� ������������������  ����������� ������������������  

padding-left����������� ������������������  

next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이

padding

content

border

margin

Page 63: 3주 CSS Basic

margin����������� ������������������  ����������� ������������������  다른����������� ������������������  element와의����������� ������������������  간격����������� ������������������  

padding과����������� ������������������  비슷한����������� ������������������  방법으로����������� ������������������  값을����������� ������������������  설정

next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이

content

margin

border

Page 64: 3주 CSS Basic

margin����������� ������������������  의����������� ������������������  특성����������� ������������������  !

인접한����������� ������������������  두����������� ������������������  개의����������� ������������������  block����������� ������������������  element가����������� ������������������  서로����������� ������������������  다른����������� ������������������  margin을����������� ������������������  가지고����������� ������������������  있다면?����������� ������������������  큰����������� ������������������  값을����������� ������������������  가진����������� ������������������  margin값이����������� ������������������  공유되어����������� ������������������  사용됨����������� ������������������  ����������� ������������������  

10px����������� ������������������  +����������� ������������������  20px����������� ������������������  =����������� ������������������  20px����������� ������������������  

!!

인접한����������� ������������������  두����������� ������������������  개의����������� ������������������  inline����������� ������������������  element의����������� ������������������  margin은?����������� ������������������  각각의����������� ������������������  margin����������� ������������������  의����������� ������������������  합으로����������� ������������������  표현된다.����������� ������������������  ����������� ������������������  

10px����������� ������������������  +����������� ������������������  20px����������� ������������������  =����������� ������������������  30px

Page 65: 3주 CSS Basic

margin,����������� ������������������  padding의����������� ������������������  다양한����������� ������������������  축약표기법����������� ������������������  

!

margin����������� ������������������  :����������� ������������������  0px����������� ������������������  0px����������� ������������������  0px����������� ������������������  10px;����������� ������������������  ����������� ������������������  (top����������� ������������������  ,����������� ������������������  right����������� ������������������  ,����������� ������������������  bottom,����������� ������������������  left)����������� ������������������  

margin����������� ������������������  :����������� ������������������  10px;����������� ������������������  ����������� ������������������  (네개의����������� ������������������  분면이����������� ������������������  모두����������� ������������������  10px)����������� ������������������  

margin����������� ������������������  :����������� ������������������  10px����������� ������������������  15px;����������� ������������������  ����������� ������������������  (top,����������� ������������������  bottom����������� ������������������  은����������� ������������������  10px����������� ������������������  ,����������� ������������������  ����������� ������������������  right,����������� ������������������  left는����������� ������������������  15px)

Page 66: 3주 CSS Basic

미션

자신의����������� ������������������  프로젝트에����������� ������������������  영역별로����������� ������������������  margin과����������� ������������������  padding을����������� ������������������  설정해보자.

Page 67: 3주 CSS Basic

Box����������� ������������������  Model����������� ������������������  깊게����������� ������������������  보기����������� ������������������  !

http://www.w3.org/TR/CSS2/visuren.html

Page 68: 3주 CSS Basic

p o s i t i o n

Page 69: 3주 CSS Basic

CSS����������� ������������������  -����������� ������������������  position����������� ������������������  ����������� ������������������  position은����������� ������������������  element를����������� ������������������  어떻게����������� ������������������  배치할����������� ������������������  것인가를����������� ������������������  결정.����������� ������������������  

!

static

absolute

relative

fixed

Page 70: 3주 CSS Basic

static����������� ������������������  ����������� ������������������  

!모든����������� ������������������  element����������� ������������������  의����������� ������������������  default����������� ������������������  값이다.����������� ������������������  ����������� ������������������  

문서의����������� ������������������  흐름대로����������� ������������������  위치가����������� ������������������  결정된다.

Page 71: 3주 CSS Basic

relative����������� ������������������  ����������� ������������������  

!원래����������� ������������������  위치에����������� ������������������  상대적인����������� ������������������  위치.

div:nth-child(2) {! position : relative;! top: 30px;! left: 30px;!}

30px

30px

Page 72: 3주 CSS Basic

absolute����������� ������������������  ����������� ������������������  

!절대적인����������� ������������������  위치이며����������� ������������������  문서의����������� ������������������  흐름에서����������� ������������������  제외.����������� ������������������  

기준점은����������� ������������������  상위element����������� ������������������  중����������� ������������������  static����������� ������������������  속성이����������� ������������������  아닌����������� ������������������  element����������� ������������������  

위치설정은����������� ������������������  top,����������� ������������������  bottom����������� ������������������  중����������� ������������������  한����������� ������������������  개와����������� ������������������  left,����������� ������������������  right����������� ������������������  중����������� ������������������  한개를����������� ������������������  선택해서����������� ������������������  설정����������� ������������������  

30px

30px

Page 73: 3주 CSS Basic

fixed����������� ������������������  ����������� ������������������  !진정한����������� ������������������  절대적인����������� ������������������  위치를����������� ������������������  차지����������� ������������������  

문서의����������� ������������������  흐름에서����������� ������������������  제외.����������� ������������������  

viewport(보이는����������� ������������������  화면)를����������� ������������������  기준으로����������� ������������������  위치값을����������� ������������������  가짐����������� ������������������  

http://www.nhnent.com/

Page 74: 3주 CSS Basic

relative����������� ������������������  속성의����������� ������������������  실제����������� ������������������  사용은,����������� ������������������  absolute속성을����������� ������������������  가진����������� ������������������  자식의����������� ������������������  기준점으로����������� ������������������  더����������� ������������������  많이����������� ������������������  활용됨.����������� ������������������  

absolute absolute

absolute

relative

Page 75: 3주 CSS Basic

각각의����������� ������������������  속성은����������� ������������������  무엇인가?����������� ������������������  

position ?

position ?

Page 76: 3주 CSS Basic

미션프로젝트의����������� ������������������  영역을����������� ������������������  position����������� ������������������  속성을����������� ������������������  활용해서����������� ������������������  원하는����������� ������������������  대로����������� ������������������  배치해보자.����������� ������������������  margin,����������� ������������������  padding����������� ������������������  으로����������� ������������������  간격을����������� ������������������  일정하게����������� ������������������  유지하고,����������� ������������������  width,����������� ������������������  height����������� ������������������  로����������� ������������������  크기를����������� ������������������  설정한다.����������� ������������������  

Page 77: 3주 CSS Basic

End ;-D