[html] 구분, div, 좌표설정

* 구분

- 왼쪽, 오른쪽으로 구분된다.

- float : left, right

통일성을 주기 위해 전체를 감싸는 div를 준 뒤 그 안에서 영역을 나누는게 좋은 방법이다. 또한 전체를 감싸준뒤 그 넓이의 반반식 나누고 왼쪽, 오른쪽 정렬을 실행하면 한줄에 각각의 div가 나타나는것을 볼 수 있다.

ex) 

1. 기본틀일 경우

[왼쪽]

   [오른쪽]

 

2. 전체를 감싼 경우

전체[[왼쪽][오른쪽]] 

 

실제 화면 예시

http://www.encar.com/index.do -> 디자인만 된 기본 틀 + DB에서 가져온 정보를 종합한 최종 제공 화면

http://www.encar.com/index.jsp -> 디자인만 된 기본 틀

 

* div에 스크롤바 생성

- div에 넓이와 높이 설정

- 설정된 크기를 넘어갔을 때 스크롤바 생성

over-flow : auto

 

* 좌표 설정 [참고] postion

- position : relative(브라우저의 상단의 좌표를 바꿀 때), fixed, absolute

ralative - absolute의 초기 좌표

top - y좌표

left - x좌표(왼 -> 오)

right - x좌표(오 -> 왼)

 

fixed(고정) - (유동적) 브라우저의 크기가 변경되어도 설정된 좌표를 변경하면서 유지

alsoute(절대) - 브라우저의 크기가 변경되어도 좌표를 유지

 

* 탬플릿 (이클립스의 기능)

 

지난 학습 내용 중

div는 브라우져의 100%를 차지한다. 물론 속성을 줘서 고정값을 줄 수도 있다. 자동으로 줄바꿈이 된다.