코드 보기
float box 와 display flex box 를 같이 사용한 버전입니다.
https://codepen.io/lshjju/pen/BaBqbYP
위 코드에 대한 유튜브 해설 보기
https://www.youtube.com/playlist?list=PLpK-F7ihqVc0OipUonpvuF1-O6vq50DIK
coding-hd-device-lecture
www.youtube.com
코드 보기
이것은 위의 코드를 모두 disply flex 박스모델로 변경한 코드입니다.
박스를 display flex 로 코딩하는 분은 이 코드를 보세요.
https://codepen.io/lshjju/pen/qBVJazJ
FHD
FHD 최적화 프로젝트입니다.
1920 해상도를 기준으로 제작했습니다.
가로 넓이를 고정값으로 코딩했습니다.
유저의 움직임에 따라 반응하도록 코딩했습니다.
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=3.0"
/>
<title>jinuk----</title>
<link rel="stylesheet" href="style-.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>
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 />
<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>
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 />
<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>
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.
</section>
<section>
<h3>CONTACT</h3>
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.
</section>
<section>
<h3>LATEST POST</h3>
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.
</section>
</div>
</footer>
<address>
Where can I get some?<br />
Museum of London, 150 London Wall, Barbican, London EC2Y 5HN England<br />
010-0000-0000
</address>
</body>
</html>index.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 silver;
}
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;
color: white;
text-align: center;
}
main header {
width: 1000px;
margin: 0 auto;
padding: 16px 0;
display: flex;
justify-content: space-between;
font-size: 1rem;
line-height: 4rem;
text-transform: uppercase;
}
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 {
width: 120px;
font-size: 1rem;
transition: 0.8s;
cursor: pointer;
}
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 {
padding: 70px 0;
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.introducing> :first-child,
.introducing> :last-child {
width: 480px;
}
.products {
background: #eee;
padding: 70px 0;
}
.products> :first-child,
.products> :last-child {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.products> :last-child {
margin-top: 100px;
}
.products :last-child section {
position: relative;
width: 220px;
text-align: center;
}
.products :last-child section div {
position: absolute;
background: red;
width: 60px;
height: 60px;
border-radius: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
line-height: 3.8rem;
text-transform: uppercase;
transition: 0.8s;
cursor: pointer;
}
.products :last-child section div:hover {
background: rgba(255, 0, 255, 0.6);
}
.products :last-child :nth-child(2) :nth-child(1),
.products :last-child :nth-child(4) :nth-child(1) {
display: none;
}
.products :last-child section img {
width: 220px;
height: 300px;
margin-bottom: 30px;
transition: 0.8s;
cursor: pointer;
border: 0px solid red;
}
.products :last-child section img:hover {
border: 8px solid red;
}
.look {
width: 1000px;
margin: 0 auto;
padding: 70px 0;
display: flex;
justify-content: space-between;
}
.look> :first-child {
width: 480px;
}
.look :first-child img,
.look> :last-child div,
.look :last-child img {
width: 480px;
margin-bottom: 40px;
}
.look> :last-child {
width: 480px;
}
.look> :last-child div {
background: #eee;
padding: 100px 60px;
}
.our {
background: #ddd;
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-top: 10px;
opacity: 0.3;
transition: 0.8s;
}
.our :last-child img:hover {
opacity: 1;
}
.meet {
width: 1000px;
margin: 0 auto;
padding: 70px 0;
}
.meet> :first-child,
.meet> :last-child {
display: flex;
justify-content: space-between;
}
.meet div section {
position: relative;
width: 300px;
padding: 30px 20px;
text-align: center;
}
.meet div section div {
position: absolute;
background: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 20px;
cursor: pointer;
transition: 0.8s;
}
.meet div section div:hover {
background: rgba(0, 0, 0, 0.2);
border: 10px solid rosybrown;
}
.meet div section img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 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;
}style.css
end
'UI Design project' 카테고리의 다른 글
| 적응형 반응형 웹 사이트 코딩 실무 예제 - RWD AND AWD (0) | 2025.06.14 |
|---|---|
| 반응형 웹 사이트 코딩 실무 예제 - RWD (0) | 2025.06.14 |
| 브라우저 넓이에 반응하는 웹사이트 실무 코딩 예제 - Flexible and fixed (1) | 2025.06.14 |
| HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 -HD (0) | 2025.06.07 |