<!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>2_김태연</title>
<style>
body {
background-color: #EFEFEF;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
header {
height: 220px;
}
#header {
display: flex;
flex-direction: column;
}
.logoAndinputAndProfile {
display: flex;
align-items: center;
}
.inputAndProfile {
display: flex;
align-items: center;
}
.profile {
display: flex;
justify-content: center;
}
input {
width: 200px;
height: 40px;
border-radius: 10pt;
border: none;
}
button {
width: 70px;
height: 50px;
background-color: orange;
border: none;
margin-left: 30px;
border-radius: 10pt;
cursor: pointer;
}
.profile {
margin-left: 10px;
text-align: center;
}
.menu {
display: flex;
background-color: rgb(251, 176, 36);
justify-content: space-evenly;
}
.menu div{
width: 100px;
text-align: center;
cursor: pointer;
}
.menu div:hover {
background-color: red;
}
header img {
width: 200px;
}
.inputAndProfile img {
width: 70px;
height: 70px;
border-radius: 100pt;
background-color: white;
cursor: pointer;
}
.logoAndinputAndProfile {
display: flex;
justify-content: space-between;
}
main {
display: grid;
grid-template-columns: 242.5px 242.5px 242.5px 242.5px;
gap: 10px;
}
main div {
width: 242.5px;
height: 360px;
border-radius: 10pt;
cursor: pointer;
}
.box1 {
background-image: url(https://i.namu.wiki/i/ebBVhTu2eqW9EKvpP8ogCXwkADZin_d9Kf1Q_pnLgdNV3JfX6eXNiOCcyU0_2DF5U2lcrmmKfIFUCTY98tU1NQ.webp);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box1 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box2 {
background-image: url(https://p3crires.cri.cn/photoworkspace/cri/contentimg/2022/08/18/2022081814455312998.jpg);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box2 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box3 {
background-image: url(https://down.edunet4u.net/KEDNCM/A000800002_20180214/DA7EC4D8-E2EB-0FFE-8045-47B618A72506.jpg);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box3 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box4 {
background-image: url(https://images.chosun.com/resizer/wLUqeM2tYMmUiQw4wozqggtuwJA=/482x381/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/NWTDMQUBCZAPPKR3JY7ANX5YNI.gif);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box4 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box5 {
background-image: url(https://file2.nocutnews.co.kr/newsroom/databank/image/2022/08/08/202208082246048154.gif);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box5 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box6 {
background-image: url(https://img2.yna.co.kr/etc/inner/KR/2018/11/16/AKR20181116061900062_01_i_P4.jpg);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box6 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box7 {
background-image: url(https://i.namu.wiki/i/xdBkIIJvKRYX4KeNb6MnZCqnmXraYcf9eIXnmHW2ynNLiz1WAwGSFvYrzM--kJ1ewscU-fOn-WRfV1jCefCwsA.webp);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box7 h2 {
display: grid;
align-items: end;
text-align: center;
}
.box8 {
background-image: url(https://1.bp.blogspot.com/-Bd5gsD0XTso/X7rRwsiS2TI/AAAAAAAAQYY/WyLLFPxwRukhBM8roJFDSEzIcKW9DQTlgCLcBGAsYHQ/s16000/4.gif);
background-size: 242.5px 280px;
background-repeat: no-repeat;
display: grid;
background-color: white;
}
.box8 h2 {
display: grid;
align-items: end;
text-align: center;
}
footer {
background-color: white;
border-radius: 10pt;
height: 100px;
text-align: center;
display: grid;
align-items: center;
margin-top: 70px;
}
</style>
</head>
<body>
<!-- img는 img 태그 사용안하고 background-image: url() 로 지정하고 사이즈 는 height 280px 로 설정함 (96 번째 줄) -->
<div id="container">
<header>
<div id="header">
<div class="logoAndinputAndProfile">
<a href="2_김태연 gird.html"><svg id="SvgjsSvg1065" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" preserveAspectRatio="xMidYMid meet" viewBox="0.0000033278786304435926 -7.764674592181109e-8 300.0000305175781 100.69066619873047" overflow="visible"><defs id="SvgjsDefs1066"><linearGradient id="SvgjsLinearGradientlIXMnOsTjt" gradientUnits="userSpaceOnUse" x1="-2.1864254474639675" y1="96.18642640113829" x2="90.1864230632782" y2="3.81357789039611"><stop id="SvgjsStop1069" stop-color="#29db76" offset="0.05"></stop><stop id="SvgjsStop1070" stop-color="#13723c" offset="0.95"></stop></linearGradient></defs><g id="SvgjsG1067" transform="scale(1.6808672714275896)" opacity="1"><g id="SvgjsG1071" class="gpe7qojiL" transform="translate(-0.42664690686762724, -0.5665166174060434) scale(0.610370306153869)" light-content="false" non-strokable="false" fill="url(#SvgjsLinearGradientlIXMnOsTjt)"><path d="M47 1.732l37.301 21.536a6 6 0 0 1 3 5.196v43.072a6 6 0 0 1-3 5.196L47 98.268a6 6 0 0 1-6 0L3.699 76.732a6 6 0 0 1-3-5.196V28.464a6 6 0 0 1 3-5.196L41 1.732a6 6 0 0 1 6 0z"></path></g><g id="SvgjsG1072" class="0M6Riq2a_v" transform="translate(10.99099034131806, 14.51380828439597) scale(0.30876692617449664)" light-content="true" non-strokable="false" fill="#ffffff"><path d="M48.586 81.375H16.227a6.207 6.207 0 0 1-6.2-6.2l-.003-59.882a6.234 6.234 0 0 1 6.23-6.227h57.602c3.418 0 6.2 2.781 6.2 6.195v34.145a2.81 2.81 0 0 0 2.812 2.813 2.81 2.81 0 0 0 2.813-2.813V15.261c0-6.519-5.305-11.824-11.824-11.824H16.259c-6.54 0-11.855 5.32-11.855 11.855v59.883c0 6.524 5.304 11.829 11.824 11.829H48.59a2.81 2.81 0 0 0 2.812-2.813 2.82 2.82 0 0 0-2.816-2.816z"></path><path d="M67.977 22.918H22.09a2.81 2.81 0 0 0-2.812 2.813 2.81 2.81 0 0 0 2.812 2.812h45.891a2.81 2.81 0 0 0 2.813-2.813 2.817 2.817 0 0 0-2.817-2.812zm0 19.48H22.09a2.81 2.81 0 0 0-2.812 2.813 2.81 2.81 0 0 0 2.812 2.812h45.891a2.81 2.81 0 0 0 2.813-2.813 2.817 2.817 0 0 0-2.817-2.812zM50.18 61.875H22.086c-1.555 0-2.813 1.258-2.813 2.813s1.258 2.812 2.813 2.812H50.18c1.555 0 2.813-1.258 2.813-2.813s-1.258-2.812-2.813-2.812zm25.441-5.273c-11.016 0-19.977 8.96-19.977 19.98s8.96 19.98 19.977 19.98 19.977-8.96 19.977-19.98c.004-11.016-8.957-19.98-19.977-19.98zm0 34.336c-7.914 0-14.352-6.441-14.352-14.352 0-7.914 6.441-14.352 14.352-14.352 7.914 0 14.352 6.441 14.352 14.352.004 7.91-6.434 14.352-14.352 14.352z"></path><path d="M79.695 71.473l-6.164 4.965-1.535-1.961A2.81 2.81 0 0 0 68.05 74a2.81 2.81 0 0 0-.476 3.95l3.293 4.199a2.805 2.805 0 0 0 2.215 1.078 2.81 2.81 0 0 0 1.761-.621l8.383-6.75a2.816 2.816 0 0 0 .426-3.957 2.827 2.827 0 0 0-3.957-.426z"></path></g><g id="SvgjsG1073" class="text" transform="translate(123.66929304586003, 45.07199931335449) scale(1)" light-content="false" fill="#080808"><path d="M-28.29 -29.04C-31.25 -30.16 -34.41 -30.72 -37.77 -30.72C-43.21 -30.72 -47.41 -29.33 -50.37 -26.55C-53.33 -23.77 -54.81 -19.74 -54.81 -14.46C-54.81 -9.66 -53.53 -5.97 -50.97 -3.39C-48.41 -0.81 -44.61 0.48 -39.57 0.48C-36.13 0.48 -32.45 -0.18 -28.53 -1.5L-28.53 -9.3L-28.41 -13.32L-35.31 -12.84L-35.25 -8.04L-35.25 -6.12C-36.57 -5.64 -37.83 -5.4 -39.03 -5.4C-40.99 -5.4 -42.54 -5.69 -43.68 -6.27C-44.82 -6.85 -45.65 -7.82 -46.17 -9.18C-46.69 -10.54 -46.95 -12.42 -46.95 -14.82C-46.95 -18.42 -46.34 -20.95 -45.12 -22.41C-43.9 -23.87 -41.91 -24.6 -39.15 -24.6C-37.67 -24.6 -36.32 -24.42 -35.1 -24.06C-33.88 -23.7 -32.49 -23.08 -30.93 -22.2L-30.27 -22.2Z M4.35 -1.74C2.03 -4.66 -0.47 -8.06 -3.15 -11.94C-1.35 -13.02 0.05 -14.37 1.05 -15.99C2.05 -17.61 2.55 -19.36 2.55 -21.24C2.55 -24.16 1.62 -26.41 -0.24 -27.99C-2.1 -29.57 -4.73 -30.36 -8.13 -30.36L-21.21 -30.3L-20.91 -9L-21.21 0L-13.65 0L-13.95 -9.72L-13.95 -9.78L-9.33 -9.78C-8.09 -7.3 -6.35 -4.12 -4.11 -0.24L-3.03 0.48C-0.63 0.32 1.81 -0.14 4.29 -0.9ZM-13.83 -15.54L-13.65 -24.72L-10.59 -24.84C-8.79 -24.76 -7.47 -24.37 -6.63 -23.67C-5.79 -22.97 -5.37 -21.9 -5.37 -20.46C-5.37 -19.14 -5.69 -18.06 -6.33 -17.22C-6.97 -16.38 -7.97 -15.74 -9.33 -15.3Z M17.49 -9.72L17.91 -30.3L10.23 -30.3L10.53 -9L10.23 0L17.79 0Z M51.06 -26.85C48.56 -29.31 44.97 -30.54 40.29 -30.54L26.97 -30.3L27.27 -9L26.97 0C31.53 0.24 35.35 0.36 38.43 0.36C43.71 0.36 47.76 -1.08 50.58 -3.96C53.4 -6.84 54.81 -10.96 54.81 -16.32C54.81 -20.88 53.56 -24.39 51.06 -26.85ZM47.01 -14.52C47.01 -8.44 44.61 -5.4 39.81 -5.4C39.13 -5.4 38.29 -5.44 37.29 -5.52C36.29 -5.6 35.31 -5.7 34.35 -5.82L34.23 -9.72L34.53 -24.24C36.09 -24.4 37.81 -24.48 39.69 -24.48C42.25 -24.48 44.11 -23.71 45.27 -22.17C46.43 -20.63 47.01 -18.08 47.01 -14.52Z"></path></g></g></svg></a>
<div class="inputAndProfile">
<label for=""><input type="text" placeholder="검색어 입력"></label><button>버튼</button>
<div class="profile">
<img src="https://i.namu.wiki/i/IzZNZMwZo3_qZ1fAHJ6Iu05VMyHxwOuboM-UkIx_Ggtiu9es8sq96g67ojeh23qEw-hCI4oO2STMYhKK5Vi20w.webp" alt="">
</div>
</div>
</div>
<div class="menu">
<div><h2>메뉴1</h2></div>
<div><h2>메뉴2</h2></div>
<div><h2>메뉴3</h2></div>
<div><h2>메뉴4</h2></div>
</div>
</div>
</header>
<main>
<div class="box1"><h2>이것은 태풍이다</h2></div>
<div class="box2"><h2>이것은 천둥번개이다</h2></div>
<div class="box3"><h2>이것은 쓰나미이다</h2></div>
<div class="box4"><h2>이것은 토네이도이다</h2></div>
<div class="box5"><h2>이것은 폭우이다</h2></div>
<div class="box6"><h2>이것은 폭설이다</h2></div>
<div class="box7"><h2>이것은 안개이다</h2></div>
<div class="box8"><h2>이것은 지진이다.</h2></div>
</main>
<footer>
<p>Copyright (c) 종로산업정보학교 Aicomputer Department 김태연 All rights reserved</p>
<p>본 사이트는 상업적 목적이 아닌 개인 포트폴리오로 제작되었습니다.</p>
</footer>
</div>
</body>
</html>
꿈꾸는 개발자