[HTML/CSS] 14. 전체 실습
Mar 12, 2025
![[HTML/CSS] 14. 전체 실습](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A13%3A47.037Z-c6dd320b-fbb1-460a-9ca0-e7e15450805a&w=2048&q=75)
1. inblog 만들기
1. 문제 분석
2. 뼈대 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border : 1px solid black;
}
.root{
display: flex;
justify-content: center;
}
.container{
width: 80%;
}
</style>
</head>
<body>
<div class="root">
<div class="container">
<div class="nav">
<div class="logo">로고</div>
<div class="search">검색</div>
</div>
<div class="header">
<div class="h-title">jay0628</div>
<div class="h-content">Welcome to the jay0628 blog!</div>
</div>
<div class="menu">
<div class="m-item">See All</div>
<div class="m-item">환경세팅</div>
<div class="m-item">컴퓨터사이언스</div>
<div class="m-item">자바</div>
</div>
<div class="recent">
<div class = "r-img">이미지</div>
<div class = "r-info">
<div class = "r-title">최신글제목</div>
<div class = "r-footer">최신글정보</div>
</div>
</div>
<div class="blog-list">
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">블로그하단</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">블로그하단</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">블로그하단</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">블로그하단</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">블로그하단</div>
</div>
</div>
</div>
</div>
</body>
</html>
3. 레이아웃
flex로 나누면 자식 잡아서 ~ㅐ야하니까 grid로 나누면 비율 살려서 나누기 좋다
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border : 1px solid black;
padding: 5px;
}
.root{
display: flex;
justify-content: center;
}
.container{
width: 80%;
}
.nav{
display: flex;
justify-content: space-between;
}
.menu{
display: flex;
}
.recent{
display: grid;
grid-template-columns: 5fr 4fr;
}
.blog-list{
display: grid;
grid-template-columns: 1fr 1fr;
}
.r-footer{
display: flex;
}
.r-info{
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 이미지 높이가 커야 최신글제목과 최신글하단의 위치가 위와 아래로 설정하기 전 확인 편리
.r-img{
height: 300px;
}*/
.b-footer{
display: flex;
}
</style>
</head>
<body>
<div class="root">
<div class="container">
<div class="nav">
<div class="logo">로고</div>
<div class="search">검색</div>
</div>
<div class="header">
<div class="h-title">jay0628</div>
<div class="h-content">Welcome to the jay0628 blog!</div>
</div>
<div class="menu">
<div class="m-item">See All</div>
<div class="m-item">환경세팅</div>
<div class="m-item">컴퓨터사이언스</div>
<div class="m-item">자바</div>
</div>
<div class="recent">
<div class = "r-img">이미지</div>
<div class = "r-info">
<div class = "r-title">최신글제목</div>
<div class = "r-footer">
<div class="circle-img">서클이미지</div>
<div class="date">날짜</div>
<div class="category">카테고리제목</div>
</div>
</div>
</div>
<div class="blog-list">
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">
<div class="circle-img">서클이미지</div>
<div class="date">날짜</div>
<div class="category">카테고리제목</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">
<div class="circle-img">서클이미지</div>
<div class="date">날짜</div>
<div class="category">카테고리제목</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">
<div class="circle-img">서클이미지</div>
<div class="date">날짜</div>
<div class="category">카테고리제목</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">블로그사진</div>
<div class="b-title">블로그제목</div>
<div class="b-footer">
<div class="circle-img">서클이미지</div>
<div class="date">날짜</div>
<div class="category">카테고리제목</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4. CSS
menu의 각 항목 버튼으로 만들어뒀는데 버튼 빼고 a태그 써서 하이퍼링크로 수정필요!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
div{
padding: 5px;
}
.root{
display: flex;
justify-content: center;
}
.container{
width: 80%;
}
.nav{
display: flex;
justify-content: space-between;
}
.logo{
display: flex;
}
.logo-img{
width: 100px;
}
.logo-id{
font-weight: bold;
}
.search-btn{
border: none;
background-color: rgba(0, 0, 0, 0);
color: rgb(0, 0, 0);
border-radius: 5px;
padding: 5px;
width: 30px;
height: 30px;
cursor: pointer;
}
/* .header{} */
.h-title{
font-size: 50px;
font-weight: bold;
margin-top : 100px;
}
.h-content{
font-size: 20px;
font-weight: 500;
margin-top : 10px;
height: 200px;
}
.menu{
display: flex;
}
.m-btn{
border: none;
background-color: rgba(0, 0, 0, 0);
font-size: 15px;
font-weight: 550;
cursor: pointer;
}
.recent{
display: grid;
grid-template-columns: 5fr 4fr;
}
.r-title{
font-size: 40px;
font-weight: 900;
}
.r-item-img{
width: 100%;
height: 100%;
object-fit: cover;
}
.r-footer{
display: flex;
}
.circle-item-img{
width: 25px;
height: 25px;
object-fit: cover;
}
.r-info{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.blog-list{
display: grid;
grid-template-columns: 1fr 1fr;
}
.b-title{
font-size: 35px;
font-weight: 700;
}
.b-footer{
display: flex;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="root">
<div class="container">
<div class="nav">
<div class="logo">
<div>
<img src="img/logo.webp" class="logo-img">
</div>
<div class="logo-id">jay0628</div>
</div>
<div class="search">
<button class="search-btn">
<i class='fas fa-search style='font-size:24px' ></i>
</button>
</div>
</div>
<div class="header">
<div class="h-title">jay0628</div>
<div class="h-content">Welcome to the jay0628 blog!</div>
</div>
<div class="menu">
<div class="m-item">
<button class="m-btn">See All</button>
</div>
<div class="m-item">
<button class="m-btn">환경세팅</button>
</div>
<div class="m-item">
<button class="m-btn">컴퓨터사이언스</button>
</div>
<div class="m-item">
<button class="m-btn">자바</button>
</div>
</div>
<div class="recent">
<div class = "r-img">
<img src="img/htmlimage.png" class="r-item-img">
</div>
<div class = "r-info">
<div class = "r-title">[CSS] 7. Grid-Layout</div>
<div class = "r-footer">
<div class="circle-img">
<img src="img/profile.webp"class="circle-item-img">
</div>
<div class="date">Mar 10, 2025</div>
<div class="category">HTML/CSS</div>
</div>
</div>
</div>
<div class="blog-list">
<div class="blog-item">
<div class="b-img">
<img src="img/htmlimage.png" class="r-item-img">
</div>
<div class="b-title">[CSS] 6. Flex</div>
<div class="b-footer">
<div class="circle-img">
<img src="img/profile.webp"class="circle-item-img">
</div>
<div class="date">Mar 10, 2025</div>
<div class="category">HTML/CSS</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">
<img src="img/htmlimage.png" class="r-item-img">
</div>
<div class="b-title">[CSS] 5. CSS Display</div>
<div class="b-footer">
<div class="circle-img">
<img src="img/profile.webp"class="circle-item-img">
</div>
<div class="date">Mar 10, 2025</div>
<div class="category">HTML/CSS</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">
<img src="img/htmlimage.png" class="r-item-img">
</div>
<div class="b-title">[CSS] 4. CSS 선택자</div>
<div class="b-footer">
<div class="circle-img">
<img src="img/profile.webp"class="circle-item-img">
</div>
<div class="date">Mar 10, 2025</div>
<div class="category">HTML/CSS</div>
</div>
</div>
<div class="blog-item">
<div class="b-img">
<img src="img/htmlimage2.png" class="r-item-img">
</div>
<div class="b-title">[html] 3. 학교 시간표 만들기</div>
<div class="b-footer">
<div class="circle-img">
<img src="img/profile.webp"class="circle-item-img">
</div>
<div class="date">Mar 10, 2025</div>
<div class="category">HTML/CSS</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Share article
![[HTML/CSS] 16. 최종 실습 (Airbnb 만들기)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A15%3A32.251Z-f7ffc512-c30f-45eb-8371-db6b6b8d6bbf&w=750&q=75)
![[CSS] 15. 공통 CSS 추출](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A14%3A52.528Z-8ae76f28-8cad-4a54-a57c-f63e01f15d00&w=750&q=75)
![[HTML/CSS] 13. Card Box 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A12%3A37.471Z-5c46c2f0-6843-4ef7-a8cd-5ca093d302bb&w=750&q=75)
![[CSS] 12. Grid-Layout 실습](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-12T02%3A11%3A17.419Z-c7ea0538-82a7-432b-b319-fe2a50fc3d7c&w=750&q=75)