Skip to content

Commit

Permalink
7.8 html css
Browse files Browse the repository at this point in the history
  • Loading branch information
@KIMMZN
KIMMZN committed Jul 8, 2024
1 parent 7bf9f81 commit 776fe0b
Show file tree
Hide file tree
Showing 13 changed files with 540 additions and 0 deletions.
150 changes: 150 additions & 0 deletions CSS/20.navbar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation bar</title>
<style>
/* horizontal 에러, horizontal도 vertical로 인식되는중 */
ul.basic {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
.basic > li a {display:block}


ul.vertical {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
.vertical > li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.vertical > li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #04aa6d;
color: white;
}
ul.inline {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.inline1 > li a {
display: inline;
}
ul.horizontal {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.horizontal {
float: left;
}
li.horizontal a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.horizontal a:hover { background-color: #111;}
</style>
</head>
<body style="margin: 40px">
<h2>Vertical Navigation Bar</h2>
<ul class="basic">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Contract</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
<br />
<hr />

<ul class="vertical">
<li>
<a class="active" href="#">Home</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Contract</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>

<h2>Horizontal Navigation Bar</h2>

<ul class="inline1">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Contract</a>
</li>
<li>
<a href="#">About</a>
</li>
<br>
<ul class="horizontal">
<li class="horizontal">
<a href="#">Home</a>
</li>
<li class="horizontal">
<a class="active" href="#">News</a>
</li>
<li class="horizontal">
<a href="#">Contract</a>
</li>
<li class="horizontal">
<a href="#">About</a>
</li>
</ul>
<br>
<ul class="horizontal">
<li class="horizontal">
<a href="#">Home</a>
</li>
<li class="horizontal">
<a href="#">News</a>
</li>
<li class="horizontal">
<a href="#">Contract</a>
</li>
<li style="float: right;" class="horizontal">
<a class="active" href="#">About</a>
</li>
</ul>
</body>
</html>
34 changes: 34 additions & 0 deletions CSS/21.dropdowns.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdowns</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body style="margin: 40px">
<h2>Basic Dropdowns</h2>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!!</p>
</div>
</div>
</body>
</html>
78 changes: 78 additions & 0 deletions CSS/22.image..gallery.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Gallery</title>
<style>
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body style="margin: 40px"></body>
<div class="gallery">
<a href="#"
><img
src="https://picsum.photos/300/200?=1"
alt="랜덤이미지1"
width="600px"
height="400px"
/></a>
<div class="desc">사진을 설명해 보세요.</div>
</div>
<div class="gallery">
<a href="#"
><img
src="https://picsum.photos/300/200?=2"
alt="랜덤이미지1"
width="600px"
height="400px"
/></a>
<div class="desc">사진을 설명해 보세요.</div>
</div>
<div class="gallery">
<a href="#"
><img
src="https://picsum.photos/300/200?=3"
alt="랜덤이미지1"
width="600px"
height="400px"
/></a>
<div class="desc">사진을 설명해 보세요.</div>
</div>
<div class="gallery">
<a href="#"
><img
src="https://picsum.photos/300/200?=4"
alt="랜덤이미지1"
width="600px"
height="400px"
/></a>
<div class="desc">사진을 설명해 보세요.</div>
</div>
<div class="gallery">
<a href="#"
><img
src="https://picsum.photos/300/200?=5"
alt="랜덤이미지1"
width="600px"
height="400px"
/></a>
<div class="desc">사진을 설명해 보세요.</div>
</div>
</html>
23 changes: 23 additions & 0 deletions CSS/23.attribute.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Attribute</title>
<style>
a[target] {
background-color: yellow;
}
/* 앵커 태그 안에 target 속성이 있으면 yellow 컬러가 된다.*/
a[target="_blank"] {
background-color: pink;
}
</style>
</head>
<body style="margin: 40px">
<h2>CSS [attribute] Selectors</h2>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
36 changes: 36 additions & 0 deletions CSS/24.units.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Units</title>
<style>
h1 {
font-size: 1.5cm;
}
h2 {
font-size: 1cm;
}
p {
font-size: 0.5cm;
line-height: 1cm;
}
</style>
</head>
<body style="margin: 40px">
<h1>this is heading1</h1>
<h2>this is heading2</h2>
<p>this is a paragraph.</p>
<p>또다른 문단입니다.</p>
<br />
<h1 style="font-size: 10vw">Hello</h1>
<p>1vw = 1% of viewport width.</p>
<br />
<div style="font-size: 20px">
<p style="font-size: 20px">the font-size of this part is 16px.</p>
<div style="font-size: 2rem; border: 1px solid black">
the font-size of this div element is 2rem.
</div>
</div>
</body>
</html>
6 changes: 6 additions & 0 deletions 강의팁.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,11 @@ a >b b는 a의 자식
--------------


nav nar
ul li active






0 새 폴더/css.zip → 자기소개/css.zip
View file
File renamed without changes.
23 changes: 23 additions & 0 deletions 자기소개/css/자기소개 home.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HOME</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
<style>
<style > * {
font-family: "Noto Sans KR", sans-serif;
}
H1 {
text-align: center;
}
</style>
</head>
<body style="margin: 40px">
<h1>Welcome To My Homepage</h1>
</body>
</html>
Loading

0 comments on commit 776fe0b

Please sign in to comment.