DevSSOM

HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역) 본문

HTML, CSS

HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역)

데브쏨 2021. 7. 18. 22:48
반응형

쇼핑몰 하단 영역 만들기

<footer>로 표시되는 하단 영역의 왼쪽에는 저작권 정보, 오른쪽에는 주소지 정보가 있음. 두 영역은 가운데를 기준으로 정확히 반으로 나눠짐. 

 

기본코드

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

    <footer id="footer">

        <div class="copyright">
            <p>Copyright © 2016-2018 elice. All rights reserved.</p>
        </div>

        <div class="address">
            <p>대전광역시 유성구 문지로 193 KAIST 문지캠퍼스 진리관 T326호</p>
        </div>

    </footer>

  </div>

</body>
</html>

 

>>>

 

하나하나 따라해보기

 

1. 하단 영역 전체 #footer에 대한 css 속성을 작성. HTML 코드는 위의 긴 코드로 확인하는 대신 <footer>태그만 보면, 아래와 같음.

<footer id="footer">
    <div class="copyright">
        <p>Copyright © 2016-2020 elice. All rights reserved.</p>
    </div>
    <div class="address">
        <p>대전광역시 유성구 문지로 193 KAIST 문지캠퍼스 진리관 T326호</p>
    </div>
</footer>

2. <footer> 태그 위쪽까지는 float 속성이 적용되어 있음. 그래서 <footer>에선 clear 속성을 써줘야됨. 안전장치 개념으로써 clear: both;부터 작성하고 시작.

#footer {
  clear: both;
  width: 100%;
  height: 80px;
  background-color: #f9f9f9;
}

3. 왼쪽 저작권 영역 #footer .copyright에 대한 css 속성을 작성. 

#footer .copyright {
  float: left;
  width: 50%;
}

#footer .copyright p {
  font-size: 14px;
  color: #999;
  padding: 32px 0 0 40px;
}

4. 오른쪽 주소 영역 #footer .address에 대한 css 속성을 작성.

#footer .address {
  float: right;
  width: 50%;
}

#footer .address p {
  font-size: 14px;
  color: #999;
  padding: 32px 40px 0 0;
  text-align: right;
}

 

결과 화면

728x90
반응형
저작자표시

'HTML, CSS' 카테고리의 다른 글

HTML, CSS - Animation 속성  (0) 2021.08.07
HTML, CSS - Transition 속성  (0) 2021.08.06
HTML, CSS - Transform 속성  (0) 2021.08.05
HTML/CSS - 간단한 쇼핑몰 만들기 실습 1(상단 영역)  (0) 2021.07.16
CSS - 레이아웃에 영향을 미치는 속성  (0) 2021.07.15
CSS - 마진 병합 현상  (0) 2021.07.14
CSS - 박스 모델  (0) 2021.07.13
'HTML, CSS' 관련 글 more
댓글