parent
b61dbaee32
commit
f521666035
@ -0,0 +1,239 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<meta name="viewport" content="width=device-width"/> |
||||
<title>My Blog</title> |
||||
|
||||
<style> |
||||
* { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
body { |
||||
font-family: sans-serif; |
||||
padding: 10px; |
||||
background-color: #f1f1f1; |
||||
} |
||||
|
||||
/* Nav */ |
||||
nav ul { |
||||
width: 100%; |
||||
background-color: rgba(44, 42, 39, 0.983); |
||||
list-style-type: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
nav ul li { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.home { |
||||
background-color: darkorange; |
||||
width: 100px; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
float: right; |
||||
} |
||||
|
||||
.home a { |
||||
display: block; |
||||
text-decoration: none; |
||||
color: white; |
||||
padding: 16px 16px; |
||||
} |
||||
|
||||
.dropdwon { |
||||
position: relative; |
||||
} |
||||
|
||||
.dropdown-menu { |
||||
color: white; |
||||
padding: 16px 16px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.dropdown-content { |
||||
position: absolute; |
||||
background-color: #f9f9f9; |
||||
min-width: 160px; |
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
.dropdown-content a { |
||||
color: black; |
||||
padding: 12px 16px; |
||||
text-decoration: none; |
||||
display: block; |
||||
} |
||||
|
||||
/* 서브메뉴 숨기기 */ |
||||
.dropdown-content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 호버 효과 추가 */ |
||||
.dropdown-menu:hover:not(.home) { |
||||
background-color: darkorange; |
||||
color: white; |
||||
} |
||||
|
||||
/* 드롭다운 만들기 */ |
||||
.dropdown:hover .dropdown-content { |
||||
display: block; |
||||
} |
||||
|
||||
.dropdown-content a:hover { |
||||
background-color: lightgray; |
||||
} |
||||
|
||||
/* Content */ |
||||
.header { |
||||
padding: 30px; |
||||
text-align: center; |
||||
background-color: white; |
||||
} |
||||
|
||||
.header h1 { |
||||
font-size: 50px; |
||||
} |
||||
|
||||
.leftcolumn { |
||||
float: left; |
||||
width: 75%; |
||||
} |
||||
|
||||
.rightcolumn { |
||||
float: right; |
||||
width: 25%; |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
.fakeimg { |
||||
background-color: rgb(228, 216, 216); |
||||
width: 100%; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.card { |
||||
background-color: white; |
||||
padding: 20px; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.contents::after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
|
||||
.footer { |
||||
padding: 30px; |
||||
text-align: center; |
||||
background-color: #ddd; |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
/* 반응형 웹 설정, 폭이 600px 이하인 경우 적용 */ |
||||
@media screen and (max-width: 600px) { |
||||
.leftcolumn, .rightcolumn { |
||||
width: 100%; |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
/* 반응형 웹 설정, 폭이 400px 이하인 경우 적용 */ |
||||
@media screen and (max-width: 500px) { |
||||
nav { |
||||
display: none; |
||||
} |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="header"> |
||||
<h1>My Blog</h1> |
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur.</p> |
||||
</div> |
||||
|
||||
<nav> |
||||
<ul> |
||||
<li class="dropdown"> |
||||
<div class="dropdown-menu">Menu1</div> |
||||
<div class="dropdown-content"> |
||||
<a href="#">Menu1-1</a> |
||||
<a href="#">Menu1-2</a> |
||||
<a href="#">Menu1-3</a> |
||||
<a href="#">Menu1-4</a> |
||||
</div> |
||||
</li> |
||||
<li class="dropdown"> |
||||
<div class="dropdown-menu">Menu2</div> |
||||
<div class="dropdown-content"> |
||||
<a href="#">Menu2-1</a> |
||||
<a href="#">Menu2-2</a> |
||||
<a href="#">Menu2-3</a> |
||||
<a href="#">Menu2-4</a> |
||||
</div> |
||||
</li> |
||||
<li class="dropdown"> |
||||
<div class="dropdown-menu">Menu3</div> |
||||
<div class="dropdown-content"> |
||||
<a href="#">Menu3-1</a> |
||||
<a href="#">Menu3-2</a> |
||||
<a href="#">Menu3-3</a> |
||||
<a href="#">Menu3-4</a> |
||||
</div> |
||||
</li> |
||||
<li class="dropdown"> |
||||
<div class="dropdown-menu">Menu4</div> |
||||
</li> |
||||
<li class="home"> |
||||
<a href="#">Home</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
|
||||
<div class="contents"> |
||||
<div class="leftcolumn"> |
||||
<div class="card"> |
||||
<h2>TITLE HEADING</h2> |
||||
<h5>Title description, June 25, 2024</h5> |
||||
<div class="fakeimg" style="height: 200px;">Image</div> |
||||
<p>Some text...</p> |
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> |
||||
</div> |
||||
<div class="card"> |
||||
<h2>TITLE HEADING</h2> |
||||
<h5>Title description, May 25, 2024</h5> |
||||
<div class="fakeimg" style="height: 200px;">Image</div> |
||||
<p>Some text...</p> |
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="rightcolumn"> |
||||
<div class="card"> |
||||
<h2>About Me</h2> |
||||
<div class="fakeimg" style="height: 100px;">Image</div> |
||||
<p>Some text about me in culpa qui officia deserunt mollit anim..</p> |
||||
</div> |
||||
<div class="card"> |
||||
<h3>Popular Post</h3> |
||||
<div class="fakeimg"><p>Image</p></div> |
||||
<div class="fakeimg"><p>Image</p></div> |
||||
<div class="fakeimg"><p>Image</p></div> |
||||
</div> |
||||
<div class="card"> |
||||
<h3>Follow Me</h3> |
||||
<p>Some text..</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="footer"> |
||||
<h2>Footer</h2> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue