• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

안녕하세요 질문있습니다 ㅠㅠ

20.08.13 14:02 작성 조회수 164

1

이번강의 보고 따라해봤는데

display: inline-block; 을 .item에 넣어도 옆으로 붙지를 않아서

한줄로 나오지를 않더라구요

뭘 잘못한건지 모르겠어서요 ㅠㅠ

뭐가 잘못된걸까요..??

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>오버하면 상세설명 나타나는 상품목록</title>
    <style>
        .items {
            text-align: center;
        }
        .item {
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 1px solid #ddd;
            position: relative;
            margin: 10px;
        }
        .caption {
            width: 300px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.7);
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
            padding-top: 40px;
            opacity: 0;
            transition: 0.5s;
        }
        .caption a {
            color: #fff;
            background-color: teal;
            padding: 7px;
            border-radius: 3px;
            text-decoration: none;
        }
        .caption a:hover {
            background-color: #fff;
            color: #000;
        }
        .item:hover .caption {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="items">
        <div class="item">
            <img src="1.jpg" alt="">
            <div class="caption">
                <h2>라이언인형</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing.
                </p>
                <p>Price : <s>$12</s> $10</p>
                <a href="#none">view detail</a>
            </div>
        </div>
    </div>
    <div class="items">
        <div class="item">
            <img src="1.jpg" alt="">
            <div class="caption">
                <h2>라이언인형</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing.
                </p>
                <p>Price : <s>$12</s> $10</p>
                <a href="#none">view detail</a>
            </div>
        </div>
    </div>
    <div class="items">
        <div class="item">
            <img src="1.jpg" alt="">
            <div class="caption">
                <h2>라이언인형</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing.
                </p>
                <p>Price : <s>$12</s> $10</p>
                <a href="#none">view detail</a>
            </div>
        </div>
    </div>
</body>
</html>
course-thumbnail

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 hover 활용한 실전 퍼블리싱 01(오버하면 상세설명 나타나는 상품목록)

강의실 바로가기

답변 2

·

답변을 작성해보세요.

4

들블리셔님의 프로필

들블리셔

2020.08.13

.items{

     .item1{}

     .item2{}

     .item3{}

} 

이런식으로 하셔야하는데

items를 각각 주셨네요!

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>오버하면 상세설명 나타나는 상품목록</title>

    <style>

        .items {

            text-align: center;

        }

        .item {

            display: inline-block;

            width: 300px;

            height: 300px;

            border: 1px solid #ddd;

            position: relative;

            margin: 10px;

        }

        .caption {

            width: 300px;

            height: 300px;

            background-color: rgba(0, 0, 0, 0.7);

            position: absolute;

            top: 0;

            left: 0;

            color: #fff;

            padding: 20px;

            box-sizing: border-box;

            padding-top: 40px;

            opacity: 0;

            transition: 0.5s;

        }

        .caption a {

            color: #fff;

            background-color: teal;

            padding: 7px;

            border-radius: 3px;

            text-decoration: none;

        }

        .caption a:hover {

            background-color: #fff;

            color: #000;

        }

        .item:hover .caption {

            opacity: 1;

        }

    </style>

</head>

<body>

    <div class="items">

        <div class="item">

            <img src="1.jpg" alt="">

            <div class="caption">

                <h2>라이언인형</h2>

                <p>

                    Lorem ipsum dolor sit amet, consectetur adipisicing.

                </p>

                <p>Price : <s>$12</s> $10</p>

                <a href="#none">view detail</a>

            </div>

        </div>

        <div class="item">

            <img src="1.jpg" alt="">

            <div class="caption">

                <h2>라이언인형</h2>

                <p>

                    Lorem ipsum dolor sit amet, consectetur adipisicing.

                </p>

                <p>Price : <s>$12</s> $10</p>

                <a href="#none">view detail</a>

            </div>

        </div>

        <div class="item">

            <img src="1.jpg" alt="">

            <div class="caption">

                <h2>라이언인형</h2>

                <p>

                    Lorem ipsum dolor sit amet, consectetur adipisicing.

                </p>

                <p>Price : <s>$12</s> $10</p>

                <a href="#none">view detail</a>

            </div>

    </div>

</body>

</html>

이렇게 한 번 해보셔요^^!!

3

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2020.08.14

위에 들블리셔 님께서 말씀하신 것 처럼 html 코드에서 .items 안에 .item이 3개 있으면 됩니다.
지금은 .items 과 .item이 각각 되어 있어서 그런거에요.
들블리셔 님~ 질문에 도움주셔서 감사합니다~^^

이 글과 비슷한 Q&A