HTML 카드형 디자인/갤러리/리스트 코딩하기.

2018.09.06 16:16

졸리운_곰 조회 수:481

카드형 디자인/갤러리/리스트 코딩하기.

card_list.zip

포트폴리오에 간단히 활용하기 좋을 갤러리 또는 카드리스트를 만들어봤다.

이미지 올리거나 사이트 링크를 걸어도 좋을것 같다.

 

오랜만의 코딩이라 생각보다 험난했다. 또르르..

 

 

 

나름 웹/모바일 형태.

 

간단하지만 그냥 한번 끄적이면서 어떤 코드를 쓸지 생각도 하고 좋다.

 

 

 

 

자세히는 이렇겤ㅋㅋㅋ

 

 

 

사실 처음 HTML 배울때 써보고 한번도 쓴적없는 figure코드로 작업할 계획을 했는데,

결과는 실패.

 

 

 

구글링해가며

이렇게 작성했지만,

 

전체코드보기

 <!doctype html>

<html>

  <head>

    <style>

    *{

      margin: 0;

      padding: 0;

    }

      #wrapper{

        column-width: 200px;

        column-gap: 10px;

      }

      #wrapper figure{

        display: inline-block;

        border: 1px solid rgba(0,0,0,0.2);

        margin: 0;

        margin-bottom: 10px;

        padding: 3px;

      }

      #wrapper figure img{

        width: 100%;

      }

      #wrapper figure figcaption{

        border-top: 1px solid rgba(0,0,0,0.2);

        padding: 10px;

        margin-top: 3px;

      }

 

    </style>

  </head>

  <body>

    <div id="wrapper">

      <figure>

        <img src="img/01.jpg">

        <figcaption>figcaption</figcaption>

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

      </figure>

 

      <figure>

        <img src="img/02.jpg">

        <figcaption>figcaption</figcaption>

      </figure>

 

      <figure>

        <img src="img/03.jpg">

        <figcaption>figcaption</figcaption>

      </figure>

 

      <figure>

        <img src="img/04.jpg">

        <figcaption>figcaption</figcaption>

      </figure>

 

      <figure>

        <img src="img/05.jpg">

        <figcaption>figcaption</figcaption>

      </figure>

 

      <figure>

        <img src="img/06.jpg">

        <figcaption>figcaption</figcaption>

      </figure>

    </div>

 

 

  </body>

</html>

 


출처: http://abettercode.tistory.com/18 [MINU,]

<div id="wrapper"> <figure> <img src="img/01.jpg"> <figcaption>figcaption</figcaption> </figure> <figure> <img src="img/02.jpg"> <figcaption>figcaption</figcaption> </figure> <figure> <img src="img/03.jpg"> <figcaption>figcaption</figcaption> </figure> <figure> <img src="img/04.jpg"> <figcaption>figcaption</figcaption> </figure> <figure> <img src="img/05.jpg"> <figcaption>figcaption</figcaption> </figure> <figure> <img src="img/06.jpg"> <figcaption>figcaption</figcaption> </figure> </div>

 

figure 순서가 엉망이라 실패.

결국 figure코드 순서를 정하는 태그를 못찾았다ㅠㅠ..

 

 

 

 

 

그래서 다시이 div로 작성.

 

전체코드보기

 

<div class="wrapper"> <div class="card"> <img src="img/01.jpg"> <p>title</p> </div> <div class="card"> <img src="img/02.jpg"> <p>title</p> </div> <div class="card"> <img src="img/03.jpg"> <p>title</p> </div> <div class="card"> <img src="img/04.jpg"> <p>title</p> </div> <div class="card"> <img src="img/05.jpg"> <p>title</p> </div> <div class="card"> <img src="img/06.jpg"> <p>title</p> </div> </div> <footer></footer> </body> </html>  

 

 

 

완성!

 

wrpper로 둘러 쌓아두고 .card div를 쭉-나열.

가로 사이즈는 일단 100%으로 해뒀으니,

미디어 쿼리를 써서 웹/모바일형을 잡아서 사용하면 될것같다!

 

 

헤더에는

background-attachment를 활용해서 배너처럼 이미지만 넣어주었더니 좀 있어보인당.

요 방법은 어떤 스타일의 홈페이지에 활용해도 고급지게 잘 어울리는거 같다.

 



출처: http://abettercode.tistory.com/18 [MINU,]

 

card_list.zip

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED