목록으로

이미지 나란히 정렬하는 법 질문드립니다. 채택완료

ksoon

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전 조회 1,475

답변 2

안녕하세요.

index에

로 이미지 삽입하면 클릭시 링크 이동 하는 것을 알게 되었습니다.

위 사진처럼 이미지 3개를 나란히 정렬하고 싶은데 어려운 작업 일까요?

초보자라 염치불구 하고 질문드립니다.

힌트 주시면 최대한 해보겠습니다.

#그누보드5

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

마르스컴퍼니

프로필 보기 이 회원 글보기 이 회원의 댓글보기

Expert

3년 전

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

ksoon

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

정말 감사합니다.ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

비타주리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

div 의 플렉스나 그리드를 사용해도 되지만...

레이아웃이 아니라면 테이블의 table-layout:fixed 를 사용하는 것도 괜찮습니다.

style 은 따로 빼셔도 되구요.

</p>

<p><table style=table-layout:fixed;width:960px cellpadding=0 cellspacing=0>

    <tr>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

        <td style=width:5px>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

        <td style=width:5px>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

    </tr>

    <tr><td style=height:5px></td></tr>

    <tr>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

        <td style=width:5px>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

        <td style=width:5px>

        <td><a><img style=width:100%;display:block src=<a href="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td>" target="_blank" rel="noopener noreferrer">https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg></a></td></a>

    </tr>

</table></p>

<p>

로그인 후 평가할 수 있습니다