본문 바로가기
[HTML & CSS]

[HTML & CSS] 간단한 화면 만들어보기

by 북방바다코끼리표범 2023. 8. 14.

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: 힌트 : margin, font-size, color, list-style-type:none -->
    <!-- TODO: .contents { 중앙정렬; width: 1000px;}  -->
    <!-- TODO: 글과 이미지 배치 : 이미지(float 사용), 글은 float 사용않함 -->
    <!-- TODO: main > section : margin-top: 60px; -->
    <!-- TODO: .detail p 태그 (단락 글) : float 안씀, margin-bottom: 30px -->
    <!-- TODO: .detail > img (이미지) : float:left; -->
  </head>

  <body>
    <!-- container == page (1 페이지(전체 페이지)) -->
    <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(본문 , section 과 비슷) -->
      <!-- 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: 본문 끝 -->
      <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>
    </div>
  </body>
</html>

css 코드

/* 구글 웹폰트 import(외부 css 파일 가져오기의 뜻) */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');

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

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

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

/* 전체 페이지 디자인 */
#container {
    /* 가로 */
    width: 1200px;
    /* 중앙정렬 */
    margin: 0 auto;
}

/*************************************/
/* 헤더 영역 - 로고와 네비게이션       */
/*************************************/
header {
    /* 가로 */
    width: 100%;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: #045;
}

/* 헤더(header) - 로고(#logo, 왼쪽) + 네비게이션(nav, 오른쪽) */
/* 로고(왼쪽) : 가로(250px) */
#logo {
    /* 왼쪽 배치 */
    float: left;
    /* 가로 */
    width: 250px;
    /* 세로 */
    height: 100px;
    /* 글자 세로 중앙 정렬 : height 값 == line-height 값 */
    line-height: 100px;
    /* 안쪽여백 - 왼쪽 */
    padding-left: 20px;
}
/* 구글 웹폰트 적용 : Merienda */
#logo h1 {
    /* 구글 웹폰트 적용 */
    font-family: 'Merienda', cursive;
    /* 글자 크기 */
    font-size: 40px;
    /* 글자색 */
    color: white;
    /* 글자 굵기 : bold(키워드), 숫자도 가능 900까지 */
    font-weight: 600;
}

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

/* ul(#topMenu) > li : 세로 -> 가로배치 */
#topMenu > li {
    /* 가로배치 */
    display: inline-block;
}
/* #topMenu(ul) > li > a태그 */
#topMenu > li > a {
    /* 글자 크기 */
    font-size: 1.1em;
    /* 글자색 */
    color: white;
    /* 글자 굵기 : bold(키워드), 숫자도 가능 100 ~ 900까지 */
    font-weight: 600;
    /* 안쪽 여백 : 축약식 */
    /* padding : 상하 좌우 */
    padding: 20px 60px;
}
/* 마우스가 위로 올라갔을때 디자인 적용 :hover */
#topMenu > li > a:hover {
    /* 글자색 */
    color: skyblue;
}
/* 본문 영역 */
.contents {
  /* 가로 */
  width: 1000px;
  /* 중앙정렬 */
  /* margin: 상하 auto */
  margin: 50px auto;
}

/* section 별 위쪽 여백 */
main > section {
  /* 바깥여백 - 위 */
  margin-top: 60px;
}

/* 본문 - 글 */
.detail p {
  /* 글자색 */
  color: #222;
  /* 바깥여백 - 아래 */
  margin-bottom: 30px;
}

/* 본문 - 이미지 */
.detail > img {
  /* 좌측 배치 */
  float: left;
  /* 바깥여백 - 오른쪽 */
  margin-right: 50px;
  /* 둥근 사각형 : 값이 클수록 원이 됨 */
  border-radius: 20px;
}

/* 여백 들 추가 */
/* 본문 - 제목 */
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 h4 {
  /* 글자 크기 */
  font-size: 1.2em;
}

/* main - 상세일정(li) */
.schedule ul li {
  /* 바깥여백 - 아래 */
  margin-bottom: 30px;
}
/* 푸터(꼬리말) 영역 */
footer {
    /* 가로 */
    width: 1200px;
    /* 세로 */
    height: 100px;
    /* 외곽선 - 위 */
    border-top: 2px solid #222;
    /* 바깥 여백 - 위 */
    margin-top: 50px;
  }
  
  /* 꼬리말 : li -> 세로 -> 가로 */
  #bottomMenu ul li {
    /* 가로배치 */
    display: inline-block;
    /* 안쪽 여백:(축약식) */
    /* padding: 상하 좌우 */
    padding: 5px 20px;
    /* 외곽선 - 오른쪽 */
    border-right: 1px solid #ddd;
  }
  
  #bottomMenu ul {
      /* 바깥여백 - 위 */
      margin-top: 15px;
      /* 바깥여백 - 왼쪽 */
      margin-left: 60px;
  }
  
  /* 꼬리말 - a태그 */
  #bottomMenu ul li a {
      /* 글자 크기 */
      font-size: 15px;
      /* 글자색 */
      color: #666;
  }
저작자표시

'[HTML & CSS]' 카테고리의 다른 글

[HTML & CSS] 간단한 화면 만들기  (11) 2023.08.15
[HTML & CSS] 간단한 광고 화면 만들어보기  (9) 2023.08.13
[HTML & CSS] 간단한 화면 만들어보기  (0) 2023.08.12
[HTML & CSS] 간단한 홈페이지 만들어보기  (0) 2023.08.06
[HTML & CSS] 간단한 광고 만들어보기  (0) 2023.08.05

관련글

티스토리툴바