html & css 겉핥기

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>

http://bit.sparcs.org/~panda/seminar/html_1.html

< , > , 태그이름 으로 이루어지며 ,

보통 시작태그와 종료태그가 한 쌍을 이룬다 .

<tagname> 글 , 이미지 등의 hypertext </tagname>

HTML tags

시작태그 종료태그

Tag 를 포함한시작태그와 종료태그 사이에 있는 모든 것들 .

<tagname> 글 , 이미지 등의 hypertext </tagname>

HTML ele-ments

element

<html>

<head>

중략 1

</head>

<body>

중략 2

</body>

</html>

HTML struc-ture

중략 1

head

html

중략 2

( 실제로 보이는 영역 )

body

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>

그래서 뭘 쓰나요

http://bit.sparcs.org/~panda/seminar/html_color.html

<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>

링크를 걸어보자

http://bit.sparcs.org/~panda/seminar/html_link.html

<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>

이미지를 보여주자

http://bit.sparcs.org/~panda/seminar/html_img.html

<ul>

<li> 메뉴는 </li>

<li> 보통 </li>

<li> 이걸로씀 </li>

</ul>

메뉴를 만들자

<ol>

<li> 이건 </li>

<li> 번호가 </li>

<li> 붙어나옴 </li>

</ol>

http://bit.sparcs.org/~panda/seminar/html_list.html

Heading

<h1> </h1>

<h2> </h2>

강조 <em></em>

<strong></strong>

의미를 살린 태그

<!DOCTYPE> 을 선언해서 문서형식을 지정한다 .

브라우저에게 이 document 의 종류를 알려주는 역할 .

Doctype

<!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 ( 대부분의 태그 허용 )

이 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=UTF-8" />

</head>

Meta tag

인코딩을 지정한다 .

<head>

<meta name="author" content=“Panda Cho" />

<meta http-equiv="content-type" content="text/

html; charset=UTF-8" />

</head>

charset

CSS

Cascading Style Sheets

CSS

Cascading Style Sheets

HTML elements 를 어떻게 보여줄 것인가에 대한 정의만 따로 모아놓은 것 .

HTML 과 별개로 있는 external style sheets.

html 에서 css 파일을 불러와서 씀 .

CSS

<head><link rel="stylesheet"

type= "text/css" href=“style.css" /></head>

속성을 정의하는 애들이 잔뜩 써있음

어쩌구 .html style.css

<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”>

핫핑크로 보입니다 . 중정에 20px </div>

<div class=“under”>

자간 -1px, 밑줄 속성을 줬고 크기는 15px</

div>

Style 을 분리한다

.pink { text-align: center; color: #ff0062; font-size: 20px;

}.under {

letter-spacing: -1px; font-size: 15px; text-decoration: underline;

}

유지보수가 쉽다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 어떻게 쓰나

id 는 포괄적으로 의미적 구분을 할 때 ,

class 는 좀 더 실제적인 구분을 할 때 쓰인다 .

id, class

<div id=“menu”><div

class=“main_menu”>…

</div><div class=“sub_menu”>

…</div>

</div>

#menu { list-style: none ;font-family: 맑은고딕 ,

serif; }

.main_menu { font-size: 20px; color: red; }

.sub_menu { font-size: 13px; }

html css

레이아웃 등 덩어리의 기본은 div.

<div id=“ 이름” > … </div>

<div class=“ 이름” > … </div>

table 은 약간 느리고 frame 은 각각이 별개의 html 이라 자유도 / 표현력이 떨어짐 .

일단 div 나 쓰자

div

div

div div

div

padding: 안쪽 여백border: 테두리margin: 바깥 여백

Padding, margin

margin

border

내용물은 padding 안쪽에 여백 없이 꽉 채워지는 느낌으로 있음 . Padding 이 0 이면 border 와 글자가 거의 맞닿을 정도 .

padding

<div id="content">

<div class="intro">

<span class="hotpink"> 핫핑크로 보입니다 . 패딩을 안주면 이꼴남</span>

</div>

<div class="main">

<p class="center">텍스트를 중앙정렬 했습니다 . 얜 패딩 5px씩 .</p>

<p> 얘는 center 이름이 안붙은 plain한 paragraph</p>

<span class="hotpink"> 아무때나 hotpink 이름만 주면 핫핑크가 됨 </span>

<span> 그냥 쓰면 기존에 정해진 색깔로 </span>

</div>

<div class="sub">

<a href="http://sparcs.org"> 스팍스로 가는 링크</a>

이건 padding 에 margin 도 좀 들어감 .

</div>

</div>

Padding, margin

#content {

margin: 10px 7px;

padding: 15px;

background-color:

white; }

.intro {

background-color: #d-

ddddd;

font-weight: bold; }

.main {

padding: 5px;

font-size: 15px;

border: 1px solid black; }

.sub {

padding: 10px;

margin: 10px 5px;


ddddd; }

.hotpink { color: #ff0062; }

.center { text-align:

center; }

<div id="content">

<div class="intro">

<span class="hotpink"> 핫핑크로 보입니다 . 패딩을 안주면 이꼴남</span>

</div>

<div class="main">

<p class="center">텍스트를 중앙정렬 했습니다 . 얜 패딩 5px씩 .</p>

<p> 얘는 center 이름이 안붙은 plain한 paragraph</p>

<span class="hotpink"> 아무때나 hotpink 이름만 주면 핫핑크가 됨 </span>

<span> 그냥 쓰면 기존에 정해진 색깔로 </span>

</div>

<div class="sub">

<a href="http://sparcs.org"> 스팍스로 가는 링크</a>

이건 padding 에 margin 도 좀 들어감 .

</div>

</div>

Padding, mar-gin

#content {

margin: 10px 7px;

padding: 15px;

background-color:

white; }

.intro {


ddddd;

font-weight: bold; }

.main {

padding: 5px;

font-size: 15px;

border: 1px solid black; }

.sub {

padding: 10px;

margin: 10px 5px;


ddddd; }

.hotpink { color: #ff0062; }

.center { text-align:

center; }

block: 아래위로 여백을 가지며 같은 줄에 다른 element 가 못 옴 . div, p, h 등 .

inline: 같은 줄에 여러 element 가 옴 . span 등 .

display: block;

display: inline;

속성을 줘서 바꿀 수도 있다 .

block, in-line

block

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="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: nav

div id: userInfo

div class: h_area

div class: tb_list

div id: con-tent_wrap

div class: sec_tb

아직 개발 및 적용 진행 중

나으리…웹표준…웹표준 좀… .

IE 강제 업데이트 빨리 현기증나여

HTML5, CSS3

자기소개 페이지- 이름 , 사진 , 소개글 포함

링크 페이지- 자주가는 사이트 3 개

메뉴는 list 를 사용 .

메뉴와 내용은 서로 다른 division 으로 .

모든 style 은 CSS 에 담을 것 .

ASSIGN-MENT

내소개 링크

내용

구글링하거나 여기서 찾으세요http://www.w3schools.com/

호떡 세미나http://sparcs.org/seminar/#hodduc-20110504_1

References

끝

감사합니다

html & css 겉핥기

Documents