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

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

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

작성

230

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

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>

jquery HTML/CSS

답변 2

들블리셔

.items{

.item1{}

.item2{}

.item3{}

}

이런식으로 하셔야하는데

items를 각각 주셨네요!

<!DOCTYPE html>

<head>

<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>

<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>

<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>

<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>

</body>

</html>

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

코딩웍스(Coding Works)

지식공유자

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

인프런 커뮤니티 질문&답변

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