ํ๋ก ํธ์๋์น๋์์ธ 4์ฃผ์ฐจ 2์ฐจ์ ๊ฐ์๋ด์ฉ
์์ค์ฝ๋์ ๊ฒฐ๊ณผ๋ฌผ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>์นดํ ์ฌ์ดํธ</title>
<style>
.slogan {
background-color: rgba(0, 0, 0, 0.4); /*๋ค๋ฒ์งธ ์ํ๊ฐ = ํฌ๋ช
๋ ์กฐ์ */
position: absolute; /*๋ณธ๋์ ํ๋ฆ์์ ๋ผ์ด๋*/
top : 50%;
left : 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
padding-left: 90px;
padding-right: 90px;
padding-top: 20px;
padding-bottom: 10px;
}
.slogan > h1 {
font-style: italic;
font-family: "Book Antique", cursive; /*cursive๋ ํ๊ธฐ์ฒด๋ฅผ ์๋ฏธ. book antiqueํฐํธ๊ฐ ์ค์น๋ ์ปดํจํฐ๋ ๋ถ ์คํฐํฌ ํฐํธ๋ก ๋ณด์ด๊ณ , ์์ผ๋ฉด cursive์ค์ ์๋ฌด ํฐํธ๋ ๋ณด์ด๋ผ๋ ์๋ฏธ*/
margin: 0;
}
button {
border: none;
padding: 10px 25px; /*์ ์ซ์๊ฐ top, bottom์ด๊ณ ๋ท ์ซ์๊ฐ left right๊ฐ*/
background-color: #ddd; /*์๋๋ #dddddd์ธ๋ฐ ๋ค ๋๊ฐ์ผ๋ ์ค์ฌ์ธ ์ ์์*/
font-weight: bold;
cursor: pointer;
}
button:hover { /*๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋*/
background-color: orangered;
color: white;
}
#video {
position: fixed; /*์๋์ ํ๋ฆ ์์์ ์ ๊ฑฐํ ๋ค์์ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ๊ณ ์ ์ํด*/
right:0;
bottom:0;
min-width: 100%;
min-height: 100%;
}
ul {
position: absolute;
list-style-type : none; /*๋ชฉ๋ก์ ์ฉ์ฉ์ฉ์ ์์ ์ค*/
background-color: rgb(0, 0, 0);
overflow:hidden;
margin: 0;
padding: 0;
}
li {
float: left; /* ํ๋ฆ์์์ ์ ๊ฑฐํด์ ํฌ์ง์
๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ ์ด์์์ ์กฐ์ ํด์ฃผ๋ ์์ฑ, ์ผ์ชฝ์ผ๋ก ๋ฐฐ์น*/
}
li > a{ /*ํ์ดํผ๋งํฌ๊ฐ ์๋ ๊ฒ์ฒ๋ถ ๋ณด์ด๊ฒ*/
text-decoration: none;
display: block; /*์ธ๋ผ์ธ ์๋ฆฌ๋จผํธ๋ฅผ ๋ธ๋ก ์๋ฆฌ๋จผํธ๋ก ๋ณ๊ฒฝ*/
padding: 14px 16px;
color: white;
text-align: center;
}
li >a:hover {
background-color: olivedrab;
}
</style>
</head>
<body>
<p><video id="video" autoplay muted loop width="10px" height="auto">
<source src = "images/pexels-c-technical-6117579.mp4" type = "video/mp4">
</video></p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Our Story</a></li>
<li style = "float: right"><a href="#">Home</a></li>
</ul>
<div class="slogan">
<h1>Best Carfull Service</h1>
<button>Go Carfull!</button>
</div>
</body>
</html>1.00
LIST
'๐ Coding Study > ์น ๋์์ธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 2023.04.05 ์ (HTML ๋ฐ์ค๋ชจ๋ธ, ๋ฐ์ค์ฌ์ด์ง, *์ ํ์ ๋ฑ) (0) | 2023.04.05 |
|---|---|
| 2023.04.03 ์ (HTML position) (0) | 2023.04.03 |
| 2023.03.27 ์ (CSS) (0) | 2023.03.27 |
| 2023.03.22 ์ (HTML ๋ฉํฐ๋ฏธ๋์ด ์๋ฃ ํ๊ทธ) (0) | 2023.03.22 |
| 2023.03.15 ์ (imgํ๊ทธ, ํ์ดํผ ๋งํฌ ํ๊ทธ, ๋ชฉ๋ก ํ๊ทธ) (0) | 2023.03.16 |