BLOG main image
LEEEJONG (166)N
IT (54)N
주관적평가 (31)
창작공간 (80)
110,267 Visitors up to today!
Today 29 hit, Yesterday 67 hit
daisy rss
tistory 티스토리 가입하기!
'css기초'에 해당되는 글 1건
2016.01.06 21:59

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를 통해 어떤 영역의 마진에도 그림같은것이 보이게 만들 수 있다.


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


'IT > WebB' 카테고리의 다른 글

TCP의 이해  (0) 2016.03.25
UTIL_DEBUG.NWZ  (0) 2016.01.25
HeadFirstXHTML / CSS기초 노트  (0) 2016.01.06
MSSQL SP내용 쿼리로 보기  (0) 2015.12.16
JS Object / Array add Item  (0) 2015.12.10
MSSQL 바이너리 -> 가져와서 파싱하기  (0) 2015.12.08
Name
Password
Homepage
Secret
prev"" #1 next

티스토리 툴바