Upload
-
View
326
Download
0
Embed Size (px)
DESCRIPTION
WEB UI 3주. CSS Basic
Citation preview
cssWEB����������� ������������������ UI����������� ������������������ BASIC����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ 3주차
목표웹페이지에����������� ������������������ style을����������� ������������������ 어떻게����������� ������������������ 적용하는지����������� ������������������ 안다.����������� ������������������
cascading과����������� ������������������ 상속을����������� ������������������ 이해하고����������� ������������������ 있다����������� ������������������
css의����������� ������������������ 기본적인����������� ������������������ selector를����������� ������������������ 다룰����������� ������������������ 줄����������� ������������������ 안다.����������� ������������������
font,����������� ������������������ background����������� ������������������ 등의����������� ������������������ 기본����������� ������������������ 속성을����������� ������������������ 적용할����������� ������������������ 줄����������� ������������������ 안다����������� ������������������
BOX����������� ������������������ MODEL을����������� ������������������ 이해한다.����������� ������������������
position����������� ������������������ 으로����������� ������������������ 내����������� ������������������ 프로젝트의����������� ������������������ 영역을����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있다
Quiz����������� ������������������
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분반����������� ������������������
2분반����������� ������������������
1)����������� ������������������ 아래를����������� ������������������ 붉은����������� ������������������ 색으로����������� ������������������ 지정할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ CSS를����������� ������������������ 작성해보세요.����������� ������������������
여러가지����������� ������������������ 방법이����������� ������������������ 있다면����������� ������������������ 다����������� ������������������ 작성합니다����������� ������������������
그렇게����������� ������������������ 작성한����������� ������������������ 이유도����������� ������������������ 적어주세요.
<body>!! <section>! <h2>단락정보</h2>!! ! <p>첫번째 단락입니다.</p>!! ! <p>두번째 단락입니다.</p>!! ! <p>세번째 단락입니다.</p>!! </section>!</body>
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
숙제확인
HTML5����������� ������������������ Semantic����������� ������������������ TAG����������� ������������������ -����������� ������������������ nav,����������� ������������������ section����������� ������������������ 의����������� ������������������ 사용����������� ������������������
ID����������� ������������������ 이름����������� ������������������ 공백����������� ������������������
UL����������� ������������������ /����������� ������������������ LI����������� ������������������ 의����������� ������������������ 폭넓은����������� ������������������ 사용����������� ������������������
Class,����������� ������������������ id����������� ������������������ 무조건����������� ������������������ 필요한가요?
c s s ����������� ������������������ ����������� ������������������ ����������� ������������������ 화면의����������� ������������������ 디자인을����������� ������������������ 입히다
CSS가����������� ������������������ 없을����������� ������������������ 때����������� ������������������ 어떤지����������� ������������������ 우린����������� ������������������ 봤다.
C S S ����������� ������������������ 적 용 하 기
span { color :red; }
selector(선택자) property value
style을����������� ������������������ HTML페이지에����������� ������������������ 적용하는����������� ������������������ 세����������� ������������������ 가지����������� ������������������ 방법����������� ������������������
inline����������� ������������������
internal����������� ������������������
external����������� ������������������
html����������� ������������������ 태그����������� ������������������ 안에다가����������� ������������������ <inline>����������� ������������������
<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>NEXT !</title> </head> !<body> <span style=”color:red;”> HELLO NEXT ! </span> </body> </html>
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>
<!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>����������� ������������������
어떤����������� ������������������ 방법이����������� ������������������ 왜����������� ������������������ 더����������� ������������������ 좋을까?
inline����������� ������������������
internal����������� ������������������
external
내����������� ������������������ 프로젝트의����������� ������������������
css����������� ������������������ 파일을����������� ������������������ 만들고����������� ������������������ 분리해보자.
#wrap { color : pink; }
cascading
CSS는����������� ������������������ 여러가지����������� ������������������ 스타일정보를����������� ������������������ 기반으로����������� ������������������ ����������� ������������������ 최종적으로����������� ������������������ ‘경쟁’에����������� ������������������ 의해서����������� ������������������ 적절한����������� ������������������ 스타일이����������� ������������������ 반영된다.����������� ������������������
span { color : red; } !span { color : blue; }
blue
span { color : red; } !span { color : blue; }
blue
동일하면����������� ������������������ 나중에����������� ������������������ 것
body > span { color : red; } !span { color : blue; }
red
body > span { color : red; } !span { color : blue; }
red
구체적인����������� ������������������ 것이����������� ������������������ 있다면����������� ������������������ 먼저
#a { color : red; } !.b { color : blue; }
<div id="a" class=“b"> text.. </div>
red
id����������� ������������������ ����������� ������������������ >����������� ������������������ class����������� ������������������ >����������� ������������������ element
red
#a { color : red; } !.b { color : blue; }
<div id="a" class=“b"> text.. </div>
Google search ! ‘css specificity’
내����������� ������������������ 프로젝트의����������� ������������������
제일����������� ������������������ 바깥쪽����������� ������������������ 영역의����������� ������������������ 넓이,높이를����������� ������������������ 지정하자,����������� ������������������ ex)width����������� ������������������ :����������� ������������������ 1000px;����������� ������������������
미션
중앙정렬을����������� ������������������ 해보자����������� ������������������ ����������� ������������������ (margin을����������� ������������������ 이용한����������� ������������������ 중앙정렬����������� ������������������ 방법����������� ������������������ 검색)
미션
상속
css����������� ������������������ 속성은����������� ������������������ 하위����������� ������������������ 태그에����������� ������������������ 상속된다.����������� ������������������ 뒤에����������� ������������������ 나오는����������� ������������������ box관련����������� ������������������ 스타일은����������� ������������������ 제외(border,����������� ������������������ padding,����������� ������������������ margin)
<body>����������� ������������������
<div����������� ������������������ id=”jisu”>����������� ������������������
����������� ������������������ <div>����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <span>����������� ������������������ span����������� ������������������ tag����������� ������������������ </span>����������� ������������������
����������� ������������������ </div>����������� ������������������
����������� ������������������ <span>����������� ������������������ span����������� ������������������ tag����������� ������������������ 2����������� ������������������ </span>����������� ������������������
</div>����������� ������������������
<bod>
body����������� ������������������ {����������� ������������������ color����������� ������������������ :red����������� ������������������ }
CSS����������� ������������������ Selector
WEB����������� ������������������ UI����������� ������������������ 개발이라는����������� ������������������ 거..����������� ������������������
DOM����������� ������������������ 을����������� ������������������ 찾고����������� ������������������ 지우고����������� ������������������ 바꾸고����������� ������������������ 변경하고����������� ������������������ ..뭐����������� ������������������ 그런거����������� ������������������ 아니겠어요?����������� ������������������ !����������� ������������������
WEB����������� ������������������ UI����������� ������������������ 개발이라는����������� ������������������ 거..����������� ������������������
DOM����������� ������������������ 을����������� ������������������ 찾고����������� ������������������ 지우고����������� ������������������ 바꾸고����������� ������������������ 변경하고����������� ������������������ ..뭐����������� ������������������ 그런거����������� ������������������ 아니겠어요?����������� ������������������ !����������� ������������������
일단����������� ������������������ 찾아야지.
css����������� ������������������ selector����������� ������������������ ����������� ������������������ HTML의����������� ������������������ 요소를����������� ������������������ ����������� ������������������
tag,����������� ������������������ id,����������� ������������������ class,����������� ������������������ html����������� ������������������ 태그속성등을����������� ������������������ 통해����������� ������������������ 쉽게����������� ������������������ 찾아주는����������� ������������������ 방법����������� ������������������
css����������� ������������������ selector����������� ������������������ ����������� ������������������ 기본����������� ������������������
element에����������� ������������������ style을����������� ������������������ 지정하기����������� ������������������ 위해서,����������� ������������������ ����������� ������������������ 3가지����������� ������������������ 기본����������� ������������������ 선택자를����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있음����������� ������������������
tag����������� ������������������
id����������� ������������������
class����������� ������������������
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>
<!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로����������� ������������������ 지정하기
<!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����������� ������������������ 로����������� ������������������ 지정하기
내����������� ������������������ 프로젝트의����������� ������������������
li에����������� ������������������ 기본����������� ������������������ style을����������� ������������������ reset����������� ������������������ 해주자.����������� ������������������
원하는����������� ������������������ 영역의����������� ������������������ 글자색(color)을����������� ������������������ 반영해보자.
미션
css����������� ������������������ selector����������� ������������������ ����������� ������������������ ����������� ������������������ 다양한����������� ������������������ 활용����������� ������������������
id,class����������� ������������������ 요소����������� ������������������ 선택자와����������� ������������������ 함께����������� ������������������ 활용����������� ������������������
!#myid {color : red}
div.myclassname { color : red}
그룹����������� ������������������ 선택����������� ������������������
h1, span, div { color :red }
h1, span, div#id {color : red}
h1. span, div.classname { color : red}
자식����������� ������������������ 선택����������� ������������������ (����������� ������������������ >����������� ������������������ )
#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>
n번째����������� ������������������ 자식요소를����������� ������������������ 선택����������� ������������������ (nth-child)
#jisu����������� ������������������ >����������� ������������������ p:nth-child(2)����������� ������������������ {����������� ������������������ color����������� ������������������ :red����������� ������������������ }
<div id=”jisu”>!
<h2>단락 선택</h2>!
<p>첫번째 단락입니다</p>!
<p>두번째 단락입니다</p>!
<p>세번째 단락입니다</p>!
<p>네번째 단락입니다</p>!
</div>
어떤����������� ������������������ 것이����������� ������������������ 선택될까?
그밖의����������� ������������������ selector����������� ������������������
미션아래����������� ������������������ 접속해서,����������� ������������������ ����������� ������������������ 속성����������� ������������������ 선택자를����������� ������������������ 사용해서����������� ������������������ ����������� ������������������ ‘nhn’����������� ������������������ 문자열을����������� ������������������ 포함하는����������� ������������������ link에만����������� ������������������ 빨간색으로����������� ������������������ 표시하게����������� ������������������ 해보자.����������� ������������������
http://jsbin.com/IVopopU/1/edit
미션다음그림과����������� ������������������ 같이����������� ������������������ 붉은배경이����������� ������������������ 나오도록����������� ������������������ 해보세요.����������� ������������������ (단.����������� ������������������ id����������� ������������������ selector를����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 없습니다)
f o n t , ����������� ������������������ ����������� ������������������
c o l o r , ����������� ������������������
b a c k g r o u n d
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;����������� ������������������
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����������� ������������������ 개발자����������� ������������������ 도구����������� ������������������
미션
자신의����������� ������������������ 프로젝트에����������� ������������������ 임의����������� ������������������ 폰트를����������� ������������������ 설정하자.(ex)����������� ������������������ gulim����������� ������������������ 적용)����������� ������������������ body����������� ������������������ 태그에����������� ������������������ font����������� ������������������ 크기를����������� ������������������ 12로����������� ������������������ 한다.����������� ������������������ 하위����������� ������������������ 엘리먼트에����������� ������������������ em을����������� ������������������ 사용해서����������� ������������������ font����������� ������������������ size를����������� ������������������ 조정해보자
background����������� ������������������ 배경에����������� ������������������ 이미지를����������� ������������������ 넣을����������� ������������������ 수����������� ������������������ 있다.����������� ������������������ ����������� ������������������
이미지를����������� ������������������ 어디에����������� ������������������ 어떻게����������� ������������������ 넣는지에����������� ������������������ 대한����������� ������������������ 속성이����������� ������������������ 있음.����������� ������������������ ����������� ������������������
(윈도우����������� ������������������ 바탕화면을����������� ������������������ 변경했던����������� ������������������ 걸����������� ������������������ 기억해보자!)����������� ������������������
background-color����������� ������������������
background-image����������� ������������������
background-position����������� ������������������
background-repeat����������� ������������������
!한����������� ������������������ 줄로����������� ������������������ 적용할����������� ������������������ 수도����������� ������������������ 있음����������� ������������������ background����������� ������������������ :����������� ������������������ #0000ff����������� ������������������ url(“.../gif”)����������� ������������������ no-repeat����������� ������������������ center����������� ������������������ top;����������� ������������������
����������� ������������������ b o x
Box����������� ������������������ Model����������� ������������������ HTML의����������� ������������������ element는����������� ������������������ 사각형����������� ������������������ 박스의����������� ������������������ 형태를����������� ������������������ 가지며,����������� ������������������
다음과����������� ������������������ 같은����������� ������������������ 속성을����������� ������������������ 가진다
참고 : http://www.w3schools.com/css/css_boxmodel.asp
naver����������� ������������������ 검색창의����������� ������������������ box����������� ������������������ 확인하기����������� ������������������ 개발자����������� ������������������ 도구����������� ������������������ 활용
element에����������� ������������������ ����������� ������������������ 크기를����������� ������������������ 지정하자.����������� ������������������ width����������� ������������������ :����������� ������������������ 200px;����������� ������������������
height����������� ������������������ :����������� ������������������ 200px;����������� ������������������
!width����������� ������������������ :����������� ������������������ 50%;����������� ������������������
height����������� ������������������ :����������� ������������������ 50%;
element의����������� ������������������ 테두리를����������� ������������������ 부여하자.����������� ������������������ border����������� ������������������ :����������� ������������������ ???
next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이
border
content
미션
자신의����������� ������������������ 프로젝트에����������� ������������������
각����������� ������������������ 영역별����������� ������������������ 높이/넓이를����������� ������������������ 설정하고����������� ������������������
테두리를����������� ������������������ 만들자.
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
margin����������� ������������������ ����������� ������������������ 다른����������� ������������������ element와의����������� ������������������ 간격����������� ������������������
padding과����������� ������������������ 비슷한����������� ������������������ 방법으로����������� ������������������ 값을����������� ������������������ 설정
next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서 수업을 듣게 된다는 건 가슴설레는 일이
content
margin
border
margin����������� ������������������ 의����������� ������������������ 특성����������� ������������������ !
인접한����������� ������������������ 두����������� ������������������ 개의����������� ������������������ block����������� ������������������ element가����������� ������������������ 서로����������� ������������������ 다른����������� ������������������ margin을����������� ������������������ 가지고����������� ������������������ 있다면?����������� ������������������ 큰����������� ������������������ 값을����������� ������������������ 가진����������� ������������������ margin값이����������� ������������������ 공유되어����������� ������������������ 사용됨����������� ������������������ ����������� ������������������
10px����������� ������������������ +����������� ������������������ 20px����������� ������������������ =����������� ������������������ 20px����������� ������������������
!!
인접한����������� ������������������ 두����������� ������������������ 개의����������� ������������������ inline����������� ������������������ element의����������� ������������������ margin은?����������� ������������������ 각각의����������� ������������������ margin����������� ������������������ 의����������� ������������������ 합으로����������� ������������������ 표현된다.����������� ������������������ ����������� ������������������
10px����������� ������������������ +����������� ������������������ 20px����������� ������������������ =����������� ������������������ 30px
margin,����������� ������������������ padding의����������� ������������������ 다양한����������� ������������������ 축약표기법����������� ������������������
!
margin����������� ������������������ :����������� ������������������ 0px����������� ������������������ 0px����������� ������������������ 0px����������� ������������������ 10px;����������� ������������������ ����������� ������������������ (top����������� ������������������ ,����������� ������������������ right����������� ������������������ ,����������� ������������������ bottom,����������� ������������������ left)����������� ������������������
margin����������� ������������������ :����������� ������������������ 10px;����������� ������������������ ����������� ������������������ (네개의����������� ������������������ 분면이����������� ������������������ 모두����������� ������������������ 10px)����������� ������������������
margin����������� ������������������ :����������� ������������������ 10px����������� ������������������ 15px;����������� ������������������ ����������� ������������������ (top,����������� ������������������ bottom����������� ������������������ 은����������� ������������������ 10px����������� ������������������ ,����������� ������������������ ����������� ������������������ right,����������� ������������������ left는����������� ������������������ 15px)
미션
자신의����������� ������������������ 프로젝트에����������� ������������������ 영역별로����������� ������������������ margin과����������� ������������������ padding을����������� ������������������ 설정해보자.
Box����������� ������������������ Model����������� ������������������ 깊게����������� ������������������ 보기����������� ������������������ !
http://www.w3.org/TR/CSS2/visuren.html
p o s i t i o n
CSS����������� ������������������ -����������� ������������������ position����������� ������������������ ����������� ������������������ position은����������� ������������������ element를����������� ������������������ 어떻게����������� ������������������ 배치할����������� ������������������ 것인가를����������� ������������������ 결정.����������� ������������������
!
static
absolute
relative
fixed
static����������� ������������������ ����������� ������������������
!모든����������� ������������������ element����������� ������������������ 의����������� ������������������ default����������� ������������������ 값이다.����������� ������������������ ����������� ������������������
문서의����������� ������������������ 흐름대로����������� ������������������ 위치가����������� ������������������ 결정된다.
relative����������� ������������������ ����������� ������������������
!원래����������� ������������������ 위치에����������� ������������������ 상대적인����������� ������������������ 위치.
div:nth-child(2) {! position : relative;! top: 30px;! left: 30px;!}
30px
30px
absolute����������� ������������������ ����������� ������������������
!절대적인����������� ������������������ 위치이며����������� ������������������ 문서의����������� ������������������ 흐름에서����������� ������������������ 제외.����������� ������������������
기준점은����������� ������������������ 상위element����������� ������������������ 중����������� ������������������ static����������� ������������������ 속성이����������� ������������������ 아닌����������� ������������������ element����������� ������������������
위치설정은����������� ������������������ top,����������� ������������������ bottom����������� ������������������ 중����������� ������������������ 한����������� ������������������ 개와����������� ������������������ left,����������� ������������������ right����������� ������������������ 중����������� ������������������ 한개를����������� ������������������ 선택해서����������� ������������������ 설정����������� ������������������
30px
30px
fixed����������� ������������������ ����������� ������������������ !진정한����������� ������������������ 절대적인����������� ������������������ 위치를����������� ������������������ 차지����������� ������������������
문서의����������� ������������������ 흐름에서����������� ������������������ 제외.����������� ������������������
viewport(보이는����������� ������������������ 화면)를����������� ������������������ 기준으로����������� ������������������ 위치값을����������� ������������������ 가짐����������� ������������������
http://www.nhnent.com/
relative����������� ������������������ 속성의����������� ������������������ 실제����������� ������������������ 사용은,����������� ������������������ absolute속성을����������� ������������������ 가진����������� ������������������ 자식의����������� ������������������ 기준점으로����������� ������������������ 더����������� ������������������ 많이����������� ������������������ 활용됨.����������� ������������������
absolute absolute
absolute
relative
각각의����������� ������������������ 속성은����������� ������������������ 무엇인가?����������� ������������������
position ?
position ?
미션프로젝트의����������� ������������������ 영역을����������� ������������������ position����������� ������������������ 속성을����������� ������������������ 활용해서����������� ������������������ 원하는����������� ������������������ 대로����������� ������������������ 배치해보자.����������� ������������������ margin,����������� ������������������ padding����������� ������������������ 으로����������� ������������������ 간격을����������� ������������������ 일정하게����������� ������������������ 유지하고,����������� ������������������ width,����������� ������������������ height����������� ������������������ 로����������� ������������������ 크기를����������� ������������������ 설정한다.����������� ������������������
End ;-D