본문 바로가기
Example

[E-HTML&CSS] one true layout 예시 + 연습문제

by 송기동 2023. 8. 14.
728x90

one true layout(현재 홈페이지를 만드는 전형적인 구조)

결과

html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_oneTrueLayout_basic.css" />
  </head>
  <body>
    <!-- TODO: one true layout == 현재 홈페이지를 만드는  전형적인 구조 -->
    <!-- container == 1 page 디자인 -->
    <div id="container">
      <!-- 머리말 시작 -->
      <header id="header">
        <h1>사이트 제목</h1>
      </header>
      <!-- 머리말끝 -->
      <!-- 사이드메뉴 시작 -->
      <aside id="sidebar">
        <h2>사이드바</h2>
      </aside>
      <!-- 사이드메뉴 끝 -->
      <!-- 본문 시작 -->
      <section id="contents">
        <h2>본문</h2>
      </section>
      <!-- 본문 끝 -->
      <!-- 꼬리말 시작 -->
      <footer id="footer">
        <h2>꼬리말</h2>
      </footer>
      <!-- 꼬리말 끝 -->
    </div>
  </body>
</html>

css 코드

/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

/* 전체 페이지 크기 정하기 */
#container {
  width: 1200px;
  /* 중앙정렬 : auto(오른쪽/왼쪽 여백을 똑같이 정함(중앙정렬이 됨))*/
  /* 사용법 : margin: 상/하 auto */
  margin: 20px auto;
}

/* 머리말 */
#header {
  height: 120px;
  /* 임시 (크기를 알기 위해서) */
  background-color: gray;
}

/* 디자인 계산 : 전체(1200px) == 사이드(300px) + 본문(900px) */
/* 사이드바(좌측메뉴) */
#sidebar {
  width: 300px;
  height: 600px;
  /* 임시 */
  background-color: aqua;
  /* 좌측배치 */
  float: left;
}

/* 본문(우측) */
#contents {
  width: 900px;
  height: 600px;
  background-color: aquamarine;
  float: right;
}

/* 꼬리말 */
#footer {
  /* float 영향 제거 */
  clear: both;
  height: 100px;
  background-color: beige;
}

연습문제1

문제1. 위와 같이 만들어보시오

html 코드

<!-- 02_exam_company.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_exam_company.css" />
    <!-- TODO: 힌트 -->
    <!-- TODO: 전체 페이지(#page): width: 995px; margin: 0 auto -->
    <!-- TODO: header:  width: 995px; height: 100px; -->
    <!-- TODO: nav: width: 995px; -->
    <!-- TODO: footer: width: 995px; -->
    
  </head>
  <body>
    <div id="page">
      <header>
        <div id="logo">
          <img src="./img/logo.png" />
        </div>
        <div id="top">로그인 | 회원가입 | 사이트 맵 | 회사소개</div>
      </header>
      <div class="clear"></div>
      <!-- float 속성 해제 -->
      <nav>
        <ul>
          <li><img src="./img/menu01.png" /></li>
          <li><img src="./img/menu02.png" /></li>
          <li><img src="./img/menu03.png" /></li>
          <li><img src="./img/menu04.png" /></li>
          <li><img src="./img/menu05.png" /></li>
          <li><img src="./img/menu06.png" /></li>
        </ul>
      </nav>
      <div class="clear"></div>
      <!-- float 속성 해제 -->
      <section>
        <img src="./img/main_img.png"
            width="600px" height="200px"
         />        
      </section>
      <aside>
        <ul>
          <li><img src="./img/banner01.png" /></li>
          <li><img src="./img/banner02.png" /></li>          
        </ul>
      </aside>
      <div class="clear"></div>
      <!-- float 속성 해제 -->
      <footer>
        <div id="address">
          <img src="./img/address.png" />
        </div>
        <div id="customer">
          <img src="./img/customer.png" />
        </div>
      </footer>
      <div class="clear"></div>
      <!-- float 속성 해제 -->
    </div>
    <!-- 아이디 page의 끝 -->
  </body>
</html>

css 코드

/* 문제 풀이 */
/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

/* 목록 점 없애기 */
li {
  list-style-type: none;
}

/* 전체 페이지 */
#page {
  width: 995px;
  margin: 0 auto;
  background-color: antiquewhite;
}

/* 머리말 디자인 */
header {
  width: 995px;
  height: 100px;
  border-bottom: 1px solid #cccccc;
}

/* 로고 디자인 : 왼쪽배치 */
#logo {
  float: left;
}

/* 소메뉴 디자인 : 오른쪽배치 */
#top {
  float: right;
  margin-top: 30px;
}

/* 더미 div : float 영향 제거용 */
.clear {
  clear: both;
}

/* 대메뉴 크기 */
nav {
  width: 955px;
  height: 70px;
  margin-top: 10px;
}

/* 대메뉴(이미지들) 세로 --> 가로배치 */
/* inline-block : 가로로 배치하되 크기가 모자라면 줄바꿈이 됨 */
/* 세로 -> 가로배치 : display(inline-block), float:left */
nav li {
  display: inline-block;
  width: 150px;
}

/* 본문 : 좌측 */
section {
  float: left;
  width: 650px;
}

/* 사이드바 : 우측 */
aside {
  float: right;
  width: 345px;
}

/* 꼬리말 */
footer{
    width: 995px;
    height: 100px;
    margin-top: 20px;
    border-top: 1px solid #cccccc;
}
/* 꼬리말 - 주소 */
#address{
    float: left;
    margin-top: 30px;
    margin-left: 50px;
}
/* 꼬리말 - 고객센터 */
#customer{
    float: right;
    margin-top: 20px;
    margin-right: 30px;
}

연습문제2

문제2. 위와 같이 만들어보시오

html 코드

<!-- 03_exam_photo_academy.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/03_exam_photo_academy.css" />
    <!-- TODO: 힌트 -->
    <!-- TODO: 전체 페이지(header) :  width: 1140px; height: 100px; -->
    <!-- TODO: 큰 로고 이미지(#main_img) background-size: cover;  height: 281px; -->
  </head>

  <body>
    <header>
      <!-- 로고 시작 -->
      <div id="logo">
        <img src="img/logo.png" />
      </div>
      <!-- 로고 끝 -->

      <!-- 소메뉴 시작 -->
      <nav id="menus">
        <!-- 소소메뉴 #1 시작 -->
        <div id="top_menu">로그인 | 회원가입 | 공지사항</div>
        <!-- 소소메뉴 #1 끝 -->

        <!-- 소소메뉴 #2 시작 -->
        <ul id="main_menu">
          <li>사진이론</li>
          <li>사진구도</li>
          <li>사진작가</li>
          <li>갤러리</li>
          <li>커뮤니티</li>
        </ul>
        <!-- 소소메뉴 #2 끝 -->
      </nav>
      <!-- 소메뉴 끝 -->
    </header>
    <!-- 단축키 : 찾기/바꾸기 ctrl + f/r -->
    <!-- 이미지 헤더 -->
    <section id="main_img"></section>

    <!-- 본문( 소본문 + 사이드바 ) 시작 -->
    <section id="contents">
      <!-- 사이드바 시작 -->
      <nav id="sub_menu">
        <h3>사진이론</h3>
        <ul>
          <li>카메라 동작 원리</li>
          <li>무조건 찍어보자!</li>
          <li>피사체의 배경</li>
          <li>조리개와 심도</li>
          <li>카메라 촬영 모드</li>
        </ul>
      </nav>
      <!-- 사이드바 끝 -->

      <!-- 소본문 시작 -->
      <div id="main_contents">
        <h3>카메라 동작 원리 background-position: top center;</h3>
        <p>
          DSLR 카메라에서 DSLR은 “Digital Single Lens Reflex”의 약어로써
          우리말로는 디지털 일안 반사식 카메라을 의미합니다. DSLR은 디지털
          카메라로써 카메라 내부에 들어온 빛이 상단의 펜타프리즘을 통하여
          뷰파인더에 맺히게 되어 셔터를 누르기 전에 뷰 파인더를 통하여 피사체를
          확인할 수 있게 됩니다.
        </p>
        <div id="figure">
          <img src="./img/dslr.png" />
        </div>
        <p>
          [그림 1]은 DSLR 카메라에서 셔터를 누르기 전의 상태를 보여주는데 렌즈를
          통해 들어오는 빛은 카메라 내부에서 다음과 같은 과정을 거치게 됩니다.
        </p>
        <ul>
          <li>① 빛이 카메라 렌즈를 통과합니다.</li>
          <li>② 빛이 반사 거울에 반사되어 위쪽으로 향합니다.</li>
          <li>③ 빛이 펜타프리즘 거울에 반사되어 뷰파인더로 향합니다.</li>
          <li>④ 들어온 빛에 의해 뷰파인터들 통하여 피사체를 볼 수 있습니다.</li>
        </ul>
      </div>
      <!-- 소본문 끝 -->
    </section>
    <!-- 본문( 소본문 + 사이드바 ) 끝 -->

    <div class="clear"></div>
    <!-- float 속성 해제 -->
    <footer>
      <!-- 전체 꼬리말 div 시작 -->
      <div id="footer_box">
        <!-- 꼬리말 로고 시작 -->
        <div id="footer_logo">
          <img src="img/footer_logo.png" />
        </div>
        <!-- 꼬리말 로고 끝 -->

        <!-- 꼬리말 주소 시작 -->
        <ul id="address">
          <li>서울시 강남구 삼성동 1234 우:123-1234</li>
          <li>TEL:031-123-1234 Email : email@domain.com</li>
          <li>COPYRIGHT (C) 루바토 ALL RIGHTS RESERVED</li>
        </ul>
        <!-- 꼬리말 주소 끝 -->
      </div>
      <!-- 전체 꼬리말 div 끝 -->
    </footer>
  </body>
</html>

css 코드

/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

/* 목록 점 없애기 */
li {
  list-style-type: none;
}

/* 폰트, 글자크기, 색깔 */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #444444;
}

/* 더미 div : float 영향 제거용 */
.clear {
  clear: both;
}

/* 머리말 디자인 */
header {
  width: 1140px;
  height: 100px;
  margin: 0 auto;
}

/* 머리말 - 로고 (왼쪽) */
#logo {
  float: left;
  margin: 20px 0 0 20px;
}

/* 머리말 - 소메뉴 (오른쪽) */
#menus {
  float: right;
}

/* 머리말 - 소메뉴 - 소소메뉴#1 */
#top_menu {
  text-align: right;
  margin-top: 20px;
}

/* 머리말 - 소메뉴 - 소소메뉴#2 */
#main_menu {
  margin-top: 20px;
  font-size: 20px;
  color: black;
}

/* 소소메뉴#2 : 세로->가로배치 */
#main_menu li {
  display: inline-block;
  margin-left: 80px;
}

/* 대메뉴 부분 - 큰 로고 이미지 */
#main_img {
  /* 배경이미지 넣기 */
  background-image: url("../img/main_img.png");
  /* 배경이미지 반복중지 */
  background-repeat: no-repeat;
  /* 배경이미지 크기 */
  /* TODO: background-size: cover;(최대한 이미지를 늘려서 화면을 채움, 원본 훼손) */
  background-size: cover;
  /* 배경이미지 위치지정 */
  background-position: center;
  height: 281px;
  margin-top: 20px;
}

/* 본문(소본문(main_contents) + 사이드바(sub_menu)) : 1140px */
#contents {
  width: 1140px;
  margin: 0 auto;
}

/* 본문 - 사이드바(왼쪽) */
#sub_menu {
  float: left;
  width: 250px;
  margin-top: 25px;
}

/* 본문 - 사이드바(왼쪽) - li : 밑줄(점선) */
#sub_menu li {
  border-bottom: 1px dotted #cccccc;
  padding: 10px;
}

/* 본문 - 소본문 */
#main_contents {
  float: right;
  width: 890px;
  margin-top: 25px;
}

/* 꼬리말 : 로고(왼쪽) + 주소(오른쪽) */
#footer_box {
  width: 1140px;
  margin: 0 auto;
}

footer {
  height: 150px;
  background-color: #2c2a29;
  margin-top: 30px;
}

/* 꼬리말 : 로고(왼쪽) */
#footer_logo {
  float: left;
  margin-top: 50px;
  margin-left: 30px;
}

/* 꼬리말 : 주소(오른쪽) */
#address {
  float: right;
  color: white;
  margin-top: 50px;
  margin-right: 30px;
}

연습문제3

문제3. 위와 같이 만들어보시오

html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Dream Jeju</title>
    <link rel="stylesheet" href="./css/04_exam_structure_header.css" />
    <link rel="stylesheet" href="./css/04_exam_structure_body.css" />
    <link rel="stylesheet" href="./css/04_exam_structure_footer.css" />

    <!-- TODO: .detail p 태그 (단란 글) : float 안씀 -->
    <!-- TODO: .detail > img (이미지) : float:left -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Merienda&display=swap");
    </style>
  </head>

  <body>
    <div id="container">
      <!-- TODO: header 시작 -->
      <header>
        <div id="logo">
          <a href="#">
            <h1>Dream Jeju</h1>
          </a>
        </div>
        <nav>
          <ul id="topMenu">
            <li><a href="#">단체 여행</a></li>
            <li><a href="#">맞춤 여행</a></li>
            <li><a href="#">갤러리</a></li>
            <li><a href="#">문의하기</a></li>
          </ul>
        </nav>
      </header>
      <!-- TODO: header 끝 -->
      <!-- TODO: 본문 시작 -->
      <main class="contents">
        <section id="headling">
          <h2>몸과 마음이 치유되는 섬</h2>
          <div class="detail">
            <img src="img/healing.jpg" />
            <b>
              <p>쉼(Healing)의 공간으로 안내합니다</p>
            </b>
            <p>
              탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고
              올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.
            </p>
          </div>
          <div class="schedule">
            <h3>상세 일정</h3>
            <ul>
              <li>여행 기간 : 2박 3일</li>
              <li>
                여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)
              </li>
            </ul>
          </div>
        </section>
        <section id="activity">
          <h2>다양한 액티비티가 기다리는 섬</h2>
          <div class="detail">
            <img src="img/activity.jpg" />
            <b>
              <p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p>
            </b>
            <p>둘러보기만 하는 여행을 하셨나요?</p>
            <p>
              하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛
              속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽
              전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서
              느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?
            </p>
          </div>
        </section>
      </main>
      <!-- TODO: 본문 끝 -->
      <!-- TODO: 꼬리말 시작 -->
      <footer>
        <div id="bottomMenu">
          <ul>
            <li><a href="#">회사 소개</a></li>
            <li><a href="#">개인정보처리방침</a></li>
            <li><a href="#">여행약관</a></li>
            <li><a href="#">사이트맵</a></li>
          </ul>
        </div>
      </footer>
      <!-- TODO: 꼬리말 끝 -->
    </div>
  </body>
</html>

css  코드(html - header 부분)

/* 여백 초기화 */
* {
  padding: 0;
  margin: 0;
}

/* a 링크에 밑줄 없애기 */
a {
  text-decoration: none;
}

/* 리스트 점 없애기 */
ul {
  list-style-type: none;
}

/* 전체 페이지 디자인 */
#container {
  width: 1200px;
  margin: 0 auto;
}
/* ******************************* */
/* header영역 - 로고와 네비게이션 */
/* ******************************* */

/* 헤더 - 로고(#logo) + 네비게이션(nav) */
header {
  width: 100%;
  height: 100px;
  background-color: #045;
}

/* 헤더 - 로고(#logo) */
#logo {
  float: left;
  width: 250px;
  height: 100px;
  /* 글자 세로 중앙 정렬 : height 값 == inline-height 값 */
  line-height: 100px;
  padding-left: 20px;
}

#logo h1 {
  font-family: "Merienda", cursive;
  font-size: 40px;
  font-weight: 600;
  color: white;
}

/* 헤더 - 네비게이션(nav) */
nav {
  float: right;
  width: 900px;
  height: 100px;
  /* 메뉴를 아내로 내리기위해 안쪽여백 추가(위쪽) */
  padding-top: 40px;
}

#topMenu > li{
    display: inline-block;
}

#topMenu > li > a{
    font-size: 1.1em;
    color: white;
    font-weight: 600;
    padding: 20px 60px;
}

/* 마우스가 위로 올라갔을때 디자인 적용 :hover */
#topMenu > li > a:hover{
    color: skyblue;
}

(html - body 부분)

body {
  margin-top: 20px;
  list-style: none;
}

/* 본문 영역 */
.contents {
  width: 1000px;
  margin: 50px auto;
}

main > section {
  margin-top: 60px;
}

/* 본문 - 글 */
.detail p {
  margin-bottom: 30px;
  color: black;
}

/* 본문 - 이미지 */
.detail > img {
  border-radius: 5%;
  float: left;
  margin-right: 50px;
}

/* 여백들 추가 */
/* 본문 - 제목 */
main h2 {
  font-size: 1.5em;
  margin-bottom: 40px;
}

/* div : 이미지 + 상세설명 */
main div {
  margin-top: 20px;
}

/* main - 소제목 */
main h3 {
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* 기타 등등 */
/* main - 상세일정 */
.schedule h3 {
  font-size: 1.2em;
}
/* main - 상세일정(li) */
.schedule ul li {
  margin-bottom: 20px;
}

(html - footer 부분)

/* 꼬리말 영역 */
footer {
  width: 1200px;
  height: 100px;
  border-top: 2px solid black;
  margin-top: 50px;
}

/* 꼬리말 - li */
#bottomMenu ul li {
  display: inline-block;
  border-right: 1px dotted gray;
  padding: 5px 20px;
}

#bottomMenu ul {
  margin-top: 15px;
  margin-left: 60px;
}

/* 꼬리말 - a태그 */
#bottomMenu ul li a {
  font-size: 15px;
  color: blue;
}

flex

css 코드

/* flex(플렉스) layout : 배치기능(좌/중앙/우) 가로/세로 모두 가능 */
/* flex 사용 시 주의점 : 부모 div - 자식 div 형태에서 속성을 부모 div에 줘야한다. */
/* 부모 div */

.container {
  background-color: beige;
  width: 1580px;
  height: 750px;
  /* flex 정의 */
  display: flex;
  /* TODO: 가로 중앙배치 */
  justify-content: center;
  /* 가로 왼쪽배치(left == start) */
  /* justify-content: flex-start; */
  /* 가로 오른쪽배치(right == end) */
  /* justify-content: flex-end; */

  /* TODO: 세로 중앙배치 */
  align-items: center;
  /* 세로 위쪽배치 */
  /* align-items: flex-start; */
  /* 세로 아래쪽배치 */
  /* align-items: flex-end; */
}
/* 자식들 box */
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

반응형 웹코딩

css 코드

/* 반응형 웹 css */
/* 사용법 : @media (max-width: 최대크기) {선택자 { 속성:값; }} */
/* 모니터 최대크기가 699px 이하일때 빨간색 : 테블릿 */
@media (max-width: 699px) {
  body {
    background-color: red;
  }
}

/* 사용법 : @media (min-width: 최소크기) {선택자 { 속성:값; }} */
/* 모니터 최소크기가 900px 이상일때 파란색 : pc */
@media (min-width: 900px) {
  body {
    background-color: blue;
  }
}

/* 사용법 : @media (min-width: 최소크기) and (max-width) {선택자 { 속성:값; }} */
/* 모니터 최소크기가 700px 이상이고 최대크기가 899px 사이일때 녹색 */
@media (min-width: 700px) and (max-width: 899px) {
  body {
    background-color: green;
  }
}
728x90

'Example' 카테고리의 다른 글

[E-JS] 반복문, 조건문, 배열 연습  (0) 2023.08.18
[E-HTML&CSS] 애니메이션 예시  (22) 2023.08.16
[E-HTML&CSS] position, transform 예시 + 연습문제  (0) 2023.08.11
[E-HTML&CSS] 반응형, 웹폰트, 특수선택자, display 예시  (15) 2023.08.09
[E-HTML&CSS] 연습문제 + 배경이미지 예시  (0) 2023.08.08

관련글

티스토리툴바