div로 표현하고 싶습니다. 가능할까요?
본문
설치사례이미지(롤오버도 가능하면 좋겠습니다).와 텍스트회색테두리 하단여백
이 모든게 가능할까요? table세대라 막막할때가 참 많습니다.
현재는 이미지맵 정도로 구현해 놓았으나 추후 문제가 있을것 같아서요
조언 부탁 드립니다.
답변 6
일렬로 나옵니다.
크롬, 엣지, 네이버 Whale, 파이어폭스 다 두줄 잘나옵니다.
IE 사용자인가요?
문제는 없습니다.
css 지식이나 html4~5 지식이 부족하시면 그냥 chat gpt에다가 table 안에 div로 그려달라면
잘 그려줍니다.
저ㄱ
저기서 css쪽 table로 정의된것 걷어 내고
table로 조상태그를 갖고있고싶으면
최상위 div 를 table로 변경하고 row쪽을 tr로만 변경하면되겠죠..
div로 다 가능하니 염려마시구 사용하세요.
상세하게 지금 바로 구현해야 한다면 제작의뢰를 하시든지요, 아니면 스카이프아이디 splitedragon으로 온라인 미팅 지원해드리겟습니다.
안심하고 사용하세요.
문제 없습니다.
네 테이블안에서 div 선언해서 쓰셔도 가능은 합니다.
충분히 가능합니다 화이팅.
각 컨텐츠
왼쪽 정렬은 float : left로
float : left 상위 태그 div에는 display : inline-block으로 싸주시면, 안쪽 컨텐츠에 맞춰서 화면 지정도 되고 아래에 다른 컨텐츠를 넣을 수도 있습니다.
(이렇게 해야 화면 안터짐)
아니면, flex로 하는 방법도 있는데 이 부분은 구글 검색하셔서 옵션들을 보셔야 되요.
위의 이미지를 보시면, 아래쪽은 세로크기가 다 다르게 되어있죠.
저런식으로도 flex로는 가능합니다.
그걸 모르면 javascript로 이미지 사진 다 비교해서 컨텐츠 가로크기 나누기 4까지 다 산출해야되고,
크기별로 반응형 코드를 javascript로 다 맞춰주면서 각 화면 크기별 컨텐츠 크기를 javascript로 다 산출하여야됩니다.(제가 2년차인가 3년차일때 만듬 이건 개고생)
결론,
flex를 검색해 보시거나,
아니면, display:inline-block 과 float:left를 이용하는 방법으로 해결하심이 좋아보입니다.
추가로 사진 부분도 크기가 다 똑같지 않다면,
div태그로 가로 크기는 % 비율로, 세로는 크기 fix 시켜서 영역을 만들어 주신 다음에, div에 배경으로 넣는 방법이 있습니다.
배경 넣는 방법 예시: background : url('xxxxxxx.png') no-repeat center center / cover;
no-repeat은 반복 안하겠다는 옵션, center center는 포지션 cover는 background-size 입니다.
끝.(더 있지만, 일하는 중이라 피곤함.)
위 이미지는 제가 만들어 놓은 것으로,
링크 : http://financelearn.co.kr/ui_play/
에 있고, 보시고 유익하셨다면, 광고 클릭 부탁드립니다. 하하하
끝!