웹개발자의 기지개

111 222 position:relative; 333 position:absolute; 444 div 레이어 창으로 많이 쓰이는 position 내용인데, relative(상대적), absolute (절대적) 위치 개념이다.

상단영역 좌측메뉴 우측내용 우측내용 우측내용 우측내용 우측내용 우측내용 하단회사정보 결과 화면과 같이 우측내용부분과 하단회사 정보들이 일반적인 웹레이아웃용으로 보기 좋게 나타난다. 또한 #footer 에서 clear:both; 속성으로 앞에서 연이은 float 내용을 clear 시켜주었다. #wrapper 의 margin:0 auto; 속성으로 (0은 상하, auto 는 좌우) 전체 div 항목을 묶어서 전체 내용들이 화면 중앙 정렬이 되게끔 하였다

상단영역 좌측메뉴 우측내용 우측내용 우측내용 우측내용 우측내용 우측내용 하단회사정보 위쪽에 두개의 결과 화면과 같이 #content 또한 float 를 left 속성을 주었는데, 문제는 전체 브라우저화면창의 폭넚이에 따라 가변적으로 움직여지는 단점이 존재한다. 또한 #footer 의 부분도 앞에서의 float:left 영향을 받아서 옆으로 연이어 계속 나타난다.

css float 연습 01 111 222 333 float 를 right 속성을 줬다. 우측으로 차례로 붙는데, 111, 222, 333 순서대로 붙는다.

input 텍스트박스에서 마우스 포인트시 손모양 표시되도록 IE 에서 style="cursor:hand;" 웹표준에서 style="cursor:pointer"

style = "ime-mode:auto" (자동변경) (한/영 전환 가능) style = "ime-mode:active" (한글 모드) (한/영 전환 가능) style = "ime-mode:inactive" (영문 모드) (오직 영문) style = "ime-mode:disabled" (영문 모드) (한/영 전환 가능) style = "ime-mode:deactivated" (한글 모드) (한/영 전환 가능)

box-sizing : border-box; 요놈으로 width 값을 간편히 계산하여 작업하자