728x90
반응형
HTML 페이지 디자인 만들기
조별 과제로 인한 사이트 페이지 디자인을 만들고 코드도 만들어봤습니다.
먼저 피그마 디자인 시안입니다.
- 서로의 너비를 임시로 만들어두고 틀을 미리 만들어두고 사진과 영상을 가져와서 시안을 만들어봤습니다.
이제 코드를 만든 페이지 하나를 예시로 보여드리겠습니다.
HTML 코드 구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>운동 방법 : 케이블 푸쉬다운</title>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="wrap">
<div id="skip">
<a href="#header">헤더 영역 바로 가기</a>
<a href="#main">컨텐츠 영역 바로 가기</a>
<a href="#footer">푸터 영역 바로 가기</a>
</div>
<!-- //SKIP -->
<header id="header">
<h1><a href="#">헬드백</a></h1>
<p></p>
<div class="icon__box">
<ul>
<li class="login"><button type="submit"><img src="assets/img/icon_login.svg" alt="로그인"></button></li>
<li><a href="#"><img src="assets/img/icon_mypage.svg" alt="마이페이지"></a></li>
<li class="btn__menu"><a href="#"><img src="assets/img/icon_menu.svg" alt="메뉴"></a></li>
</ul>
</div>
</header>
<!-- //header -->
<nav id="nav">
<button>X</button>
<div class="nav__wrap">
<ul>
<li><a href="#">헬드백 소개</a></li>
<li><a href="#">부위별 운동</a></li>
<li><a href="board.html" target="_blank">커뮤니티</a></li>
<li><a href="#">마이페이지</a></li>
</ul>
</div>
</nav>
<!-- //nav -->
<div class="slider__wrap">
<div class="slider__img">
<div class="slider">
<img src="assets/img/slider_01.png" class="img__logo">
</div>
</div>
</div>
<!-- banner -->
<div class="container">
<div class="kind__section">
<h3><a href="mainSection.html#arm">팔 운동</a></h3>
<h4>케이블 푸쉬다운</h4>
<p>복부근을 강화하는 운동 중 하나입니다. 복부근 중에서도 상복부의 근력을 강화하는데 효과적인 운동입니다.</p>
<div class="kind">
<ul>
<li>1. 케이블 머신에 바를 달고 적당한 무게를 설정합니다.</li>
<li>2. 바를 잡은 손은 어깨 너비 정도로 벌립니다.</li>
<li>3. 팔꿈치를 고정한 채 바를 내리며 상체를 일직선으로 유지합니다. 손목은 고정된 상태로 유지합니다.</li>
<li>4. 팔꿈치가 굽히지 않도록 하면서 힘을 내어 바를 올립니다.</li>
<li>5. 최상점에서 1초간 정지한 후, 천천히 바를 내립니다.</li>
<li>6. 운동 중 상체를 흔들거나 모멘텀을 이용하지 않도록 주의합니다.</li>
<li>7. 세트 수와 반복 횟수는 자신의 체력과 목표에 맞게 조절합니다. 보통 3-4 세트를 하고, 각 세트마다 6-12 회 정도를 하는 것이 일반적입니다.</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ObEtLS9heOo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="part">케이블 푸쉬다운 자극 부위</div>
<figure>
<img src="assets/img/cablepressdownimg.png" alt="케이블 푸쉬다운">
</figure>
</div>
</div>
<footer id="footer">
<div class="logo">
<img src="assets/img/icon_logo.svg" alt="로고">
</div>
<p>
2023 ©️ 헬드백<br>
All Right Reserved
</p>
</footer>
</div>
<script>
const btnMenu = document.querySelector(".btn__menu");
const btnClose = document.querySelector("#nav button");
// 사이드 메뉴
btnMenu.addEventListener("click", () => {
document.querySelector("#nav").style.transform = "translateX(0%)";
})
btnClose.addEventListener("click", () => {
document.querySelector("#nav").style.transform = "translateX(100%)";
})
</script>
</body>
</html>- 각각의 알맞는 태그를 사용하고 각가에 들어갈 텍스트를 입력했습니다.
- 그리고 class 명과 각각의 태그를 사용해서 css를 다른 폴더로 만들어서 링크를 사용해서 가져왔습니다.
CSS
.kind__section {
color: var(--color__white);
}
.kind__section h3 {
font-size: 50px;
margin: 100px 0 30px 0;
}
.kind__section h4 {
font-size: 30px;
}
.kind__section p {
color: #c9c9c9;
font-size: 20px;
margin: 10px 0 100px 0;
}
.kind__section .kind {
display: flex;
justify-content: space-between;
}
.kind__section ul {
width: 48%;
}
.kind__section ul li {
word-break: keep-all;
margin-bottom: 5px;
line-height: 1.7;
}
.kind__section iframe {
width: 48%;
}
.kind__section .part {
font-size: 30px;
margin: 100px 0 100px 0;
}
.kind__section .part::before {
content: '* ';
}
.kind__section figure {
margin-bottom: 100px;
}
.kind__section img {
width: 70%;
height: 400px;
}- HTML 코드이 class 명과 태그를 가져와서 최대한 간단하게 스타일과 속성 값을 사용해서 입력해줬습니다.
완성화면
728x90
반응형
