본문 바로가기
IT/WEB

[CSS] Image 갤러리 만들기 실습

by 어센트 2020. 10. 7.

아래와 같은 갤러리 페이지를 만드는 실습을 해보았다.

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Photo Blog</title>
    <link rel="stylesheet" href="photos.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <p>DAVE/Photo</p>

    <img
      src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
      alt=""
    />
    <img
      src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
      alt=""
    />
    <img
      src=" http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
      alt=""
    />

    <img
      src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
      alt=""
    />
    <img
      src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
      alt=""
    />
    <img src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg" />

    <img src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg" />
    <img src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg" />
    <img src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg" />
  </body>
</html>

photos.css

img{
    width: 30%;
    float: left;  /*이미지간 공백없앰*/

    margin: 1.66%;
}

p{
    font-family: Raleway ;
    margin-left:1.66%;
    font-size:23px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom:2px solid #f1f1f1 ;
    padding-bottom: 20px;
    width: 30%;
}

Raleway 폰트는 구글 폰트를 통해 다운로드했다.

margin은 딱 100을 맞추기 위해(1.66 * 6 + 30*3) 1.66%로 주었다.

'IT > WEB' 카테고리의 다른 글

[Bootstrap] Grid System  (0) 2020.10.07
[Bootstrap] 부트스트랩 프로젝트 시작하기(버전3)  (0) 2020.10.07
[CSS]Box Model,실습  (1) 2020.10.07
[CSS] 셀렉터 기초  (0) 2020.10.07
[HTML] 간단한 회원가입 양식 만들기  (0) 2020.10.06

관련글

티스토리툴바