* index.html = '메인페이지' 파일명을 말한다.
* / 는 최상위 경로로 로고 a 안에 써준다.
<h1>
<a href="/">
<img src="./img/google_logo.svg" alt="구글" />
</a>
</h1>
html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XHTML 실습</title>
<link rel="stylesheet" href="./css/layout.css" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Gmail</a></li>
</ul>
<ul>
<li><a href="#">이미지</a></li>
</ul>
<ul>
<li><a href="#">옵션</a></li>
</ul>
</nav>
</header>
<!-- 컨텐츠영역 큰 구조 먼저 만들기
a태그 안에 로고이미지 태그가 들어가있어야한다. /는 최상위경로-->
<main>
<h1>
<a href="/">
<img src="./img/google_logo.svg" alt="구글" />
</a>
</h1>
<div class="search">
<label for=""></label>
<input type="text" placeholder="Google 검색 또는 URL 입력" />
</div>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
</body>
</html>css
더보기
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
img {
display: block;
}
header {
width: 100%;
height: 50px;
}
nav {
width: 300px;
height: 100%;
float: right;
}
nav > ul li {
width: 100%;
height: 100%;
}
nav > ul > li {
width: 100px;
line-height: 50px; /*글자라서 라인하이트로 높이를 대신한다*/
float: left;
text-align: center;
}
li:hover a {
color: dodgerblue;
text-decoration: underline;
}
/* 컨텐츠 영역 */
main {
width: 700px;
overflow: hidden; /*높이는 자식에 맞춰 알아서 늘어나라*/
margin: 0 auto;
}
h1 a img {
width: 300px;
height: fit-content;
margin: 130px auto;
margin-bottom: 50px;
}
.search {
width: 100%;
height: 50px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 25px; /*높이값의 반*/
padding: 8px 20px;
}
.search input {
width: 100%;
height: 100%;
border: none;
outline: none;
}
section {
width: 100%;
overflow: hidden;
display: flex;
margin-top: 100px;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 12px;
}
section div {
width: 167px;
height: 167px;
border: 1px solid lightskyblue;
background-color: #ddd;
box-sizing: border-box;
border-radius: 8px;
}- 글자는 높이값을 line-height 로 대신할 수 있다.
'예제 실습' 카테고리의 다른 글
| 실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전 (0) | 2024.06.27 |
|---|---|
| 실습) split shire 사이트 클론 코딩 (0) | 2024.06.25 |
| 실습) 네이버 회원가입 창 (0) | 2024.06.21 |
| 실습) table 게시판 만들기 (0) | 2024.06.19 |
| 2차 메뉴가 있는 header 구성해보기 (0) | 2024.06.18 |
