728x90
๋ฐ์ํ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๋ ์ด์์</title>
</head>
<style>
header{
/*
position: fixed => ๋ค๋ฅธ ์์์ ์๊ด์์ด ์์ ์ ๊ทธ ์์น๋ฅผ ๊ณ์ ์ ์งํ๋ค
๋ค๋ฅธ ์์์ ๊ฒน์น ์ ์๊ฒ ๋๋ค
*/
position: fixed;
background-color: #ffd6de;
width: 100%;
height: 50px;
}
aside{
display: inline-block;
position: sticky;
/*
์๊ธฐ ์์น์ ์๋ค๊ฐ ์คํฌ๋กค ๋๋ฌธ์ ์์ผ์์ ์ฌ๋ผ์ ธ์ผํ ๊ฒฝ์ฐ์๋ ์คํฌ๋กค์ ๋ฐ๋ผ ์์ง์ธ๋ค.
๊ธฐ์ค์ด ๋๋ ๋ถ๋ชจ์์๊ฐ ์์ด์ผํจ
*/
background-color: aquamarine;
width: 5%;
height: 100px;
vertical-align: top;
}
main{
margin-top: 50px;
display: inline-block;
background-color: #d4ffca;
width: 80%;
}
div{
border: 2px solid black;
margin: 10px 0;
background-color: white;
height: 200px;
}
footer{
background-color: #c2eeff;
height: 50px;
}
</style>
<body>
<header></header>
<aside></aside>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<aside></aside>
<footer></footer>
</body>
</html>
728x90
๋ฐ์ํ
'๐ HTML,CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML&CSS 21์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
|---|---|
| HTML&CSS ์ค์ต7 (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 19์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS ์ค์ต6 (์ ๋ฆฌx) (0) | 2024.03.23 |
| HTML&CSS 18์ผ์ฐจ (์ ๋ฆฌx) (0) | 2024.03.23 |