HeadFirstXHTML / CSS기초 노트

HeadFirst HTML with CSS & XHTML

10장 박스모델, 11장 Div와 Span 엘리먼트, 12장 레이아웃과 포지셔닝

우선 xHTML은 eXtensible HTML의 약자이고, HTML의 진화된 차세대 산물이라고 한다.

확장 가능한  HTML.

아.. XML은 걍 메타랭기지

HTML은 마크업 랭기지

두개를 합쳐서 일반적인 HTML 태그 외에 여러가지것들을 붙여쓰고

이를 xHTML이라고 부르는 것 같다.

-----------------------------------------------------------------------------

* Border, Margin, Padding, Content Area

보더는 경계, 마진은 경계 바깥쪽, 패딩은 경계 안쪽부터 콘텐츠에어리어 밖까지

* width는 콘텐츠에어리어 사이즈만을 이야기한다.

* Div를 통해 박스모델을 구현한다.

* Div는 박스모델, Span은 인라인 엘리먼트를 꾸밀때 쓴다.

* 단축표현이 있다. Margin: 탑 라이트 바텀 레프트 혹은 Margin: 탑바텀 레프트라이트, 혹은 Margin:전체

* 단축표현2 Background : white, url(http://google.com/a.jpg) repeat-x

* repeat-x, repeat-y, no-repeat, inherit

* background-position : top left

* font-size : small     or 50%

* line-height : 1.6em      or      1

* A태그

a:link{} a:visited{} a:hover{} (마우스오버)

* pseudo Class ( link, visited, hover ) 진짜 클래스는 아니지만 클래스처럼 사용된다 :hover

* block / inline element / 박스

블록은 말그대로 구간, 인라인 앨리먼트들은 한 문단안에 가로로 배치되는것 (text, em, a, img 등)

* float: right 띄워서 오른쪽으로 붙인다. 그외 블록엘리먼트들은 이거를 무시하고 진행한다.

하지만 해당 블록의 인라인 앨리먼트들은 알맞게 흐르게 된다.

이거는 Left, Right 밖에 안된다. 둘다하려면 Both 도 있다.

* clear : right (오른쪽에는 겹치는것을 허용하지 않겠다. 따라서 이거는 float: right과 함께 사용되야 의미가 있다.

위와 마찬가지로 이것도 Left, Right 밖에 안되는게 옳다.

* 아까 빼먹었는데 인증서에서 별모양 그림을 왼쪽 위에 놓을때 백그라운드 이미지를 왼쪽 위에 위치시키고 왼쪽 패딩을 일부 준것으로 기억한다.

* liquid vs frozen design + jello

* jello means

width : 800px;

margin-left : auto;

margin-right : auto;

* position -> static, absolute, fixed, relative

* fixed는 쿠폰같은거 고정시킬때 쓴다, 브라우저 스크롤이 움직여도 이건 안움직임.

* position 은 음수값을 넣을 수 있다. left : -90px;

* relative를 통해 어떤 영역의 마진에도 그림같은것이 보이게 만들 수 있다.

---------------------------------------------------------------------------