html과 css에 대해 알고 일하자 for dummies

html의 요소들은 3가지 타입으로 분류할 수 있다.

- Layout 정의

위치나 크기, 블록을 만들어 레이아웃을 이룬다. 

과거에 table로 레이아웃을 만들었다면(css를 사용하지 않아도 충분히 표현할 수 있어따), 지금은 div로 꾸민다.

- 꾸밈요소

구조를 잡아준다. h1-6,strong,ul,ol,table, blockquote,q 등...

- 기능목적

다른 문서와 연결을 시키는 등 기능적인 요소들. form,input,submit 등.

대부분의 요소들은 css를 이용해서 원하는 스타일로 바꿀 수는 있지만, 본래의 목적에 맞는, 원래의 default tag를 사용하는 것이 제일 좋다.

그리고
<div>와 <span>은 기본적으로 스타일요소를 아무것도 가지고 있지 않다는 점은 같지만, display의 속성이 다르다.

div -> display:block;

span -> display:inline;

display의 속성은 기본적으로 block과 inline으로 나뉘는데 

block은 기본적으로 width를 지정하지 않는 이상 100%이다.

헤더 역시 div처럼 블록속성이지만 기본적으로 font-size/font-weight/margin 값이 들어가 있다.

p 역시 같으나 기본으로 margin이 들어가있다.

inline은 표시되는 영역만큼 잡힌다. 기본적으로 인라인 속성을 가진 애들이 div만큼 많지는 않다.

a,span,q등

* 파이어버그 등을 이용하여, 기본적으로 이 태그가 어떤 기본값을 가지고 있는지 확인해 볼 필요가 있다. Box model과 layout을 눈여겨 봐두셈.

 

** 일반적으로 동등한 레벨의 메뉴들을 만들때는 list태그를 쓰듯이, 레이아웃 잡을 때 태그를 쓸 때 목적과 방법을 생각하장..

"LAYOUT"
 

position과 z-index / float와 clear는 서로 연결되어 있다.

position

static (default) - 기본 세팅값이나, 이 상태일 때에는 박스 모델들의 값이 먹지 않는다.

relative - 상대적으로 적용.

absolute - 감싸고 있는 상위 요소에 대해 절대적 좌표를 갖는다. 단, 상위 요소가 static이 아닌 relative여야 한다. 

pixed - 스크롤이 되어도 위치가 고정된다.

z-index

포토샵의 레이어와 같은 개념이다. 사실 모든 요소들은 임의의 z-index값을 가지고 있다. 거기에 +n을 시키는 것.

보통 밑에 있는 요소가 위 레이어로 올라간다.

그리고

float 

left, right로 정렬이 바뀐다. 가지고 있는 영역만 잡힌다.

clear 

상위에서의 float요소에 영향을 받지 않게 한다. 

both는 왼쪽 오른쪽 다 clear

* html로 만들때 margin,padding등의 css 값을 초기화한당. 이렇게 하면 크로스브라우징에도 도움이 된다.