DevSSOM

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

HTML, CSS

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

데브쏨 2021. 7. 16. 17:32
반응형

웹페이지 구조

상단 영역은 <header>, 주요 정보는 <main>, 하단에는 웹사이트를 소유하고 있는 소유권자의 정보가 담긴 <footer>로 구성. 상단 영역에는 로고가 들어갈 자리와 3개의 메뉴 버튼으로 구성되어 있고, 중간에는 각각의 주요 정보들이 담겨있는 영역들이 있고, 하단의 왼쪽에는 copyright, 오른쪽에는 회사 주소와 관련된 정보가 있음. <main>태그의 주요정보 각각은 <article>로 표현.

 

 

쇼핑몰 상단 영역 만들기

상단 영역에서 왼쪽에는 로고 버튼이, 오른쪽에는 세 개의 메뉴 버튼이 있음. 이때 각각의 메뉴 버튼 배경색이 전부 다름. 두 영역은 가운데를 기준으로 정확히 반으로 나누어져 있음.

기본 코드

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

  </div>

</body>
</html>

 

 

 

>>>

하나하나 따라해보기

 

1. index.css 파일에 다음 속성값을 작성. 모든 영역에서 margin, padding을 0으로 설정하고, .container에서 기본 바 넓이를 960px로 설정.

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
}

2. <ol>, <ul>의 불렛 설정과 <a>의 텍스트 설정을 적용. 

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

3. 상단 영역 전체 #intro의 넓이와 높이를 설정. width: 100%, height: 80px

#intro {
  width: 100%;
  height: 80px;
}

4. 왼쪽 로고 영역 #intro h1에 대한 css 속성을 작성.

#intro h1 {
  float: left;
  width: 50%;
  height: 80px;
  background-color: #fbfbfb;
}

#intro h1 a {
  display: block;
  padding: 22px 0 0 30px;
  font-size: 30px;
}

5. 오른쪽 메뉴 영역 #intro nav에 대한 css 속성을 작성.

#intro nav {
  float: right;
  width: 50%;
  height: 80px;
  background-color: pink;
}

#intro nav ul li {
  width: 33.33333%;
  height: 80px;
  /* display: inline-block; */
  float: left;
  text-align: center;
  line-height: 80px;
}

6. #intro nav ul li의 각 클래스에 대한 배경색을 설정.

#intro nav ul li.one {
  background-color: #efeff6;
}
#intro nav ul li.two {
  background-color: #dcdcec;
}
#intro nav ul li.three {
  background-color: #cbcae3;
}

7. 마지막으로 오른쪽 영역 메뉴탭의 폰트 크기와 굵기를 설정.

#intro nav ul li a {
  font-size: 20px;
  font-weight: bold;
}

 

결과화면

 

 

 

728x90
반응형
저작자표시

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

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