묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
div 로 레이아웃을 잡을때..
2008.12.25 13:08
안녕하세요.
div로 레이아웃을 잡고 있는데요.
개념이 좀 부족해서 맞게 하는건지 판단이 안되네요. ^_^;
w3 사이트에서 문법검사를 했을 때는 이상없었고 브라우저에서도 이상없이 뜨는데요.
효율성에서 긴가민가 되는 부분이 있어 고수님들께 조언을 구하고자 합니다.
div 로 레이아웃 잡는 테스트를 위해서 간단한 구성의 홈페이지를 포토샵으로 디자인을 했습니다.
문제는 디자인된 작업을 문서로 옮기는 일이였는데, 테이블로 짜는 법에 익숙해져 있었고 웹표준모드에 대한 개념도 부족했던지라,
인터넷 검색으로 얇게나마 개념을 잡고 작업을 시작했습니다.
그런데 작업을 하다보니 테이블 태그만 쓰지 않았을 뿐 div 태그의 남발로 이어지더군요...
메뉴부분의 글씨를 이미지로 했을 경우, 이미지가 원래 위치에서 밀리거나 당겨져서 틀이 깨짐을 방지하기 위해,
div로 가로세로 사이즈를 먹여 공백의 블럭을 만들고 이미지 사이사이에 채워버리는 방법을 사용했습니다.
홈페이지 디자인이 네이버처럼 화면 중앙에 배치되는 디자인이 아니라, 왼쪽에 붙여버리는 디자인이여서 작업할 때 어렵지는 않았는데요.
다른 작업자분들께서는 어떤식으로 작업을 하시는지 궁금합니다.
Q1. 이런식으로 작업을 하는게 효율성면에서 옳은건지,
아니면 div 공백블럭 부분을 다 없애버리고 필요한 div 만을 가지고 div좌표? (위치) 를 정해서 고정시켜버리는게 옳은방법인지
혹은 더 좋은 방법이 있는지 알고 싶습니다.
Q2. 만약 1번 div id="style1" 에서 css 에서 정한 style1값을 먼저 사용을 했었는데,
2번 div 에도 style1 값을 적용하고 싶어 id에 style1 값을 적용해버리면 w3 에서 문법검사할 때 중복으로 오류로 지적을 받습니다.
style1 이 위에서 먼저 사용되었다고 뭐라 하는 것 같은데,
일단 오류를 없애고 보자는 심정에 css에서 style1과 똑같은 값으로 style2 를 만들어서 오류를 수정했습니다.
만약 원래대로 한다면,100개의 div 를 똑같은 속성으로 만들고자 한다면 css에서 같은 값으로 이름만 다르게 100개를 지정해 주어야 하나요?
브라우저에서는 이상없이 출력됩니다만 w3 사이트 문법검사 기준에서 봤을 때는 오류라고 판독을 하니 여쭤보고 싶습니다.
조언 부탁드리겠습니다. 꾸벅~
div로 레이아웃을 잡고 있는데요.
개념이 좀 부족해서 맞게 하는건지 판단이 안되네요. ^_^;
w3 사이트에서 문법검사를 했을 때는 이상없었고 브라우저에서도 이상없이 뜨는데요.
효율성에서 긴가민가 되는 부분이 있어 고수님들께 조언을 구하고자 합니다.
div 로 레이아웃 잡는 테스트를 위해서 간단한 구성의 홈페이지를 포토샵으로 디자인을 했습니다.
문제는 디자인된 작업을 문서로 옮기는 일이였는데, 테이블로 짜는 법에 익숙해져 있었고 웹표준모드에 대한 개념도 부족했던지라,
인터넷 검색으로 얇게나마 개념을 잡고 작업을 시작했습니다.
그런데 작업을 하다보니 테이블 태그만 쓰지 않았을 뿐 div 태그의 남발로 이어지더군요...
메뉴부분의 글씨를 이미지로 했을 경우, 이미지가 원래 위치에서 밀리거나 당겨져서 틀이 깨짐을 방지하기 위해,
div로 가로세로 사이즈를 먹여 공백의 블럭을 만들고 이미지 사이사이에 채워버리는 방법을 사용했습니다.
홈페이지 디자인이 네이버처럼 화면 중앙에 배치되는 디자인이 아니라, 왼쪽에 붙여버리는 디자인이여서 작업할 때 어렵지는 않았는데요.
다른 작업자분들께서는 어떤식으로 작업을 하시는지 궁금합니다.
Q1. 이런식으로 작업을 하는게 효율성면에서 옳은건지,
아니면 div 공백블럭 부분을 다 없애버리고 필요한 div 만을 가지고 div좌표? (위치) 를 정해서 고정시켜버리는게 옳은방법인지
혹은 더 좋은 방법이 있는지 알고 싶습니다.
Q2. 만약 1번 div id="style1" 에서 css 에서 정한 style1값을 먼저 사용을 했었는데,
2번 div 에도 style1 값을 적용하고 싶어 id에 style1 값을 적용해버리면 w3 에서 문법검사할 때 중복으로 오류로 지적을 받습니다.
style1 이 위에서 먼저 사용되었다고 뭐라 하는 것 같은데,
일단 오류를 없애고 보자는 심정에 css에서 style1과 똑같은 값으로 style2 를 만들어서 오류를 수정했습니다.
만약 원래대로 한다면,100개의 div 를 똑같은 속성으로 만들고자 한다면 css에서 같은 값으로 이름만 다르게 100개를 지정해 주어야 하나요?
브라우저에서는 이상없이 출력됩니다만 w3 사이트 문법검사 기준에서 봤을 때는 오류라고 판독을 하니 여쭤보고 싶습니다.
조언 부탁드리겠습니다. 꾸벅~
1번 div안에 이미지를 넣을겨우 이미지에 맞게 크기조정, div가 기본 레이아웃의 크기이면 이미지의 위치를 조정
(예) XE기본 레이아웃 참고
2번 전체를 둘러싸는 <div id="style"> 에 css에서 값을 주고 그안에 <div id="style1"></div>, 2, 3, ... </div>
(예) XE기본 레이아웃 참고