<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Wave Record</title>
</head>
<body>
<header class="header">
<div class="wrapper">
<a class="header-logo" href="#">
<img src="images/header-logo.png" alt="wave" />
</a>
<nav class="navbar">
<a class="button" href="">Home</a>
<a class="button" href="">About</a>
<a class="button" href="">Profile</a>
<a class="button" href="">Video</a>
<a class="button" href="">Contact Us</a>
</nav>
<img class="wave" src="images/wave.png" />
</div>
</header>
<main class="main">
<div class="wrapper">
<div class="main-inside">
<article class="grid">
<div class="grid-item">
<img src="images/section01.png" alt="pic" />
<section class="content">
<h2>Jaws</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make
a type specimen book.
</p>
</section>
</div>
<div class="grid-item">
<img src="images/section02.png" alt="pic" />
<section class="content">
<h2>Giants Wave</h2>
<p>
Lorem Ipsum is simply dummy text of thedummy text of thedummy
text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard. when an unknown printer took a
galley
</p>
</section>
</div>
<div class="grid-item">
<img src="images/section03.png" alt="pic" />
<section class="content">
<h2>Mavericks</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an scrambled it
to make a type specimen book.
</p>
</section>
</div>
</article>
<aside class="side-cf">
<h2>Creative Fields</h2>
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Developement</a></li>
<li><a href="#">Motion Graphic</a></li>
</ul>
</aside>
</div>
</div>
</main>
<footer class="footer">
<div class="wrapper">
<div class="footer-info">
<div class="footer-about">
<h3>About Us</h3>
<ul>
<li><a href="#">Information</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="footer-cf">
<h3>Creative Fileds</h3>
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Developement</a></li>
<li><a href="#">Motion Graphic</a></li>
</ul>
</div>
<div class="social-link">
<h3>Social Network</h3>
<div class="btns">
<a href="" class="twitter"></a>
<a href="" class="facebook"></a>
<a href="" class="pinterest"></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
body {
margin: 0;
background-color: lightgray;
}
h1,
h2,
h3 {
margin: 0;
font: inherit;
}
p {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/**/
.wrapper {
width: 70%;
margin: 0 auto;
}
h2 {
color: rgb(24, 79, 188);
font-size: 20px;
font-weight: 900;
}
.header {
background-color: rgb(24, 79, 188);
position: relative;
/*실패 ㅠㅠ background-image: url(./images/wave.png);
background-repeat: no-repeat;
background-position: ; */
}
.header a.header-logo {
display: inline-block;
margin: 30px 0;
/* margin을 적용시키기 위해 display: inline-block 을 하는 이유가 정확히 이해되지 않습니다.
인라인 엘리먼츠와 인라인 블럭의 차이 일까요?; */
}
.header nav.navbar {
background-color: rgb(85, 162, 203);
color: white;
}
.header nav.navbar a.button {
display: inline-block;
padding: 15px;
}
.header nav.navbar a.button:hover {
background-color: white;
color: black;
}
.header img.wave {
position: absolute;
left: 70%;
bottom: 0%;
}
.main {
background-color: lightgray;
padding-bottom: 30px;
}
.main .main-inside {
background-color: white;
padding: 20px;
display: flex;
gap: 20px;
}
.grid {
display: flex;
flex-direction: column;
gap: 20px;
width: 80%;
}
.grid .grid-item {
display: flex;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted gray;
}
.grid .grid-item:last-child {
padding: 0;
border-bottom: 0;
}
.grid .grid-item img {
width: 400px;
}
.grid .grid-item p {
color: gray;
margin: 20px 0;
}
.main .main-inside aside.side-cf ul {
padding: 0 10px;
margin: 10px 0;
color: gray;
line-height: 1.5;
border-left: 3px solid lightgray;
}
.footer {
padding: 30px 0;
background-color: rgb(58, 56, 56);
}
.footer .footer-info {
background-image: url(images/footer-logo.png);
background-repeat: no-repeat;
display: flex;
gap: 40px;
justify-content: right;
}
.footer .footer-info h3 {
color: white;
font-weight: 900;
}
.footer .footer-info ul {
color: gray;
margin: 10px 0;
}
.btns a {
background: url(images/icon-sprite.png) no-repeat 0 0;
width: 30px;
height: 30px;
display: inline-block;
}
.btns a.twitter {
background-position: 0 0;
}
.btns a.facebook {
background-position: -30px 0;
}
html .btns a.pinterest {
background-position: -60px 0;
}
/*이미지 스프라이트 위치 잡는 팁좀 알려주세욥..! 너무 헤맸음당 ㅠㅠ*/
전역적인 타입셀렉터는 css리셋할때만 사용하자. 구체화시켜야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Wave Record</title>
</head>
<body>
<header class="header">
<div class="wrapper">
<a class="header-logo" href="#">
<img src="images/header-logo.png" alt="wave" />
</a>
<nav class="navbar">
<a class="button" href="">Home</a>
<a class="button" href="">About</a>
<a class="button" href="">Profile</a>
<a class="button" href="">Video</a>
<a class="button" href="">Contact Us</a>
</nav>
<img class="wave" src="images/wave.png" />
</div>
</header>
<main class="main">
<div class="wrapper">
<div class="main-inside">
<article class="grid">
<div class="grid-item">
<img src="images/section01.png" alt="pic" />
<section class="content">
<h2 class="title">Jaws</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make
a type specimen book.
</p>
</section>
</div>
<div class="grid-item">
<img src="images/section02.png" alt="pic" />
<section class="content">
<h2 class="title">Giants Wave</h2>
<p>
Lorem Ipsum is simply dummy text of thedummy text of thedummy
text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard. when an unknown printer took a
galley
</p>
</section>
</div>
<div class="grid-item">
<img src="images/section03.png" alt="pic" />
<section class="content">
<h2 class="title">Mavericks</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an scrambled it
to make a type specimen book.
</p>
</section>
</div>
</article>
<aside class="sidebar">
<h2 class="title">Creative Fields</h2>
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Developement</a></li>
<li><a href="#">Motion Graphic</a></li>
</ul>
</aside>
</div>
</div>
</main>
<footer class="footer">
<div class="wrapper">
<div class="footer-info">
<div class="footer-section">
<h3>About Us</h3>
<ul class="list">
<li><a href="#">Information</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Creative Fields</h3>
<ul class="list">
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Developement</a></li>
<li><a href="#">Motion Graphic</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Social Network</h3>
<div class="btns">
<a href="" class="twitter"></a>
<a href="" class="facebook"></a>
<a href="" class="pinterest"></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>body {
margin: 0;
background-color: lightgray;
}
h1,
h2,
h3 {
margin: 0;
font: inherit;
}
p {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/**/
.wrapper {
width: 960px;
margin: 0 auto;
position: relative;
}
.title {
color: rgb(24, 79, 188);
font-size: 20px;
font-weight: 900;
}
.header {
background-color: rgb(24, 79, 188);
position: relative;
}
.header a.header-logo {
display: inline-block;
margin: 30px 0;
/* margin을 적용시키기 위해 display: inline-block 을 하는 이유가 정확히 이해되지 않습니다.
인라인 엘리먼츠와 인라인 블럭의 차이 일까요?; */
}
.header nav.navbar {
background-color: rgb(85, 162, 203);
color: white;
}
.header nav.navbar a.button {
display: inline-block;
padding: 15px;
}
.header nav.navbar a.button:hover {
background-color: white;
color: black;
}
.header img.wave {
position: absolute;
right: 0;
bottom: 0;
}
.main {
background-color: lightgray;
padding-bottom: 30px;
}
.main-inside {
background-color: white;
padding: 20px;
display: flex;
gap: 20px;
}
.grid {
display: flex;
flex-direction: column;
gap: 20px;
width: 80%;
}
.grid-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px dotted gray;
}
.grid-item:last-child {
padding: 0;
border-bottom: 0;
}
.grid-item img {
width: 400px;
}
.grid-item p {
color: gray;
margin: 20px 0;
}
.sidebar ul {
padding: 0 10px;
margin: 10px 0;
color: gray;
line-height: 1.5;
border-left: 3px solid lightgray;
}
.footer {
padding: 30px 0;
background-color: rgb(58, 56, 56);
}
.footer-info {
background-image: url(images/footer-logo.png);
background-repeat: no-repeat;
display: flex;
gap: 40px;
justify-content: right;
}
.footer-info h3 {
color: white;
font-weight: 900;
margin-bottom: 10px;
}
.list {
color: gray;
margin: 10px 0;
}
.btns a {
background: url(images/icon-sprite.png) no-repeat 0 0;
width: 30px;
height: 30px;
display: inline-block;
}
.btns a.twitter {
background-position: 0 0;
}
.btns a.facebook {
background-position: -30px 0;
}
.btns a.pinterest {
background-position: -60px 0;
}'Front-end > HTML CSS' 카테고리의 다른 글
| layout/design/components (0) | 2022.04.22 |
|---|---|
| float (0) | 2022.04.17 |
| auto 키워드 알아보기 (0) | 2022.04.16 |
| selector (0) | 2022.04.15 |
| containing block/initial value/box-sizing/negative margin (0) | 2022.04.14 |
