qOOp

HTML5 레이아웃(layout) 설정하기 HTML5 본문 작성시에 가장 먼저 설정을 하여야 하는 것이 레이아웃(Layout)이 아닐까 합니다. 즉, 자신이 만들고자 하는 HTML문서의 외형을 어떻게 설정할 것인가 하는 것입니다. 집을 짓는 다고 가정을 하면, 정해진 공간에 방은 몇개, 주방, 욕실 등의 배치를 어떻게 할것이나 하는 것과 비슷하닥 생각을 하시면 됩니다. HTML문서도 동일하게 현재 개발하고자 하는 웹사이트의 주제에 맞는 전체적인 외형을 디자인을 하는 것입니다. 작가가 글을 쓸때도 서론, 본론, 결론 형식으로 글을 쓰는것과 같이 HTML문서에서도 header, body, footer 형식으로 나누는 것이 일반적입니다. header(헤더) 부분에는 웹사이트의 제목, 로고와 메인 메뉴(카테고리..

CSS를 사용한 1단 레이아웃 작성하기 CSS를 사용하여 레이아웃을 만들면 테이블을 사용하여 만든 레이아웃 보다 차후에 수정하기가 쉽다. 먼저 전체의 레이아웃을 boxer 로 설정하고, 그 레이아웃 안에 header, content, footer 로 나눈다. 레이아웃 1단 작성하기 Header : 헤더부분입니다. Content : 내용부분입니다. Footer : 푸터부분입니다. COPYRIGHT BY qOOpTM SOME RIGHTS RESERVED 위의 코드를 작성한후 브라우저로 확인하면 .. HTML 소스를 보면 전제를 ID가 boxer 인 div 태그로 감싸고 그 안에 3개의 div 로 header 와 content, footer 로 나누었다. header 의 div 태그 내에 로고와 메뉴 등을 편..

CSS를 사용하여 레이아웃을 가운데 정렬하는 방법 1. 방법 1 가운데 정렬할 박스 : 박스의 크기는 가로 800픽셀로 가정 오랜지색으로 표현된 부분은 explorer 버그로 인한 설정. 파이어 폭스의 경우에는 오랜지색 필요없음. 현재 익스플로러 사용자가 더 많은 관계로 반드시 필요함. 2. 방법 2 가운데 정렬할 박스 박스의 크기가 800px인 박스의 시작점을 좌측에서 50%인 지점에서 시작( 그렇다면 시작지점이 브라우저의 정중앙이 된다.) 시작지점에서 박스의 사이즈의 반인 400px 만큼 마이너스로 이동하므로 결국은 가운데 정렬이 된다. 쉽게 플러스는 오른쪽, 마이너스는 왼쪽이라 생각하면 된다. 만약 박스의 가로 사이즈가 700px 이라면 -350px가 되어야 한다. 즉, margin-left: -(..