無제
[Active and fixed] 유저의 움직임에 반응하는 웹사이트 코딩 실무 예제 본문
FHD 1920 최적화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />
<title>m</title>
<link rel="stylesheet" href="style3.css" />
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<main>
<header>
<div>Active and static</div>
<nav>
<div>January</div>
<div>February</div>
<div>March</div>
<div>April</div>
<div>May</div>
</nav>
</header>
<div>
<h4>All the Lorem Ipsum generators</h4>
<h1>A perfect bouquet</h1>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
<button>Read more</button>
</div>
</main>
<article class="introducing">
<div>
<h2>INTRODUCING</h2>
<span class="solid">―</span>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</h4>
<p>Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites still in their infancy.<br /> <br /></p>
<button>Read more</button>
</div>
<div>
<video width="480" controls>
<source src="https://videos.ctfassets.net/8cd2csgvqd3m/jwIHo8C4pdbh2Z96IYyoT/c400db2da73a6cd1393be6cc40746127/15_sek_H9_4K_nographics.mp4" type="video/mp4" />
</video>
</div>
</article>
<article class="products">
<div>
<div>
<h2>our products</h2>
<span class="solid">―</span>
</div>
<div>
<h4>Sed non orci ut arcu mattis facilisis</h4>
</div>
</div>
<div>
<section>
<div>sale</div>
<img src="https://images.unsplash.com/photo-1494337095615-b5f370aad75f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
<h5>Etiam nec ligula</h5>
<p>$40.000</p>
</section>
<section>
<div>sale</div>
<img src="https://images.unsplash.com/photo-1518709779341-56cf4535e94b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
<h5>rutrum sagittis</h5>
<p>$57.000</p>
</section>
<section>
<div>sale</div>
<img src="https://images.unsplash.com/photo-1525247923538-c105d2dd605d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=646&q=80" />
<h5>Mauris odio</h5>
<p>$82.000</p>
</section>
<section>
<div>sale</div>
<img src="https://images.unsplash.com/photo-1488323424590-6e1018104c27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />
<h5>Interdum et malesuada</h5>
<p>$160.800</p>
</section>
</div>
</article>
<article class="look">
<div>
<img src="https://images.unsplash.com/photo-1502089418555-ebcba08cb377?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80" />
<img src="https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" />
</div>
<div>
<div>
<h2>Look book</h2>
<span class="solid">―</span>
<h4>2016 It has survived not only five centuries</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetu. <br /> <br /></p>
<button>Read more</button>
</div>
<img src="https://images.unsplash.com/photo-1484676681417-64a0ea3475fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
</div>
</article>
<article class="our">
<div>
<div>
<h2>Our friends</h2>
<span class="solid">―</span>
</div>
</div>
<div>
<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
<a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
</div>
</article>
<article class="meet">
<div>
<div>
<h2>Meet our team</h2>
<span class="solid">-</span>
</div>
<div>
<h4>Contrary to popular belief that</h4>
</div>
</div>
<div>
<section>
<div onclick="window.location.href='#'"></div>
<img src="https://images.unsplash.com/photo-1551292831-023188e78222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<h3>Fusce luctus</h3>
<h5>CEO / Strategy specialist</h5>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
</section>
<section>
<div onclick="window.location.href='#'"></div>
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<h3>Ut finibus</h3>
<h5>Designer / UX professional</h5>
<p>In tincidunt metus sed ultrices porta. Donec venenatis nisi non pharetra lobortis.</p>
</section>
<section>
<div onclick="window.location.href='#'"></div>
<img src="https://images.unsplash.com/photo-1556632973-57d167636a3f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
<h3>Etiam fermentum</h3>
<h5>Developer / Backend</h5>
<p>Nam tincidunt ex ut sapien rhoncus dapibus. Donec sodales diam et ipsum eleifend aliquam.</p>
</section>
</div>
</article>
<footer>
<div>
<section>
<h3>NIRO</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
</section>
<section>
<h3>CONTACT</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</section>
<section>
<h3>LATEST POST</h3>
<p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.</p>
</section>
</div>
</footer>
<address>
<p>Where can I get some?<br />
Museum of London, 150 London Wall, Barbican, London EC2Y 5HN England<br />
010-0000-0000</p>
</address>
</body>
</html>
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
word-break: keep-all;
outline: 0px solid blue;
}
img {
width: 100px;
}
body {
font-family: "Roboto", sans-serif;
font-size: 0.9rem;
line-height: 1rem;
color: #999;
letter-spacing: 0.1px;
}
h1,
h2,
h3 {
font-family: "Oswald", sans-serif;
}
h1 {
font-size: 4rem;
line-height: 4rem;
text-transform: uppercase;
}
h2 {
font-size: 2.4rem;
line-height: 2.4rem;
text-transform: uppercase;
}
h3 {
font-size: 1.4rem;
line-height: 1.4rem;
margin-bottom: 1.6rem;
}
h4,
h5 {
font-family: "Playfair Display", serif;
}
h4 {
font-size: 1.1rem;
line-height: 1.1rem;
margin-bottom: 1.6rem;
}
h5 {
font-size: 0.7rem;
line-height: 0.7rem;
margin-bottom: 1.6rem;
}
a:link {
color: #666;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: red;
}
a:active {
color: red;
}
button {
font-size: 0.7rem;
text-transform: uppercase;
padding: 10px 30px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: crimson;
color: white;
}
/* start */
.solid {
font-size: 4rem;
line-height: 2rem;
color: #999;
}
main {
position: relative;
background: url("https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80") no-repeat;
background-size: cover;
background-position: center center;
height: 800px;
margin: 0 0 70px;
color: white;
text-align: center;
}
main header {
width: 1000px;
margin: 0 auto;
padding: 16px 0;
display: flex;
justify-content: space-between;
text-transform: uppercase;
font-size: 1rem;
line-height: 4rem;
}
main > header > div {
font-size: 1.5rem;
font-weight: bold;
transition: 0.8s;
cursor: pointer;
}
main > header > div:hover {
color: yellow;
}
main header nav {
display: flex;
}
main header nav div {
padding: 0 20px;
cursor: pointer;
transition: 0.8s;
}
main header nav div:hover {
background: black;
}
main > div {
position: absolute;
width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 3rem;
}
.introducing {
width: 1000px;
margin: 0 auto 70px;
display: flex;
justify-content: space-between;
}
.introducing > :first-child,
.introducing > :first-child {
width: 480px;
}
.products {
background: #eee;
margin: 0 0 70px;
padding: 70px 0;
}
.products > :first-child,
.products > :last-child {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.products > :last-child {
text-align: center;
margin: 50px auto 0;
}
.products > :last-child section {
position: relative;
}
.products :last-child section div {
position: absolute;
background: red;
width: 60px;
height: 60px;
border-radius: 50%;
color: white;
text-transform: uppercase;
line-height: 3.8rem;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.8s;
}
.products :last-child section div:hover {
background: rgba(255, 0, 255, 0.6);
}
.products :last-child :nth-child(2) div,
.products :last-child :nth-child(4) div {
display: none;
}
.products :last-child section img {
background: yellow;
width: 220px;
height: 300px;
margin: 0 0 30px;
cursor: pointer;
transition: 0.8s;
border: 0px solid red;
}
.products :last-child section img:hover{
border: 8px solid red;
}
.look {
width: 1000px;
margin: 0 auto 70px;
display: flex;
justify-content: space-between;
}
/* .look > :first-child,
.look > :last-child {
} */
.look :first-child img,
.look :last-child img {
width: 480px;
margin: 0 0 40px;
}
.look :last-child div {
background: #eee;
width: 480px;
padding: 100px 60px;
margin: 0 0 40px;
}
.our {
background: #ddd;
margin: 0 0 70px;
padding: 70px 0;
}
.our > :first-child,
.our > :last-child {
width: 1000px;
margin: 0 auto;
}
.our > :last-child {
display: flex;
justify-content: space-around;
}
.our > :last-child img {
width: 80px;
margin: 10px 0 0;
opacity: 0.3;
transition: 0.8s;
}
.our > :last-child img:hover {
opacity: 1;
}
.meet {
width: 1000px;
margin: 0 auto 70px;
}
.meet > :first-child,
.meet > :last-child {
display: flex;
justify-content: space-between;
}
.meet :last-child section {
position: relative;
width: 300px;
padding: 30px 20px;
text-align: center;
}
.meet :last-child section div {
position: absolute;
background: rgba(0, 0, 0, 0.0);
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
transition: 0.8s;
}
.meet :last-child section div:hover {
background: rgba(0, 0, 0, 0.2);
border: 10px solid rosybrown;
border-radius: 20px;
}
.meet :last-child section img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 0 30px;
}
footer {
background: #111;
padding: 70px 0;
}
footer div {
width: 1000px;
margin: 0 auto;
display: flex;
}
footer div section {
width: 100%;
padding: 0 20px 0 0;
}
address {
background: #222;
padding: 70px 0;
text-align: center;
}
/* end */
'<401>' 카테고리의 다른 글
| [RWD AND AWD] 적응형 반응형 웹 사이트 코딩 실무 예제 (1) | 2026.04.16 |
|---|---|
| [RWD] 반응형 웹 사이트 코딩 실무 예제 (0) | 2026.04.14 |
| [Flexible and fixed] 브라우저 넓이에 반응하는 웹사이트 코딩 실무 예제 (0) | 2026.04.08 |
| [HD] HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 (0) | 2026.04.08 |
| 코드 해석_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate (0) | 2026.03.27 |
'<401>' Related Articles
more
