HTML DOCtype (not HTML5 but XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="generator" content="editplus" />
<meta http-equiv="content/type" content="text/html; charset=utf-8"/>
<title> HTML 기본구문 </title>
</head>
<body>
^!
</body>
</html>
HTML주의할 점 몇가지
1) h1 다음에 크기 때문에 h3를 쓰거나 하지 말 것
2) <p/>를 이용해서 칸을 띄우지 말 것
3) a href의 title은 웹표준을 위해서 넣어줘야 하는 것 같다.
a 링크예제
<a href="http://www.daum.net" title="다음포털">다음으로가기 </a>
4) <p id='footer'> 라고 썼었는데 이것도 tag가 생겼대 html5
5) font tag는 이제 없으니까 쓰지 말 것
One page reference
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="generator" content="editplus" />
<meta http-equiv="content/type" content="text/html; charset=utf-8"/>
<title> HTML 기본구문 </title>
<style type="text/css">
#blank {
height : 1000px;
width : 100px;
}
</style>
</head>
<body>
<a href = "#sometext" id="my_link"> My link </a>
<div id="blank"></div>
<p id="sometext"> The link </p>
<a href="#my_link"> Back to top </a>
</body>
</html>
목록
<dl>
<dt> 타이틀
<dd> 설명 (definition list)
이제는 잘 안쓰인다고 하는군?
HTML기본
1) 인라인 엘리먼트 – Element와 관련된 줄바꿈이 없다! (화면에 출력될 때 줄이 바뀌지 않고 같은 줄에 등장) (<a>, <abbr>, <area>, <audio>, <em>, <strong>, <select>, <span> <label>, <link>, <command>, <nav>, <mark>, <meter>, <time>)
2) 블록 엘리먼트(Block label element) – Element 전, 후에 줄바꿈을 둔다. 각 엘리먼트 위에 세로로 쌓인다. 블록 요소라는 것은 다른 블록 요소를 포함 할 수 있으며, 다른 블록 요소 안으로 들어갈 수 있는 요소를 말한다. (<article>, <aside>, <blockquote>, <body>, <br> ,<button>, <canvas> <header>, <hr>, <object>, <section>, <progress>, <table>, <video>)
HTML에서의 조건 IE 조건부
<!- -[if IE 6]> <link rel=”stylesheet” type=”text/css” href=”ie6style.css” /> <![endif]- -> 조건부 주석은 HTML에만 넣을 수 있지만, 스타일 시트를 IE의 특정 버전에서만 인식하게 하려면 HTML 문서의 head 안에 link요소 앞에 조건부 주석을 넣는다.
- [if IE] – IE5 이상의 모든 버전을 대상으로 한다.
- [if IE 5], [if IE 7]등 - IE라는 글자와 버전 숫자 사이에 빈칸(공백)이 있게. 특정 브라우저 버전 한 개를 대상으로 한다.
- [if gt IE 6] – gt는 초과(greater than)라는 뜻. 이 예는 IE6 초과 버전
- [if gte IE 7] – gte는 이상(greater than or equal)라는 뜻. 이 예는 IE7 이상
- [if lt IE 8]
– lt는 미만(less than)이라는 뜻. 이 예는 IE8 미만 버전을 대상
- [if lte IE 6] – lt는 미만(less than or equal)이라는 뜻. 이 예는 IE6 이하 버전을 대상 ** 딘 에드워드의 IE7과 IE8 (http://code.google.com/p/ie7-js/) 이 라이브러리의 목적은 ‘마이크로소프트 인터넷 익스플로워의 렌더링 기능을 표준 브라우저처럼 만드는 것’이다.
HTML 특수문자들
Character Entity Name Description
" " quotation mark
& & ampersand
< < less-than
> > greater-than
© © copyright
® ® registered trademark ™
™ trademark
× × multiplication
 
Div와 Span 태그의 차이점!
Div는 block tag이고 span은 inline element tag이다. in-line은 줄바뀜 없음.
(머 하지만 id css를 먹일 수 있는 단위이기는 하다)
여러가지 legend같은 input 을 그룹화하는 태그도 있더라
웹표준 문서의 div layout : css-3.html
타이포 관련 CSS
em은 ctrl-+하면 확대되고, px은 확대가 안된다. 절대 크기이다.
그러니까 요즘 웹표준에서는 em으로 많이 사용된다고 한다.
font-family : "Dotum" font-size : em : 12px=1em 2em=24px % : 150%라면
line-height : 해당줄부터 적용
font-weight : 굵기 normal bold 숫자는 의미가 없음font-variant : small caps
text-indent :
text-align : left centervertical-align : 인라인 요소끼리 세로위치를 정렬 (span img a ...) top, middle
text-decoration : 밑줄 취소선등 underline..
letter-spacing :
text-transform : 대소문자
더 많은데...
오 나름 재미있는 모냥새군?
CSS Image요기를 꼭 참고하자.
http://iluku.net/blog/101
color sites
Editor tool
CSS 그룹화
가상클래스 hover 뭐 어쩌구 하는 애들은 가상 클래스
가상요소
선택자
display 요녀석
form에 관련된 이야기
border를 이용해서 debugging을 많이하게 되니까 많은 이용 바랍니다. ^^
<!doctype html>
<html>
<head>
<meta http-equiv='content-type'content='text/html; charset=utf-8' />
<link rel='stylesheet' href='css-2.css' type='text/css'>
</head>
<body>
<div id='content'>
<h1>
그림으로 보는 재미있는 역사이야기
</h1>
<p class='borderTest'>
그림, 한눈에 역사를 통찰하다『역사의 미술관』. 이 책은 서양의 역사화를 주된 소재로, 유명한 역사적 인물이나 흥미로운 역사적 사건과 현상 가운데 그림으로 그려진 사례들을 모아 주제별로 풀어 쓴 것이다. 알렉산드로스, 아우구스투스, 나폴레옹, 루이14세, 스탈린 등 시대를 품에 안았던 인물을 중심으로 그림 속의 역사뿐만 아니라 그림이 그려진 시대 상황까지 아우르며 두 시대의 연관성을 탐색하였다.
</p>
<p>
더불어 역사의 흐름을 바꿔놓은 전염병, 왕들의 처형, 세계대전 등의 피해역사에 대한 이야기와 카리스마, 종교 개혁, 그리스의 지성 등의 키워드를 통해 역사의 흐름 속에서 인간의 이성과 정신의 영역이 어떻게 진보하였는지 그림을 통해 생생하고 창의적으로 보여준다.
</p>
<h2>
다 그림이다 (동서양 미술의 완전한 만남
</h2>
<p>
인간의 가장 기본적인 모습들, 그러나 지금은 돈의 가치에 밀려 잊고 살았던 삶의 조건들 10가지를 선정해, 동서양에서는 그것의 가치를 어떻게 설정하였고, 어떻게 표현했는지 살펴보는 책이 다. 옛 그림에서 지혜를 얻고 동시에 서구식 교육을 받아온 세대들에게 현대적으로 재해석하는 방법을 동시에 제공함으로써, 삶의 가치를 바로 세우는데 균형감을 선사한다.
</p>
</div>
</body>
</html>
<!-- http://lab365.net/demo_source/web_standard/05_background.html -->
body {
background-color : #eee;
margin : 5px;
font-family : '맑은 고딕';
background-image: url('img/bg-03.png');
/* background-repeat : repeat-x;*/
/* repeat이 아무것도 없으면 무한 repeat이 default */
/* background-repeat : repeat-y; */
background-attachment : scroll;
}
div#content {
width : 75%;
margin : 0 auto;
padding : 10px;
border : 1px solid #ccc;
}
.borderTest {
border-width : 2px;
border-style : solid;
border-color : gray;
padding : 5px;
border-radious : 10px;
box-shadow : 5px 5px 10px red;
-moz-border-radius : 10px; /* -moz fire fox 접두사 */
-webkit-border-radious : 10px; /* safari 접두사 */
-moz-box-shadow : 5px 5px 10px #999;
letter-spacing : 0.1em;
line-height : 1em;
text-transform : uppercase;
}
BOX 모델 : MBPC 순서대로 MB네 PC일쎄?
margin : 0 auto; /* 위아래 와 좌우 */
June 10, 2008
relative는 상위요소를 기준으로 상대 위치를 가진다.
absoulte는 절대 위치로서 마치 책에 포스트 잇을 덧붙이듯이 떠있어서 전체화면에서 절대위치를 가진다.
상위 요소에 아무값을 주지 않고 현재 요소에 relative를 주면 상위 요소를 기준으로 위치를 가진다. 하지만 이럴경우 현재 요소가 상위요소에 속해져 있는 상태가 되기 때문에 현재요소의 width 혹은 height만큼 상위요소도 영향을 받게 된다.
하지만 상위요소를 relative를주고 하위요소를 absolute로 정하면 상위요소를 기준으로한 절대위치가 지정된다.
| <!doctype html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="../css/layout-01.css" /> | |
| <title>Layout Basci Site</title> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <h1>Web Site Project</h1> | |
| <div class="content"> | |
| <h2>Main Content Heading</h2> | |
| <p>Art Video Blog</p> | |
| </div> | |
| <div id="aside"> | |
| <h2>Sider</h2> | |
| <ul> | |
| <li> | |
| <a href="#">Home</a> | |
| </li> | |
| <li> | |
| <a href="#">About</a> | |
| </li> | |
| <li> | |
| <a href="#">Contact</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div id="footer"> | |
| <p>Copyright © 2005, Creative Lab365. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </body> | |
</html>/* page Style */
#wrap {
min-width: 600px;
width: 80%;
margin: auto;
background: url(../img/subtle_freckles.png);
font-family: Verdana;
overflow: hidden;
}
#aside, .content {
height: 600px;
}
.content {
background: red;
float: left;
width: 80%;
}
#aside {
background: #fdf2dc;
float: left;
width: 20%
}
#aside ul {
list-style: none;
padding-left: 0;
}
#footer p {
clear: both;
font-size: .75em;
font-variant: small-caps;
text-align: center;
}
/* navigation */
#aside ul {
padding-left: 10px;
line-height: 30px;
list-style: none;
font-variant: small-caps;
}
#aside li a {
text-decoration: none;
color: purple;
}
#aside li a:hover {
font-size: 1.4em;
color: #FF9E00; } |
마진이 합쳐지는 현상이 있다.
(겹침현상) 더 큰 수치의 놈만 설정된다.
div는 margin을 주게 되면 부모와 자식에게 모두 영향을 줘서 같이 margin이 먹는다.
위 파일은 음음 몇가지 수업중 예제이다.
position absolute는 부모로부터 인가?
| Jquery 강좌 (0) | 2011.12.17 |
|---|---|
| ADODB와 쿼리 캐시를 사용 하는 방법? (0) | 2011.12.17 |
| DOM Event (0) | 2011.12.13 |
| DOM 기초 (0) | 2011.12.12 |
| 웹 폰트 web font (0) | 2011.11.21 |
1일차.zip
css-2.css
css-2.html
