카테고리 없음

쇼핑몰 본문 영역 만들기

onebeans 2023. 4. 15. 15:47

본문 영역에는 ‘엘리스에 오신 여러분 환영합니다! :)’ 를 기준으로 위아래에 각각 4개씩, 총 8개의 이미지가 있습니다. 이미지 영역에는 이미지와 타이틀 정보가 들어있습니다. 각 이미지 영역은 모두 크기가 동일하며, 각각의 배경색은 서로 다릅니다.

실습 해설 영상을 차근차근 따라해 보며 쇼핑몰 본문 영역을 완성해 봅시다!

 

  1. index.css파일을 열어 아래 속성값을 작성합니다.
  2. 전체 이미지 영역 #main article과 #main article a에 대한 css 속성을 작성합니다
  3. 각 이미지 영역 #main article의 클래스에 대한 css 속성을 작성합니다.
  4. 이미지 자체 #main article img에 대한 css 속성을 작성합니다.
  5. 이미지 영역 내 타이틀 정보 #main article h2에 대한 css 속성을 작성합니다.
  6. 중간의 텍스트 영역 #main article.text에 대한 css 속성을 작성합니다.
  7. 텍스트 자체#main article.text p에 대한 css 속성을 작성합니다.

index.html

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>쇼핑몰 본문 만들기</title>
 
  <link rel="stylesheet" href="index.css">  
 
</head>
<body>

  <div class="container">

    <header id="intro">

        <h1>
            <a href="https://academy.elice.io/">엘리스 사전</a>
        </h1>
       
        <nav>
            <ul>
                <li class="one"><a href="#">캐릭터 소개</a></li>
                <li class="two"><a href="#">줄거리</a></li>
                <li class="three"><a href="#">부록</a></li>
            </ul>
        </nav>

    </header>


    <main role="main" id="main">

        <article class="one">
            <a href="#">
                <img src="image1.png" alt="White Rabbit">
                <h2>하얀토끼</h2>
            </a>
        </article>
       
        <article class="two">
            <a href="#">
                <img src="image2.png" alt="Cheshire Cat">
                <h2>체셔 고양이</h2>
            </a>
        </article>
       
        <article class="three">
            <a href="#">
                <img src="image3.png" alt="Queen of Hearts">
                <h2>하트여왕</h2>
            </a>
        </article>
       
        <article class="one">
            <a href="#">
                <img src="image4.png" alt="Mad Hatter">
                <h2>모자장수</h2>
            </a>
        </article>
       
        <article class="text">
            <p>엘리스에 오신 여러분 환영합니다! :)</p>
        </article>

        <article class="two">
            <a href="#">
                <img src="image5.png" alt="Dodo">
                <h2>도도새</h2>
            </a>
        </article>
       
        <article class="three">
            <a href="#">
                <img src="image6.png" alt="Caterpillar">
                <h2>애벌레</h2>
            </a>
        </article>
       
        <article class="one">
            <a href="#">
                <img src="image7.png" alt="Card Soldier">
                <h2>카드병정</h2>
            </a>
        </article>

        <article class="two">
            <a href="#">
                <img src="image8.png" alt="Golden Key">
                <h2>황금열쇠</h2>
            </a>
        </article>

    </main>

  </div>

</body>
</html>

index.css

#main article{width:50%; height: 320px; float: left;}
#main article a{display:block; widht:100%;height:100%;}

#main article.one{background-color:#532fa1;}
#main article.two{background-color:#a44789;}
#main article.three{background-color:#3ab6bc;}

#main article img{widht:100%;}
#main article h2{color:#fff; font-size: 25px; text-align: center; padding:10px 0;}

#main article.text{width:100%; height:66px;}

#main article.text p{text-align:center; font-size: 20px; font-weight: bold; padding:20px 0; border: solid 1px #000;}

 

결과화면