table을 이용해서 이미지들을 넣었는데요.
1라인의 td는 2개 , 1라인의 td는 3개입니다.
1라인은 width를 50%씩 , 2라인은 width를 33%로 주고 싶은데요.
td width를 위의 td에 영향을 받지 않고 각각 사이즈를 다르게 주려면 어떻게 해야할까요?
| PHP | PHP 7.0 |
|---|---|
| CMS | Rhymix |
-
-
?
아 colspan을 더 활용을 하란 말씀이시네요...
그런데 DIV를 활용하시라는건 줄마다 <div>content</div><div>content</div> 를 사용하는게 낫다는 말씀이실까요?? -
?
네, 테이블에서 colspan을 아무리 활용하더라도 너비를 자유자재로 변경하는 데는 한계가 있으니까요. 위에 그려드린 예제에서도 td들을 가로지르는 가상의 세로선이 있고, 그 틀을 벗어날 수 없습니다. 예를 들어 3번째 줄에 25%짜리 td를 4개 배치하려고 하면 최소 6개의 컬럼을 만들어서 colspan을 조정해야 할 거예요. ㅎㅎ
div는 그냥 몇%라고 지정하면 그대로 적용되니까 편리하지요. -
최소공배수를 이용하는 거죠.
2칸과 3칸의 최소공배수는 6이니 총 6칸이 있는데..
위줄은 3칸을 1칸으로 합쳐서 colspan=3으로 2칸을 만들고
아래줄은 2칸을 1칸으로 합쳐서 colspan=2로 3칸을 만들면 되죠. -
?
저런 경우 div 구조가 더 합리적입니다.
도표가 아니면 가급적 table을 사용안하는게 좋습니다.div가 아니라 li를 사용해야 겠네요.
-
?
리스트가 아니라면 li도 아니죠 ㅎㅎ
태그 구조는 원하는 기능을 구현하는 데 필요한 최소한으로만 쓰는 것이 좋다고 생각하는 1인입니다.
사실 이런 경우는 그냥 img에 직접 CSS 적용해 버려도 상관없어요. -
?
이런 대화가 좋습니다 ㅋㅋ
전 저걸 리스트로 봅니다.
동일한 패턴으로 반복되는 형식들은 table이 아니면 ul.ol,dl 등으로 감싸서 동일한 패턴이 반복되고 있음을 뚜렷하게 해야 한다고 생각합니다. -
?
예제로 주신 페이지에서는 구조적으로 '목록'이 맞는 것 같습니다.
기계 입장에서
"이것은 '사진 표'인가? '사진 목록'인가?" 라고 한번 생각해보시는게...
HTML 코딩은 이런 생각부터 시작하시는게 편하십니다.
만약, IE 10 이하의 사용자를 포기하신다면,
저 레이아웃은 저라면
UL>li + Flex 디스플레이를 사용할 것 같습니다. -
?
?
이렇게 html을 문서로서 접근하는 대화들이 재미있습니다.
입문할때는 많이 고민하고 접근했었는데
이젠 관성적으로 작업하고 있는 자신의 문제점도 어느정도 인지하고 있으면서도
새로운걸 배우기 귀찮아하는 게으름으로 인해
이런 대화에서라도 얻어가야 할건 얻어가야 해서
윗줄의 td들은 각각 colspan=2를 주고, 아랫줄 가운데 td만 colspan=2를 주면 중앙을 가로지르는 세로선으로부터 다소 자유로워질 수는 있겠지만... (아래의 표 참고) 이런 건 아무래도 테이블로 구현하기보다는 div로 구현하는 편이 훨씬 깔끔합니다. 정 안되면 두 개의 테이블로 분리하는 방법도 있고요.