테킷스쿨에는 멋쟁이사자처럼 [대학11기]프론트엔드 온보딩 트랙 강의가 있습니다.
멋쟁이사자처럼 대학 동아리에 소속되어 활동을 시작하며, 이 강의를 수강할 수 있게 되었습니다.
이번에 리뷰하려는 것은 조경민 강사의 ✨챕터 11 : 웹페이지 구성하기✨ 입니다.
① 레이아웃 개요
-
nav
-
header
-
section
* article -
footer
② header 작성
vscode를 편집기로 작성을 시작한다.
!느낌표 + enter을 통해 자동으로 html파일 기본 구성 작성을 마칠 수 있다.
그밖에 googlefont, fontawsome을 사용하기 위한 추가 코드들 header부분에 작성해 준비를 마쳐 준다.
필자의 경우 선택한 폰트 등이 강의와 조금 달라 아래와 같은 코드로 작성했다.
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃</title>
<link rel="stylesheet" href="./stylesheet.css">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@500&display=swap" rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>
③ body - nav 작성
이와 같은 이미지를 만들기 위해서 html파일의 네비게이션 영역과 css 파일의 코드를 수정했다.
먼저 html 파일의 코드는 아래와 같다.
<body>
<nav>
<div class="container">
<h1 class="nav-logo"><a href="./index.html"><i class="fas fa-star">Layout</i></a></h1>
<div class="nav-menu">
<ul class="nav-btn">
<li><a href="./index.html">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="https://techit.education/">Techit</a></li>
</ul>
</div>
</div>
</nav>
</body>그리고 css 코드는 아래와 같다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Sunflower', sans-serif;
}
a:link, a:visited {
text-decoration: none;
color: black;
}
.container {
width: 960px;
margin: 0 auto;
}
nav {
height: 80px;
background-color: rosybrown;
line-height: 80px;
}
nav::after { //layout과 '홈' 내용 그 사이에 공간을 만들어 고정시키기
content: "";
display: block;
clear: both;
}
.nav-logo {
font-size: 50px;
float: left;
margin: 0;
}
.nav-menu {
float: right;
}
.nav-btn {
list-style-type: none;
margin: 0;
}
ul.nav-btn > li {
float: left;
margin-left: 20px;
font-size: 25px;
margin-top: 10px;
}④ body - header 작성
위와 같은 결과를 만들기 위해서 네비게이션바에 이어서 헤더 부분을 수정했다.
아래는 수정한 html 코드이다.
<header class="hd">
<div class="container">
<h2 class="hd-title">POSSIVILITY TO REALITY!</h2>
<p class="hd-content">여러분을 응원합니다!</p>
</div>
</header>아래는 수정한 css 파일이다.
/* 헤더 */
.hd {
position: relative;
height: 600px;
text-align: center;
}
.hd-title {
font-size: 80px;
margin-top: 0;
margin-bottom: 30px;
padding-top: 200px;
}
.hd-content {
font-size: 25px;
}
.hd::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.8; /* 불투명도 */
background-image: url(./test5.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hd .container {
position: relative;
}opacity 값을 수정해 배경에 불투명도를 덧씌운다는 점이 특징이다.
⑤ body - section 작성
세 개로 구분된 섹션 부분을 작성하기 위해 수정한 코드이다. 아래는 완성하고자 하는 이미지이다.
이는 수정한 html 코드이다.
<section class="sec">
<div class="container">
<article class="artc">
<div class="card-img">
<img src="./test1.jpg" alt="이미지1">
</div>
<p>이미지1</p>
</article>
<article class="artc">
<div class="card-img">
<img src="./test2.jpg" alt="이미지2">
</div>
<p>이미지2</p>
</article>
<article class="artc">
<div class="card-img">
<img src="./test3.jpg" alt="이미지3">
</div>
<p>이미지3</p>
</article>
</div>
</section>아래는 수정한 css 코드이다.
/* section */
.sec {
text-align: center;
padding: 100px 0;
background-color: peachpuff;
}
.sec article {
float: left;
width: 300px;
margin-right: 30px;
}
.sec article:last-child {
margin-right: 0;
}
.sec article img {
width: 100%;
height: auto;
}
.card-img {
overflow: hidden;
height: 300px;
width: 300px;
}
.sec::after {
content: "";
display: block;
clear: both;
}위의 이미지는 가로 세로를 300px로 만들어 자른 것이다. 그런데 원본 이미지의 크기가 300px이 안될 경우, 첨부한 사진과 같이 비어있는 부분이 생기기도 한다.
⑥ body - footer 작성
특히 마지막 부분에 주목해서 본다면, footer 부분을 수정해 작성했다.
html 부분에 추가한 코드는 아래와 같다.
<footer class="ft">
<div class="container">
<p>© 2023 JIMIN. ALL RIGHT RESERVED. </p>
</div>
</footer>css 부분에 추가한 코드는 아래와 같다.
/* footer */
.ft {
padding: 15px;
text-align: center;
background-color: palevioletred;
}하나하나 내가 작성한 코드가 바로바로 반영되어 시각적으로 보이는 것이 재미있고, 흥미롭다.
더 다양한 강의노트 및 강좌 후기 👉🏻 https://blog.naver.com/jimin201396
아둥바둥