JS HTML PHP

Web 선택자, Position

인폼에잇연 2011. 12. 15. 19:37

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

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>

</html>

<dl>
       <dt> 타이틀
        <dd> 설명   (definition list)
         이제는 잘 안쓰인다고 하는군?

HTML기본

1) 인라인 엘리먼트 – Element와 관련된 줄바꿈이 없다! (화면에 출력될 때 줄이 바뀌지 않고 같은 줄에 등장) (<a>, <abbr>, <area>,

<audio>,

<em>, <strong>, <select>, <span> <label>, <link>,

)

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

Div와 Span 태그의 차이점!

Div는 block tag이고 span은 inline element tag이다. in-line은 줄바뀜 없음.
(머 하지만 id css를 먹일 수 있는 단위이기는 하다)

1일차.zip

다운로드

여러가지 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

요기를 꼭 참고하자.

02_web standard 강의안_2.zip

다운로드

day2.zip

다운로드

color sites

colorschemedesigner.com colorjack.com (color pallette) typetester.org (타이포그라피)

Editor tool

Espresso, coda (요게 Mac용인데 아주 좋다고 한다)

expression blend

CSS 그룹화

, 로 연결한다. div > p, #wrap, p.note, ...

CSS init

h1, h2, h3, h4, h5...{
font-family : Verdana;
}

가상클래스 hover 뭐 어쩌구 하는 애들은 가상 클래스

가상클래스는 lvhaf 이 순서가 맞춰져야 한다고 한다.

가상요소

선택자

* 인접요소는 h1에는 적용이 안되고 h2에만 적용이 되는데, 아마도 jquery등으로 element늘렸을 떄 사용하는 것 같다.
* 자식 선택자는 자식을 선택하는 것 같다. 쫌 이상하지? 별로 제대로 동작 안하는 것 같애. (

손자는 적용 안된다는데

)
* 재미있는 건

#page p~p

이렇게 하면 p에서부터 p까지를 모두 선택해 준다.

display 요녀석

display : block 인라인요소를 block으로
display : inline 인라인요소를 inline으로

form에 관련된 이야기

주의 할 점은 input이 inline이니까 display : block 으로 설정해 줘야 아래로 나온다는 것을 잊지 말것.

day3.zip

다운로드

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>


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; /* 위아래 와 좌우 */

그림2) 글씨도 left가 붙은 경우. 노랑박스를 감싸지 않고 자기도 left align 되어 버린다.
또 div가 있었다면 글씨가 있는 부분 오른쪽에 나타나면서 감쌀 것이다.

<!doctype html>
<html>
<head>
  <meta http-equiv='content-type'content='text/html; charset=utf-8' />
  <title> Box model </title>
  <style type='text/css'>
   body {
    background : #eee;
    font-family : '맑은 고딕';
    font-size : 13px;
    margin : 0;
    padding : 0;
   }
   #wrapper {
    width : 960px;
    margin : 0 auto;
    background : #ccc;
    height : 600px;
   }
   #myDiv1 {
    width : 100px;
    height : 200px;
    border : 5px dashed black;
    margin-left : 30px;
    background : orange;
    margin-right : 30px;
    float : left;
   }
   p {
    width : 300px;
    float : left; /* 요놈이 있으면 요놈도 left이다. */
                  /* left라는 건 left 정렬이다. 그러니까 왼쪽에 있는 녀석을
              감싸지 않는다 */ 1번그림은 이게 없을 때 2번 그림은 이게 있을 때
    margin : 28px;
   }
   #text1 {
    border-color : #553;
   }
   #text2 {
    border-color : #ffffaa;
    clear: both;
   }
  </style>
</head>
<body>
  <div id='wrapper'>
   <div id='myDiv1'> </div>
   <p id='text1'> <strong> Text1 </strong>
[엑스포츠뉴스=방송연예팀 김수연 기자] 배우 한채영이 아시아 최대 규모의 시상식에서 잇달아 상을 수상하며 아시아 최고 미인으로 우뚝 서고 있다.
한채영은 지난 12월 13일 중국 북경에서 열린 '2011 차이나 트렌드 어워즈(2011 China Trend Awards)' 에서 2011년 중국 패션 최고의 빛나는 아티스트 상을 수상했다.
이번 행사는 중국 북경 TV에서 진행된 행사로 그 목적은 2011년 한 해 중국의 패션계에서 가장 빛나는 해외 아티스트에게 드리는 상으로서 중국 국민 배우 청이쉰, 야오천 등 100여 명의 배우가 함께한 가운데 한채영이 그 어깨를 나란히 했다.
또한, 23일 중국의 최고의 위성방송 중 하나인 '안휘위성'과 중국 최고의 포털 사이트인 시나닷컴에서 주최하는 중국에서 손꼽는 시상식인 '2011 드라마 어워즈'에도 참석하였다.
'2011, 드라마 어워즈'에서는 2011년 우수한 드라마 작품과 가장 훌륭한 방송인들이 한자리에 모여 2011년 중국 드라마계를 더욱 빛내는 성대한 행사이며 본 시상식은 2011년 중국위성방송에서 방영된 약 1000여 편의 중국 드라마에 대한 평가 및 홍콩, 대만 및 한국, 일본, 태국 등의 우수 작품도 평가가 진행됐다.
그 중 한채영은 '꽃보다 남자', '신이라 불리운 사나이' 등의 작품으로 "2011년 온라인 해외 최고 인기아티스트상"을 수상하였다. 또한, 이 날 시상식에서 한채영은 20여 년간 중국에서 큰 인기를 얻고 있는 배우 '임지령'에게 '2011 온라인 만능 엔터테이너 상'을 수여하는 시상자로 나서며 유창한 중국어 실력을 뽐내기도 했다.
한편, 한채영은 내년 초 중국영화 '빅딜'의 개봉을 앞두고 있다.
방송연예팀

enter@xportsnews.com

</p>
   <p id='text2'> <strong> Text2 </strong>
미국 텍사스에서 산타클로스 복장의 50대 남성이 성탄절 아침 선물을 풀어보던 일가친척 6명을 사살하고, 자신도 목숨을 끊는 사건이 일어났다.
25일 오전 11시30분쯤, 미국 텍사스 경찰로 한 통의 긴급전화(911)가 걸려왔다. 수화기에서는 아무런 소리가 들리지 않았다. 긴급 출동한 경찰은 전화가 걸려온 댈러스 국제공항 서쪽 그레이프바인의 한 아파트로 향했다. 이곳은 평소 범죄 발생이 거의 없는 고급 아파트 단지였다.
경찰이 실내로 들어섰을 때, 가장 먼저 눈에 들어온 것은 화려한 크리스마스 장식이었다. 바닥에는 포장을 뜯다 만 선물들이 어지럽게 널려 있었고, 일부는 포장이 뜯기지 않은 상태였다. 휴지통에는 선물 포장지가 가득했다. 그 가운데 사이사이로 총상을 입은 시신 7구가 있었다. 권총 2정과 함께였다.
현지 경찰의 대변인인 로버트 에벌링(Eberling) 경사는 “사망자들은 크리스마스 선물 포장을 풀고 있다가 총에 맞은 것으로 보인다”며 “6명을 총으로 쏜 범인은 자신도 방아쇠를 당겨 자살한 것이 분명하다”고 말했다.
사망자 가운데 누군가가 죽기 전에 경찰에 긴급전화를 걸었지만, 말을 하지 못할 정도로 이미 내상이 컸던 것으로 경찰은 추정했다. 경찰은 크리스마스 오전이어서 이웃 중에 총소리를 들은 사람도 없었다고 밝혔다.
담당 수사관은 “사망자의 연령대는 18~60세로, 여성 2명과 청년 남성 1명, 중년 남성 4명”이라며 “총을 쏜 사람은 이 가운데 50대 남성으로, 산타클로스 복장이었다”고 말했다. 에벌링 경사는 “피해자들이 도망을 가거나 저항한 흔적이 없다”며 “사망자들의 정확한 신원과 범행 동기 등을 조사 중”이라고 밝혔다.
   </p> 
  </div> 
</body>
</html>

day4.zip

다운로드

June 10, 2008

CSS position relative & absolute

by admin in CSS Tags: absolute, CSS, position, relative No Comments

relative는 상위요소를 기준으로 상대 위치를 가진다.
absoulte는 절대 위치로서 마치 책에 포스트 잇을 덧붙이듯이 떠있어서 전체화면에서 절대위치를 가진다.

상위 요소에 아무값을 주지 않고 현재 요소에 relative를 주면 상위 요소를 기준으로 위치를 가진다. 하지만 이럴경우 현재 요소가 상위요소에 속해져 있는 상태가 되기 때문에 현재요소의 width 혹은 height만큼 상위요소도 영향을 받게 된다.

하지만 상위요소를 relative를주고 하위요소를 absolute로 정하면 상위요소를 기준으로한 절대위치가 지정된다.

Homework :
webdeveloper christoper 어쩌구..

http://lab365.net/demo_source/web_standard/07_layout_basic.html

요놈.

위 숙제
원래 소스는

<!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 &copy; 2005, Creative Lab365. All rights reserved.</p>

</div>



</div>



</body>

</html>

요렇게 되어있고 내 코드는

<!doctype html>
<html>


<head>
<style type='text/css'>
#wrapper {


margin : 0px auto;
width : 960px;
height : 690px;
font-family : Verdana;
}
h3 {
font-size : 16px;
font-family : dotum;
}
#body {
background : red;
width : 700px;
height : 600px;
float : left;
}
#sidebar {
margin-top : 10px;
float : left;
}
#list {
padding-left : 10px;
list-style : none;
line-height : 30px;
}
li {
font-family : Tahoma;
text-transform : uppercase;
color : pink;
margin-left : 10px;
}
li:hover {
font-size : 20pt;
color : orange;
}
</style>
</head>
<body>
<div id='wrapper'>
<div id='head'>
<h1> Web Site Project </h1>
</div>
<div id='body'>
<h2> Main Content Heading </h2>
<h3> Art Video Blog </h3>
</div>
<div id='sidebar'>
<h2> Sider </h2>
<ul id='list'>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
</body>
</html>

요렇게 만들었다. 중요한건 center로 정렬하는 것은 margin : 0, auto 로 하면 되고, 더 중요한건 side bar를 제대로 control하기 위해서는 side bar 자체를 float left를 주지 않으면 제대로 margin이나 padding이 컨트롤 되지 않는다!!!

layout.html

다운로드

basic_layout_start.html

마진이 합쳐지는 현상이 있다.
(겹침현상) 더 큰 수치의 놈만 설정된다.

div는 margin을 주게 되면 부모와 자식에게 모두 영향을 줘서 같이 margin이 먹는다.

graph_start.html

다운로드