반응형 사진 갤러리를 만들어 봅시다

웹 개발자로서 우리는 우리의 노력이 가능한 한 많은 사람들에게 다가가기를 원합니다. 즉, 특히 스마트폰과 태블릿의 인기가 높아짐에 따라 다양한 장치를 사용하는 다양한 대상에 맞게 웹 사이트를 조정해야 합니다. 여기에서 Responsive Web Design이 나옵니다. 요소가 화면 크기에 따라 조정되는 한 페이지입니다. 나는 전에 여기에 기사를 썼는데 편의상 그렇게 된 경우가 있습니다. 이 기사에서는 이러한 방식으로 사진 갤러리를 디자인하는 예를 보여 드리겠습니다.

시작하자! 🔥

단계

1. 사진 찾기

먼저 웹사이트를 만들기 전에 Unsplash로 이동하여 갤러리에 추가할 사진을 찾아봅시다. 튜토리얼을 위해 Unsplash에서 10장의 사진을 찾았습니다.

내 프로젝트 디렉토리에 photos 디렉토리를 만들고 거기에 모든 사진을 추가했습니다.

2. HTML

다음으로 웹 페이지를 만듭니다. <h1> 제목과 사진( <div> s)이 포함된 <img>가 있는 매우 기본적인 HTML 파일이 될 것입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My gallery</title>
</head>

<body>
    <h1>My gallery</h1>

    <div id="photos">
        <img src="photos/01.jpg" alt="A photo" />
        <img src="photos/02.jpg" alt="A photo" />
        <img src="photos/03.jpg" alt="A photo" />
        <img src="photos/04.jpg" alt="A photo" />
        <img src="photos/05.jpg" alt="A photo" />
        <img src="photos/06.jpg" alt="A photo" />
        <img src="photos/07.jpg" alt="A photo" />
        <img src="photos/08.jpg" alt="A photo" />
        <img src="photos/09.jpg" alt="A photo" />
        <img src="photos/10.jpg" alt="A photo" />
    </div>
</body>

</html>

☝️ 기다려, 기다려! 쇠스랑을 잡기 전에 "사진"이 특히 우리 사진 10장 모두에 대한 끔찍한 대체 텍스트라는 것을 알고 있습니다. 그러나 이것은 자습서이므로 잠시 동안 함께 생활해야 합니다.

이제 브라우저에서 페이지를 열면 잘못 배치된 큰 이미지로 인해 끔찍하게 보일 것입니다.

다음으로 CSS를 추가해 보겠습니다.

3. 모바일 스타일

이제 HTML이 준비되었으므로 브라우저 창을 옆으로 잡고 너비를 약 300px로 줄입니다. 이제 모바일용 갤러리를 디자인할 수 있습니다. CSS는 다음과 같습니다.

*{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#photos{
    margin-top: 30px;
}

#photos img{
    display: block;
    width: 100%;
    margin-top: 9px;
}

이것이 우리 CSS가 하는 일입니다:

먼저 margin: 0 및 padding: 0 를 사용하여 CSS를 재설정합니다.

전체 사이트의 글꼴 설정

사진에 약간의 여백을 줍니다.

각 사진이 화면 너비를 채우도록 설정하고 각 사진에 약간의 여백을 둡니다.

그게 다야.

이처럼 모바일 친화적인 사진 갤러리가 있습니다.
flex 또는 grid를 한 번도 사용하지 않았습니까? 기본적으로 모든 요소가 다른 요소 아래에 배치되는 브라우저의 기본 흐름을 활용하기 때문입니다.

3. 더 큰 화면에 맞게 조정

이제 웹 사이트의 모바일 버전이 준비되었으므로 브라우저 창의 너비를 천천히 늘리고 더 큰 화면에 맞게 조정하는 방법을 확인할 수 있습니다.

이제 화면 크기가 500px 이상인 경우 사진이 2열 그리드에 표시되도록 CSS를 업데이트해 보겠습니다.

@media (min-width: 500px){
    #photos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;

        margin-top: 0;
    }
}

이제 grid 와 같은 CSS에 개선 사항을 추가하기 시작했습니다. 새로운 코드 라인을 추가하기만 하면 됩니다. 물건을 제거하는 것보다 향상시키는 것이 훨씬 쉽습니다. 이것이 바로 모바일 퍼스트가 뛰어난 이유입니다.

4. 더 큰 화면에 맞게 조정

더 큰 화면에 맞게 조정했으므로 이제 화면 크기를 조금 더 늘려 데스크탑 디스플레이에 맞게 조정할 수 있습니다.

이것은 만들기가 훨씬 더 쉽습니다. 그리드 열을 2에서 3으로 변경하기만 하면 됩니다.

@media (min-width: 900px){
    #photos{
        grid-template-columns: repeat(3, 1fr);
        width: 900px;
        margin: auto;
    }

}

또한 갤러리 그리드가 900px를 넘지 않고 margin: auto 로 중간에 고정되도록 설정했습니다.

마찬가지로 데스크탑용으로 멋지게 배치된 갤러리가 있습니다.

결론

사람들은 다양한 방식으로 웹을 사용합니다. 휴대폰에서, 데스크톱에서, 가로 모드에서, 세로 모드에서. 그들이 웹을 탐색하기 위해 무엇을 선택하든 웹 개발자로서 당신은 이것을 충족시켜야 합니다. 그렇지 않으면 당신은 그들을 잃게 될 것입니다. 반응형 웹 디자인은 귀하의 사이트가 모든 시나리오에 적합한지 확인하는 가장 좋고 가장 널리 사용되는 방법입니다. 모바일 퍼스트는 반응형 디자인을 구현하는 가장 효율적인 방법이자 가장 합리적인 방법입니다. 이 게시물이 이를 증명했습니다.

반응형 웹사이트를 직접 만드셨나요? 모바일 또는 데스크탑으로 시작하셨습니까? 알려줘요!

Reference

이 문제에 관하여(반응형 사진 갤러리를 만들어 봅시다 - 모바일 우선), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/savvasstephnds/lets-create-a-responsive-photo-gallery-mobile-first-ij9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

반응형 사진 갤러리를 만들어 봅시다 - 모바일 우선

단계