index.html 이란?
- 저장할 파일 만들기 → images 폴더에 사용할 이미지들을 저장하고, 관리
index.html = 메인창
- 웹 서버는 클라이언트로부터 요청된 자원을 찾아내는 역할을 수행 → 클라이언트(웹 브라우저 등)가 특정 자원(ex. HTML파일, 이미지, CSS파일 등)을 요청 → 웹 서버는 해당 요청을 받아들이고 요청된 자원을 찾아내기 위해 파싱 작업을 수행 (웹 서버의 대표 : 아파치(Apache))
- 자원명으로 안오는 경우 (=자원명을 적지 않는 경우) → 웹 서버는 'index'라는 이름의 파일을 찾는다. 이건 프로토콜
- 클라이언트가 웹 서버의 루트 URL에 접속 → 해당 서버에서는 'index' 파일을 찾아 읽어서 클라이언트에게 반환 → index를 찾아서 그 파일을 찾아 읽어서 돌려준다. ⇒ 그래서 모든 브라우저의 메인창은 index.html을 로드해서 보여지게 되는 것
1. html 구조화 하기
2. 이미지 배치
width: 100%;
height: 100%;
(object-fit: cover;)
3. 이미지 위에 글자 넣기
justify-content : center;
align-items : center;
(display: flex)4. 버튼 꾸미기
마진 주기 (마진만 주는 걸 style로 따로 빼서 주기)
[ 사용법 ]
5. css와 html 분리
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="main">
<div class="main-body">
<div class="body-section">
<div class="section-title mb-10 mt-10">
Meet Guidebooks
</div>
<div class="section-subtitle mb-5">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="section-img mb-10">
<div class="img-item">
<div class="item-name">San Francisco</div>
<img src="./images/napa.jpg">
</div>
<div class="img-item">
<div class="item-name">New York</div>
<img src="./images/new-york.jpg">
</div>
<div class="img-item">
<div class="item-name">London</div>
<img src="./images/london.jpg" alt="">
</div>
</div>
<div class="section-btn mb-10">
<button class="btn-detail">
See All Guidebooks
</button>
</div>
</div>
<div class="body-section">
<div class="section-title mb-10 mt-10">
Meet Guidebooks
</div>
<div class="section-subtitle mb-5">
Discover hundreds of local spots recommended by Airbnb hosts
</div>
<div class="section-img mb-10">
<div class="img-item">
<div class="item-name">San Francisco</div>
<img src="./images/napa.jpg">
</div>
<div class="img-item">
<div class="item-name">New York</div>
<img src="./images/new-york.jpg">
</div>
<div class="img-item">
<div class="item-name">London</div>
<img src="./images/london.jpg" alt="">
</div>
</div>
<div class="section-btn mb-10">
<button class="btn-detail">
See All Guidebooks
</button>
</div>
</div>
</div>
</div>
</body>
</html>.mt-10 {
margin-top: 10px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-5 {
margin-bottom: 5px;
}
.main {
background-color: rgb(232, 232, 232);
display: flex;
justify-content: center;
}
.main-body {
width: 700px;
text-align: center;
}
.section-title {
color: rgb(238, 147, 147);
font-size: 20px;
font-weight: 700;
}
.section-subtitle {
font-size: 12px;
}
.section-img {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 10px;
}
.img-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.item-name {
position: absolute;
color: white;
}
.img-item>img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn-detail {
background-color: rgb(225, 130, 130);
border-radius: 6px;
color: white;
height: 30px;
width: 200px;
}./ 는 명확하게 현재 폴더에 있는걸 실행하고 싶을때 사용.
그냥 적으면 PATH에 있는걸 먹을 수가 있어서
현재폴더에 있는걸 실행할 때는 그냥 무조건 ./ 꼭 써서 하는게 개발자들의 습관
Share article
