레이아웃을 꼭 div와 css로 잡는 진짜 이유는 뭔가요? > 자유게시판

자유게시판

레이아웃을 꼭 div와 css로 잡는 진짜 이유는 뭔가요? 정보

레이아웃을 꼭 div와 css로 잡는 진짜 이유는 뭔가요?

본문

홈페이지 기획을 하나 하고 있는데요
모니터 17인지부터 어느 모니터라도 꽉차게 디자인 하고 싶습니다.
상단, 좌우측(폭고정), 중간(폭 %), 하단 이렇게 구성하구요
 
남들이 div css 이용해서 한다고 하니까 늘 시도는 해봅니다만
전 테이블이 편할듯한데
왜???? 테이블 이용해서 레이아웃 짜면 안되나요?
 
div css 이용하면 여러상황에서 흐트러 지는 경우가 있어 골치 아픕니다
아직 css를 잘 다룰지 몰라서 이겠지만요.
 
추천
0

댓글 13개

레이아웃에서는 무조건 테이블을 사용하면 안된다는 규정은 없어요.
div는 편하게 블록레벨의 묶음단위를 위한 태그로 보시면되고
table은 표와같은 데이터를 위한 태그라는 것인데,
div 태그와 table 태그는 그 본연의 용도가 이렇게 서로 상이함에도
많은 사람들이 편의에 의해서 원래 목적이 아닌 용도로 각 태그를 사용해오다가
최근 들어 각태그를 의미에 맞는 용도로 사용하자라는 인식전환이 일어나고 있지요.
css의 사용은 웹문서에서 구조와 디자인을 분리한다라는 관점에서 접근하셔야합니다.
css로 디자인을 분리하면 유지보수 측면에서 유리한점이 많답니다.
웹표준을 지켜서 코딩을 하면 결국 사이트이용자에게도 도움이되고 이용자가 얻는게 많을수록 사이트도 성장하는데 도움이되고 궁극적으로 수익실현에도 기여한다고 생각합니다.
답변 감사 드립니다.

테이블의 원래목적이 엑셀 데이타류 라는것은 알겠습니다.
css로 디자인 관리 하는것의 편리성도 이해 하구요.

문제는 % 퍼센테이지로 div 폭과 위치를 잡으면 브라우저 크기에 따라 많이 어긋납니다.
결론은 css와 퍼센테이지 방식으로 레이아웃을 잡을수 있을지 의문입니다.
레이아웃 예제는 대부분 width를 픽스시켜 잡는듯하구요...

저는 타블렛pc부터 각종 모니터까지 언제나 화면에 꽉차게 디자인 하는것이 목표 입니다.
테이블로 레이아웃 짜여있는거 유지보수 하면 머리 아파요
테이블 안에 테이블이 있고 그안에 또 테이블이 있고...
하나 바꾸려고 전체를 다 바꿔야하는 경우가 생기기때문에 테이블로의 레이아웃은 비추...
꼭 필요한 전체 테이블 하나 정도 사용한다면 유지보수는 큰문제는 아닐듯 하기도 하구요.
더 궁굼한것은 div폭을 픽스시키지 않고 퍼센테이지 (%) 로 잡으면서 흐트러지지 않는 css 기술이 있나요?
화면크기는 둘째치고 브라우저를 늘리고 줄이더라 말이지요.
꽉차야하면 무조건 %로 작업하셔야겠네요~ 좀 어려우시면 bootstrap을 이용해보세요~ 홈페이지 만들기가 쉬워집니다. (이거 무슨 광고글 같네요ㅋㅋ)
근데 100% width 값을 가지고 있어야하면 브라우저 사이즈가 작아졌을때 반응성까지 생각하셔야하고, 간단한 소견은 width 100% 쓰고 중앙 정렬된 div 태그에 고정된 픽셀값의 객체가 있으면 되지 않을까요?
테이블 로 잡는다고 누가 머라고 하지 않습니다.
div css 잡는 원인은 코드량을 줄이기 위한것도 있구요. html5 부터는 css 기본으로 사용하게되었습니다.
html5 대세니까 먹고 살려면 표준을 따라야 하지 않겠어요?
오래된 글인데 지나가다 몇자 적어보네요...
그 이유는 시맨틱 마크업 때문이죠.
테이블이라는 것은 표를 의미합니다.
의미와 목적에 맞는 마크업을 위해서, 그리고 보다 손쉬운 유지보수를 위해서는 꼭 필요한 것이죠.
시맨틱 마크업에 대해서는 아래의 링크에 자세히 설명되어있습니다.
http://www.w3c.or.kr/Events/html5/html5/Best_Practice_of_HTML5_Semantic_Markup.pdf

물론, 테이블이 당연히 편합니다.
하지만 목적에 맞는 마크업을 하셔야죠.
그게 HTML을 사용하는 일반인과 프론트엔드 개발자의 차이점 아닐까요?!

예를 들어서 dl 태그 안, dt 영역에 설명을 넣고 dd 안에 용어를 넣는다고 화면에서 많은 차이점이 있을까요?! 없습니다.
하지만 dl, dt, dd의 바른 사용은 반대이죠.

화면에 영향을 끼치지 않는다고 그것을 사용해도 된다는 것은 아닙니다.

기술은 발전합니다. 현재의 시맨틱 마크업에 의해서 훗날 브라우저들과 혹은 검색엔진이 어떻게 반응하고 표현할지는 모르는 것입니다.

만약 화면에 가득차는 디자인을 원하신다면 트위터 개발자들이 만든 bootstrap 같은 fluid ui를 살펴보시고 적용해보세요.

그리고 그냥 업계의 한 일원으로서 더 말씀드리자면.... 만드는 사람 입장에서야 손쉽게 만드는게 편하겠지만 나중에 그 사이트나 웹솔루션의 유지보수를 맡을, 여기에 접속하시는 잠재적인 유지보수 개발자 혹은 디자이너들을 생각해 보시기 바랍니다. 여기에는 SI 업무 뿐만이 아닌 SM을 담당하시는 분들도 계십니다.

직접 그 모든 결과물들을 계속해서 유지보수하시는게 아니고 언젠가는 질문자님께서 제작하신 사이트나 웹솔루션을 다른 분들이 맡을 수 있다는 말씀입니다.

그리고 간단하게 테이블 하나 정도라고 말씀하셨는데... 추가개발이 이뤄지며 더해지는 코딩들이 있다는 것도 분명히 인지하셔야 할 것 같습니다. 처음 기획한 범위안에서 끝나는 프로젝트도 있지만 업계에서는 개발이 끝나지 않고 고도화가 이뤄지는 경우도 있고, 클라이언트의 지나친 요구 때문에 혹은 프로세스에 맞게 추가로 개발되어야 하는 부분이 엄연히 존재합니다. 처음의 간단한 테이블 코딩이 나중에는 10여개의 테이블이 중첩된 악성코드가 될 수도 있습니다.

글을 보니 어조가 너무 강한것 같네요, 절대 비난의 글이 아닙니다. 아무튼 시맨틱 마크업을 준수하셔야 좋은 품질의 마크업이 될 수 있고 이것은 검색최적화로 이어지며 사람들이 많이 찾는 사이트를 제작할 수 있는 것이죠.  ^^;;;
긴답변 감사 드립니다.
유지보수 문제는 오래전부터 들었던 이야기 이지만
"목적에 맞는 마크업" 이것이 좋은말씀 인것 같습니다.
보상은 검색엔진이 해줄것이다 라고 결론 내려도 될런지요.

링크글도 참 좋습니다.
감사 드립니다.
제가 읽어보니 다분히 공격적인 어투인것 같습니다. 절대 그런 의미로 말씀드린게 아닙니다. 잘 정리해서 읽어주셔서 감사합니다 ㅠ_ㅠ
전체 196,490 |RSS
자유게시판 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT