์ฅ๋ฐ๊ตฌ๋์ ์ํ์ด ์์ต๋๋ค.
2 ๊ธ ๋ณด์ - 1 ์์ 2 ๊น์ง (์ด 2 ์ค์์)
-
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/landing.css"> <link rel="stylesheet" href="/fontawesome/css/all.min.css"> <title>Document</title> </head>
<body>
<div class="main-bg"> <div class="main-left"> <div> <h1>Landing Page for Apps</h1> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Voluptatum, rem, distinctio! Dolores doloremque.</p> </div> <button type="button" class="main-bt">Show more</button> </div> < img src="img/iphone.png" class="main-img"> </div> </div>
</body>
</html> CSS
body { box-sizing: border-box; margin: 0; }.main-bg { position: relative; width: 100%; min-width: 200px; height: 450px; padding: 1px; background: linear-gradient(to bottom, rgb(122, 140, 223), rgb(39, 64, 177)); }.main-left { padding: 60px; color: white; }.main-bt { width: 100px; height: 40px; border-radius: 5px; border: 0; background-color: rgb(63, 62, 62); color: white; }.main-bt:hover { background-color: gray; }.main-img { position: absolute; width: 300px; right: 50px; bottom: 0; }@media screen and (max-width: 767px) { .main-bg { text-align: center; } .main-left { font-size: 15px; padding: 30px; } .main-img { width: 200px; position: absolute; left: 50%; margin-left: -100px; } }
๋ชจ๋ฐ์ผํ๊ฒฝ์ ํฌ๊ธฐ์์ ์ด๋ฏธ์ง์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ค์์ ๋ ฌ์ด ๋ค๋ฅด๋๋ผ๊ณ ์
์บก์ณ์ด๋ฏธ์ง๋ 100px์ธ๋ฐ ์ด ๊ฒฝ์ฐ์๋ ์ค์์ ๋ ฌ์ด ๋ง์ง์๋๋ฐ
200px๋ก ๋ณ๊ฒฝํ ๊ฒฝ์ฐ์๋ ์ค์์ ๋ ฌ์ด ๋๋๋ผ๊ตฌ์
์ ์ด๋ฐ์ง ์ ์ ์์๊น์
๋ํ ํฌ์ง์
์ ์ฌ์ฉํ์ง ์๊ณ ์ค๋ฅธ์ชฝ์๋์ ์ ๋ ฌํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์๊น์ pcํ๊ฒฝ์์
2 ๊ธ ๋ณด์ - 1 ์์ 2 ๊น์ง (์ด 2 ์ค์์)
- ๋ต๋ณ์ ๋ก๊ทธ์ธ ํ ๊ฐ๋ฅํฉ๋๋ค.