PowerPoint 프레젠테이션
Download
Report
Transcript PowerPoint 프레젠테이션
HTML & CSS
겉핥기
2012 SUMMER SPARCS
PANDA
SPARCS 11
잉여킹
@Pandanism
HTML
Hyper Text Markup Language
HTML
Hyper Text Markup Language
웹브라우저에서 웹페이지와 기타 정보
를 보여주기 위한 markup language
어디서많이본것
<html>
<head>
<title> 팬더홈 </title>
</head>
<body>
안녕하세요. <br>
팬더홈입니다. <br>
<img src=“panda.jpg”> <br>
<a href=“http://sparcs.org”> SPARCS </a>
</body>
</html>
HTML tags
< , > , 태그이름 으로 이루어지며,
보통 시작태그와 종료태그가 한 쌍을 이룬다.
<tagname> 글, 이미지 등의 hypertext </tagname>
시작태그
종료태그
HTML elements
Tag를 포함한
시작태그와 종료태그 사이에 있는 모든 것들.
<tagname> 글, 이미지 등의 hypertext </tagname>
element
HTML structure
html
<html>
<head>
중략1
</head>
<body>
중략2
</body>
</html>
head
중략1
body
중략2
(실제로 보이는 영역)
그래서뭘쓰나요
name=“value”
<span style="color:#ff0062"> 핫핑크로 보입니다</span>
<strong> 강조됩니다 </strong>
<p style="font-size:20px">폰트 크기 20px의 paragraph</p>
<p style="text-align:center">텍스트를 중앙정렬 했습니다.</p>
<p style="letter-spacing: -2px">자간을 줄여보았습니다. </p>
그래서뭘쓰나요
name=“value”
<span style="color:#ff0062"> 핫핑크로 보입니다</span>
<strong> 강조됩니다 </strong>
<p style="font-size:20px">폰트 크기 20px의 paragraph</p>
<p style="text-align:center">텍스트를 중앙정렬 했습니다.</p>
<p style="letter-spacing: -2px">자간을 줄여보았습니다. </p>
링크를걸어보자
<a href=“주소”>보여줄 말</a>
<a href=“http://sparcs.org”>스팍스</a>
<a href=“http://sparcs.org” target="_blank“>
<font size=16px>스팍스</font>
</a>
링크를걸어보자
<a href=“주소”>보여줄 말</a>
<a href=“http://sparcs.org”>스팍스</a>
<a href=“http://sparcs.org” target="_blank“>
<font size=16px>스팍스</font>
</a>
이미지를보여주자
<img src=“이미지 url”>
<img src=“panda.jpg”>
<img src=http://images.wikia.com/animals/images/1/19/
Giant_Panda.jpg>
이미지를보여주자
<img src=“이미지 url”>
<img src=“panda.jpg”>
<img src=http://images.wikia.com/animals/images/1/19/
Giant_Panda.jpg>
메뉴를만들자
<ul>
</ul>
<ol>
<li>메뉴는</li>
<li>이건</li>
<li>보통</li>
<li>번호가</li>
<li>이걸로씀</li>
<li>붙어나옴</li>
</ol>
메뉴를만들자
<ul>
</ul>
<ol>
<li>메뉴는</li>
<li>이건</li>
<li>보통</li>
<li>번호가</li>
<li>이걸로씀</li>
<li>붙어나옴</li>
</ol>
의미를 살린 태그
Heading
<h1> </h1>
<h2> </h2>
강조
<em></em>
<strong></strong>
의미를 살린 태그
Heading
<h1> </h1>
<h2> </h2>
강조
<em></em>
<strong></strong>
Doctype
<!DOCTYPE>을 선언해서 문서형식을 지정한다.
브라우저에게 이 document의 종류를 알려주는 역할.
<!DOCTYPE html>
HTML 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN“ ”http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 strict (<b> 등 markup태그 및 일부 속성 사용 불가)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 transitional (대부분의 태그 허용)
Meta tag
이 document에 대한 metadata(정보)를 제공함.
<head>
<meta name="description" content=“introduction to panda" />
<meta name="keywords" content=“panda, sparcs” />
<meta name="author" content=“Panda Cho" />
<meta http-equiv="content-type" content="text/html; charset=UTF8" />
</head>
charset
인코딩을 지정한다.
<head>
<meta name="author" content=“Panda Cho" />
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
</head>
charset
인코딩을 지정한다.
<head>
<meta name="author" content=“Panda Cho" />
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
</head>
CSS
Cascading Style Sheets
CSS
Cascading Style Sheets
HTML elements를 어떻게 보여줄 것인가
에 대한 정의만 따로 모아놓은 것.
CSS
HTML과 별개로 있는 external style sheets.
html에서 css파일을 불러와서 씀.
<head>
<link rel="stylesheet" type=
"text/css" href=“style.css" />
</head>
어쩌구.html
속성을 정의하는
애들이 잔뜩 써있음
style.css
Style을 분리한다
<div style="text-align: center; color: #ff0062; font-size:
20px;"> 핫핑크로 보입니다. 중정에 20px </div>
<div style="letter-spacing: -1px; font-size: 15px; text-
decoration: underline;"> 자간 -1px, 밑줄 속성을 줬고
크기는 15px </div>
Style을 분리한다
<div class=“pink”>
.pink {
text-align: center;
color: #ff0062;
핫핑크로 보입니다. 중정에 20px </div>
font-size: 20px;
}
<div class=“under”>
.under {
letter-spacing:
-1px;
자간 -1px, 밑줄 속성을 줬고 크기는
15px</div>
font-size: 15px;
text-decoration:
underline;
}
CSS 왜쓰나
유지보수가 쉽다
CSS에서 수정하면 전체 페이지에 적용됨
content와 style이 분리되어 있어서 수정이 편함
가벼움
중복되는 코드가 줄어든다.
CSS 어떻게쓰나
Selector {
attribute: value;
attribute: value;
attribute: value;
}
CSS 어떻게쓰나
body {
font-family: serif;
background-color: #7700e0;
color: #ffffff; }
a { text-decoration: none;
color: yellow;
font-size: 20px;}
ul { list-style: none; }
CSS 어떻게쓰나
body {
font-family: serif;
background-color: #7700e0;
color: #ffffff; }
a { text-decoration: none;
color: yellow;
font-size: 20px;}
ul { list-style: none; }
id, class
id는 포괄적으로 의미적 구분을 할 때,
class는 좀 더 실제적인 구분을 할 때 쓰인다.
<div id=“menu”>
<div class=“main_menu”>
…
</div>
<div class=“sub_menu”>
…
</div>
</div>
html
#menu { list-style: none ;
font-family: 맑은고딕, serif; }
.main_menu { font-size: 20px;
color: red; }
.sub_menu { font-size: 13px; }
css
일단 div나 쓰자
레이아웃 등 덩어리의 기본은 div.
div
<div id=“이름”> … </div>
div
<div class=“이름”> … </div>
div
table은 약간 느리고
frame은 각각이 별개의 html이라
자유도/표현력이 떨어짐.
div
div
Padding, margin
padding: 안쪽 여백
m
a
border: 테두리
margin: 바깥 여백
r
g
i
n
border
p
a
d
d
i
n
g
내용물은 padding 안쪽에
여백 없이 꽉 채워지는 느낌
으로 있음. Padding이 0이면
border와 글자가 거의 맞닿
을 정도.
Padding, margin
<div id="content">
<div class="intro">
#content {
margin: 10px 7px;
padding: 15px;
background-color: white; }
.intro {
background-color:
<span class="hotpink"> 핫핑크로 보입니다. 패딩을 안주면
이꼴남</span>
#dddddd;
</div>
font-weight: bold; }
<div class="main">
.main {
<p class="center">텍스트를 중앙정렬 했습니다. 얜 패딩 5px씩.</p>
padding: 5px;
<p> 얘는 center 이름이 안붙은 plain한 paragraph</p>
font-size: 15px;
<span class="hotpink"> 아무때나 hotpink 이름만 주면 핫핑크가
됨</span>
border: 1px
solid black; }
<span> 그냥 쓰면 기존에 정해진 색깔로</span>
.sub {
</div>
padding: 10px;
<div class="sub">
margin: 10px 5px;
<a href="http://sparcs.org">스팍스로 가는 링크</a>
이건 padding에 margin도 좀 들어감.
</div>
</div>
background-color:
#dddddd; }
.hotpink { color: #ff0062; }
.center { text-align: center; }
Padding, margin
<div id="content">
<div class="intro">
#content {
margin: 10px 7px;
padding: 15px;
background-color: white; }
.intro {
background-color:
<span class="hotpink"> 핫핑크로 보입니다. 패딩을 안주면
이꼴남</span>
#dddddd;
</div>
font-weight: bold; }
<div class="main">
.main {
<p class="center">텍스트를 중앙정렬 했습니다. 얜 패딩 5px씩.</p>
padding: 5px;
<p> 얘는 center 이름이 안붙은 plain한 paragraph</p>
font-size: 15px;
<span class="hotpink"> 아무때나 hotpink 이름만 주면 핫핑크가
됨</span>
border: 1px
solid black; }
<span> 그냥 쓰면 기존에 정해진 색깔로</span>
.sub {
</div>
padding: 10px;
<div class="sub">
margin: 10px 5px;
<a href="http://sparcs.org">스팍스로 가는 링크</a>
이건 padding에 margin도 좀 들어감.
</div>
</div>
background-color:
#dddddd; }
.hotpink { color: #ff0062; }
.center { text-align: center; }
block, inline
block: 아래위로 여백을 가지며
같은 줄에 다른 element가 못 옴. div, p, h 등.
inline: 같은 줄에 여러 element가 옴. span 등.
display: block;
block
display: inline;
block
속성을 줘서 바꿀 수도 있다.
inline
inline
모바일아라
<div id="header"> …
<div id="nav">
<ul>..</ul>
</div>
</div>
<div id="contentWrap">
<div class="userInfo"> …. </div>
<div id="sec_tb"> <div class="h_area">.. </div>
<div class="tb_list"> <ul>…</ul> </div>
</div>
<div id="sec_wb">
<div class="h_area"> …. </div>
<div class="wb_list"> <ul>…</ul> </div>
</div>
<div id="sec_hot">
….
모바일아라
div id: header
<div id="header"> …
<div id="nav">
<ul>..</ul>
div id: nav </div>
</div>
<div id="contentWrap">div id: userInfo
<div class="userInfo"> …. </div>
div <div
class:class="h_area">..
h_area
<div id="sec_tb">
</div>
<div class="tb_list"> <ul>…</ul> </div>
div class:
sec_tb
</div>
<div id="sec_wb">
<div class="h_area"> …. </div>
div class: tb_list
<div class="wb_list"> <ul>…</ul> </div>
</div>
<div id="sec_hot">
….
div id:
content_wrap
HTML5, CSS3
아직 개발 및 적용 진행 중
나으리…웹표준…웹표준 좀….
IE 강제 업데이트 빨리 현기증나여
ASSIGNMENT
자기소개 페이지
- 이름, 사진, 소개글 포함
내소개
링크 페이지
- 자주가는 사이트 3개
내용
메뉴는 list를 사용.
메뉴와 내용은 서로 다른 division으로.
모든 style은 CSS에 담을 것.
링크
References
구글링하거나 여기서 찾으세요
http://www.w3schools.com/
호떡 세미나
http://sparcs.org/seminar/#hodduc-20110504_1
끝
감사합니다