div로 표현하고 싶습니다. 가능할까요?

div로 표현하고 싶습니다. 가능할까요?

QA

div로 표현하고 싶습니다. 가능할까요?

답변 6

본문

설치사례이미지(롤오버도 가능하면 좋겠습니다).와 텍스트회색테두리 하단여백
이 모든게 가능할까요? table세대라 막막할때가 참 많습니다.
현재는 이미지맵 정도로 구현해 놓았으나 추후 문제가 있을것 같아서요
조언 부탁 드립니다.

2949054147_1686536834.7744.jpg

이 질문에 댓글 쓰기 :

답변 6

A Pen by jinseoki (codepen.io)

 

간단하게 만들어봤습니다. 

 

 

문제는 없습니다.

css 지식이나 html4~5 지식이 부족하시면 그냥 chat gpt에다가 table 안에 div로 그려달라면

잘 그려줍니다.

 

 

저ㄱ30485775_1686544464.2869.png

 

저기서 css쪽 table로 정의된것 걷어 내고

 

table로 조상태그를 갖고있고싶으면

최상위 div 를 table로 변경하고 row쪽을 tr로만 변경하면되겠죠..

div로 다 가능하니 염려마시구 사용하세요.

상세하게 지금 바로 구현해야 한다면 제작의뢰를 하시든지요, 아니면 스카이프아이디 splitedragon으로 온라인 미팅 지원해드리겟습니다.

thumb-31284938_1686545992.251_730x742.png

 

충분히 가능합니다 화이팅.

각 컨텐츠
왼쪽 정렬은 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/

에 있고, 보시고 유익하셨다면, 광고 클릭 부탁드립니다. 하하하
끝!

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #div ×
전체 141
© SIRSOFT
현재 페이지 제일 처음으로