html & css/개념
반응형 웹
by Doo Hee
2023. 11. 18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- content="width=device-width -> 웹페이지의 width가 디바이스 width와 같은 너비로 본다는 것 -->
<title>Document</title>
<style>
body {
background-color: yellow;
}
/* 미디어 쿼리 */
/* max-, min- 접두사를 사용할 수 있다. */
@media screen and (max-width: 1000px) {
body {
background-color: red;
}
}
@media screen and (max-width: 600px) {
body {
background-color: blue;
/* 밑에있는 코드가 우선순위를 가진다. */
}
}
/* 대부분 미디어의 종류로 screen을 사용 */
</style>
</head>
<body>
<!-- 반응형 웹 -> 하나의 웹페이지를 만드는데 웹페이지가 접속하는 사용자의 디바이스의 해상도의 크기에 따라서
레이아웃이나 폰트 등이 자동으로 변경이 되어 디바이스에서 가장 쉽게 이용할 수 있는 크기와 위치로 변형이 되게끔
만들어 주는 기술을 말한다. -->
<!-- 미디어 지정 규칙 -> 조건문(~일때만) -->
<!-- CSS 정의 -> 조건문을 만족하면 해당 CSS를 실행시켜라 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* 부드럽게 스크롤 */
}
body {
margin: 0;
}
.header {
/* width: 100%;
height: 150px; */
padding: 60px;
text-align: center;
background-color: #f9fc63;
color: black;
/* font-weight: 900; -> <h1> 태그로 폰트 굵게 할 수 있다. */
}
.navbar {
display: flex;
flex-direction: row;
background-color: #333;
justify-content: center;
position: sticky;
top: 0;
/* width: 100%;
height: 40px;
text-align: center; */
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* 가상 클래스이기 때문에 따로 클래스를 지정해야한다. */
/* {}안에 코드를 삽입할 수 없다. */
.navbar a:hover {
background-color: #f9fc63;
color: #333;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.side {
flex: 30%;
/* 너비를 30% 가져가겠다는 의미 */
background-color: #f1f1f1;
padding: 20px;
}
.fakeImg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background-color: #ddd;
}
@media screen and (max-width: 768px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- 레이아웃을 위한 시멘틱 태그 -->
<!-- header -->
<!-- nav -->
<header class="header">
<h1>Who Am I</h1>
</header>
<nav class="navbar">
<a href="">메뉴1</a>
<a href="">메뉴2</a>
<a href="">메뉴3</a>
<a href="">메뉴4</a>
<a href="#project5">메뉴5</a>
<!-- id를 지정하고 href에 걸면 해당 id가 있는 태그로 이동한다. -->
<!-- 클래스를 만들기보단 navbar 안에 있는 a태그를 지정하여 스타일을 입히는게 좋다. -->
</nav>
<div class="row">
<aside class="side">
<div class="about">
<h2>About</h2>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
저는 0년차 소프트웨어 개발자입니다. 유튜브 깡꾸꾸를 운영하고
있습니다.
</p>
<h3>Skills</h3>
<p>Html, CSS, JavaScript, TypeScript, React...</p>
<div class="fakeImg" style="height: 60px">Image</div>
<br />
<div class="fakeImg" style="height: 60px">Image</div>
<br />
<div class="fakeImg" style="height: 60px">Image</div>
</div>
</aside>
<main class="main">
<section>
<h2>프로젝트 1</h2>
<h5>2021년 2월</h5>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을
프론트엔드 개발자였습니다.
</p>
</section>
<section>
<h2>프로젝트 2</h2>
<h5>2021년 2월</h5>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을
프론트엔드 개발자였습니다.
</p>
</section>
<section>
<h2>프로젝트 3</h2>
<h5>2021년 2월</h5>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을
프론트엔드 개발자였습니다.
</p>
</section>
<section>
<h2>프로젝트 4</h2>
<h5>2021년 2월</h5>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을
프론트엔드 개발자였습니다.
</p>
</section>
<section>
<h2 id="project5">프로젝트 5</h2>
<h5>2021년 2월</h5>
<div class="fakeImg" style="height: 200px">Image</div>
<p>
이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을
프론트엔드 개발자였습니다.
</p>
</section>
</main>
<!-- 둘의 너비가 다르므로 class를 다르게 지정해야 한다. -->
</div>
<footer>
<div class="footer">
<h2>Copyright 강두콩 2023</h2>
</div>
</footer>
</body>
</html>
