contents
구현시험
--------------------------------------------------------------
구현시험
UI구현 요구사항
| 문제1. 아래와 같이 폴더 및 파일을 구성하세요. (각 2점 / 총 10점) 요구사항1. 작업영역에 "본인이름"의 폴더 추가하기 요구사항2. 작업영역 폴더 안에 css폴더, js폴더, img폴더 생성하기 요구사항3. html, css, js 각각 지정된 이름으로 별개의 파일로 생성하고 css파일은 css폴더에, js파일은 js폴더에 넣기. (당연히 img파일은 img폴더에 있어야합니다) - html파일 이름 : index - css파일 이름 : style.css - js파일 이름 : 기능과 관련된 직관적인 이름으로 지정 요구사항4. 모든 경로는 상대경로로 설정하기 요구사항5. 작업영역 폴더를 그대로 압축파일로 만들어 첨부파일로 제출 문제2. "문제2.png"를 참고하여 메뉴바를 구현하고 company 요소를 클릭했을 시 드롭다운메뉴가 나오도록 구현하세요. (각 5점 / 총 20점) 요구사항1. 메뉴바를 구현할 때 container(콘텐츠 영역의 너비)를 잘 설정했는가? 요구사항2. 메뉴바를 구현할 때 요구사항에 맞는 배치가 되었는가? 요구사항3. 드롭다운메뉴를 구현할 때, 클릭했을 시 라는 요구사항을 잘 수행했는가? 요구사항4. 드롭다운메뉴가 제대로 동작하는가? 문제3. "문제3.png"를 참고하여 아래 요구사항을 만족하는 슬라이더 기능을 js로 구현하세요.(총 30점) 요구사항1. 텍스트와 버튼이 제대로 배치되어있나? (5점) 요구사항2. src경로 바꾸는 슬라이더가 아닌 translateX()를 활용하여 구현하세요. (20점) 요구사항3. 좌/우 버튼을 누르면 이미지와 텍스트가 같이 이동하는가? (5점) 문제4. "문제4.png"를 참고하여 탭 기능을 js 혹은 css로 구현하세요. (총 20점) 요구사항1. 탭메뉴의 너비가 container 영역을 균등하게 나눠가지는가? (5점) 요구사항2. 탭메뉴를 클릭하면 해당 배경색상이 바뀌는가? (5점) 요구사항3. 탭메뉴를 클릭하면 해당하는 콘텐츠 모두가 뜨는가? (10점) 문제5. "문제5.png"를 참고하여 hover했을 시, 불투명한 필터효과를 추가 구현해주세요. (텍스트와 버튼 배치도 동일하게 구현)(10점) 문제6. "문제6.png"를 참고하여 footer를 구현하세요. (각 5점 / 총 10점) 요구사항1. 파비콘을 쓸 수 있는가? 요구사항2. footer의 내용을 제대로 배치할 수 있는가? |
<html>
<body>
<!-- nav start -->
<nav id="nav">
<div class="header_nav container">
<ul class="mainmenu">
<li><a href="#">HOME<i class="fa-solid fa-angle-down"></i></a></li>
<li class="main_company"><a href="#">COMPANY<i class="fa-solid fa-angle-down"></i></a>
<ul class="submenu display_none">
<li>ABOUT US</li>
<hr>
<li>OUR PEOPLE</li>
<hr>
<li>TESTIMONIALS</li>
<hr>
<li>FAQ</li>
<hr>
<li>PRICINC</li>
</ul>
</li>
<li><a href="#">PROJECT<i class="fa-solid fa-angle-down"></i></a></li>
<li><a href="#">SERVICES<i class="fa-solid fa-angle-down"></i></a></li>
<li><a href="#">FEATURES<i class="fa-solid fa-angle-down"></i></a></li>
<li><a href="#">NEWS<i class="fa-solid fa-angle-down"></i></a></li>
<li><a href="#">CONTACT<i class="fa-solid fa-angle-down"></i></a></li>
</ul>
<div>
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</nav>
<!-- nav end -->
<!-- slide section start -->
<section id="slide">
<div class="slidebox">
<div class="slides">
<div class="slide">
<img src="./img/slider_img/bg1.jpg" alt="slide1">
<div class="textbox">
<h4>17YEARS OF EXCELLENCE IN</h4>
<h2>CONSTRUCTION INDUSTRY</h2>
<a href="#" class="our_a">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
<div class="slide">
<img src="./img/slider_img/bg2.jpg" alt="slide2">
<div class="textbox">
<h4>17YEARS OF EXCELLENCE IN</h4>
<h2>CONSTRUCTION INDUSTRY</h2>
<a href="#" class="our_a">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
<div class="slide">
<img src="./img/slider_img/bg3.jpg" alt="slide3">
<div class="textbox">
<h4>17YEARS OF EXCELLENCE IN</h4>
<h2>CONSTRUCTION INDUSTRY</h2>
<a href="#" class="our_a">OUR SERVICES</a>
<a href="#">CONTACT NOW</a>
</div>
</div>
</div>
</div>
<div class="btnbox">
<div><i class="fa-solid fa-angle-left left"></i></div>
<div><i class="fa-solid fa-angle-right right"></i></div>
</div>
</section>
<!-- slide section end -->
<!-- tab section start -->
<section>
<div class="container">
<div class="tabbox">
<div class="tab" id="all">SHOW ALL</div>
<div class="tab" id="a">COMMERCIAL</div>
<div class="tab" id="b">EDUCATION</div>
<div class="tab" id="c">GOVERNMENT</div>
<div class="tab cent" id="d"><span>INFRASTRUCTURE</span></div>
<div class="tab" id="e">RESIDENTIAL</div>
<div class="tab" id="f">HEALTHCARE</div>
</div>
<div class="contentbox">
<div class="card all a">
<img src="./img/tab_img/project1.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross"></i></div>
</div>
<div class="card all b">
<img src="./img/tab_img/project2.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross"></i></div>
</div>
<div class="card all c">
<img src="./img/tab_img/project3.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross"></i></div>
</div>
<div class="card all d">
<img src="./img/tab_img/project4.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross"></i></div>
</div>
<div class="card all e">
<img src="./img/tab_img/project5.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross"></i></div>
</div>
<div class="card all f">
<img src="./img/tab_img/project6.jpg" alt="tab">
<div class="hover_textbox">
<h2>CAPITAL TELTWAY BUILDING</h2>
<a href="#">COMMERCIAL, INTERIORS</a>
</div>
<div class="filterbox"><i class="fa-solid fa-cross filterbox"></i></div>
</div>
</div>
</div>
</div>
</section>
<!-- tab section end -->
<!-- footer section start -->
<footer id="footer">
<div class="container">
<div class="footer_left">
<h2>ABOUT US</h2>
<img src="./img/logo.png" alt="logo">
<p>Lorem ipsum dolor sit amet, consectetur<br> adipisicing elit, sed do eiusmod tempor inci<br> done idunt ut
labore et dolore magna aliqua.</p>
<div>
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-solid fa-cat"></i>
</div>
</div>
<div class="footer_center">
<h2>WORKING HOURS</h2>
<P>We work 7 days a week, every day excluding<br> major holidays. Contact us if you have an<br> emergency. with
our Hotline and Contact<br>form.</P>
<div class="footer_line">
<h5>Monday - Friday:</h5>
<h5>10:00 - 16:00</h5>
</div>
<div class="footer_line">
<h5>Saturday:</h5>
<h5>12:00 - 15:00</h5>
</div>
<div class="footer_line">
<h5>Sunday and holidays:</h5>
<h5>09:00 - 12:00</h5>
</div>
</div>
<div class="footer_right">
<h2>SERVICES</h2>
<p>> Pre-Construction</p>
<p>> General Contracting</p>
<p>> Construction Management</p>
<p>> Design and Build</p>
<p>> Self-Perform Construction</p>
</div>
</div>
</footer>
<!-- footer section end -->
</body>
</html>
<css>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
.container {
width: 70%;
margin: 0 auto;
}
/* nav start */
#nav {
background-color: black;
color: white;
}
.header_nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.mainmenu {
display: flex;
justify-content: space-between;
align-items: center;
}
.mainmenu>li:nth-child(1) {
color: orange;
}
.mainmenu>li:nth-child(2) {
color: orange;
}
.mainmenu>li {
padding: 20px
}
.main_company {
position: relative;
}
.submenu {
width: 150px;
position: absolute;
top: 60px;
left: 20px;
border: 1px solid black;
background-color: white;
color: black;
z-index: 3;
}
.submenu>li {
padding: 10px;
/* border-bottom: 1px solid black; */
}
.submenu hr {
width: 90%;
margin-left: 5px;
}
.display_none {
display: none;
}
/* slide start */
#slide {
position: relative;
}
.slidebox {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.slides {
width: 100%;
font-size: 0;
}
.slide {
width: 100%;
font-size: 15px;
display: inline-block;
/* background-color: aqua; */
}
.slide img {
width: 100%;
}
.textbox {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox h4 {
font-size: 25px;
font-weight: 300;
}
.textbox h2 {
font-size: 40px;
margin-bottom: 30px;
}
.textbox a {
border: 2px solid orange;
padding: 15px;
}
.textbox .our_a {
background-color: orange;
color: white;
}
/* btn */
.btnbox {
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 0;
font-size: 40px;
color: white;
}
/* tab start */
.tabbox {
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 0;
border-bottom: 2px solid orange;
}
.tab{
width: 13%;
text-align: center;
padding: 15px;
font-weight: 600;
}
.card {
width: 33.3%;
position: relative;
font-size: 15px;
}
.contentbox {
display: flex;
flex-wrap: wrap;
font-size: 0;
}
.contentbox .all img {
width: 100%;
display: block;
}
/* hover start */
.hover_textbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
.card:hover .hover_textbox {
background-color: black;
opacity: 0.8;
z-index: 10;
transition: all 0.5s;
}
.hover_textbox h2 {
margin-top: 150px;
margin-left: 50px;
margin-bottom: 20px;
color: white;
}
.hover_textbox a {
background-color: orange;
display: inline-block;
margin-left: 50px;
text-align: center;
padding: 15px;
font-weight: 600;
}
.filterbox {
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
color: white;
text-align: center;
background-color: orange;
display: inline-block;
opacity: 0;
}
.card:hover .filterbox {
opacity: 0.8;
z-index: 10;
transition: all 0.5s;
}
/* footer start */
#footer {
background-color: black;
margin-top: 50px;
margin-bottom: 100px;
color: white;
padding: 30px;
}
#footer .container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0;
}
#footer .container h2 {
font-size: 15px;
border-left: 2px solid orange;
padding: 0 10px;
margin-bottom: 10px;
}
#footer .footer_left img {
width: 50%;
margin-bottom: 10px;
z-index: 10;
background-color: white;
}
#footer .footer_left p {
margin-bottom: 20px;
color: grey;
}
#footer .footer_left i {
margin-right: 15px;
color: grey;
}
.footer_line {
display: flex;
justify-content: space-between;
}
.footer_center p {
margin-bottom: 10px;
color: grey;
}
.footer_center h5 {
margin-bottom: 5px;
color: grey;
}
.footer_right p {
margin-bottom: 7px;
color: grey;
font-size: 15px;
}
<js>
1)dropdown
let company = document.querySelector(".main_company");
let subMenu = document.querySelector(".submenu");
company.addEventListener("click", showMenu);
function showMenu(){
subMenu.classList.toggle('display_none');
}
2)slide
let left = document.querySelector(".left");
let right = document.querySelector(".right");
let slides = document.querySelectorAll(".slide");
left.addEventListener("click", leftsliding);
right.addEventListener("click", rightsliding);
let index = 0;
function leftsliding(){
index--;
if(index < 0){
index = slides.length-1;
}
slides.forEach(function(slide){
slide.style.transform = `translateX(${index*(-100)}%)`;
})
}
function rightsliding(){
index++;
if(index >= slides.length){
index = 0;
}
slides.forEach(function(slide){
slide.style.transform = `translateX(${index*(-100)}%)`;
})
}
3)tab
let tabs = document.querySelectorAll(".tab");
let contents = document.querySelectorAll(".all");
for(let i = 0; i < tabs.length; i++){
tabs[i].addEventListener("click", function(){
showContent(this.id);
})
tabs[i].addEventListener("click", function(){
changeColor(this);
})
}
showContent("all");
changeColor(tabs[0]);
function showContent(tabId){
let className = tabId;
for(let i = 0; i < contents.length; i++){
contents[i].style.display = "none";
}
let activeContents = document.querySelectorAll("."+className);
if(activeContents != 0){
for(let i = 0; i < activeContents.length; i++){
activeContents[i].style.display = "block";
}
}
}
function changeColor(tab){
for(let i = 0; i < tabs.length; i++){
tabs[i].style.backgroundColor = "white";
tabs[i].style.color = "black";
}
tab.style.backgroundColor = "orange";
tab.style.color = "black";
}
'웹프로그래밍 > JavaScript' 카테고리의 다른 글
| 프로그래밍 언어 응용 38일차 (25/1/3) (0) | 2025.01.03 |
|---|---|
| 프로그래밍 언어 응용 37일차 (25/1/2) (0) | 2025.01.02 |
| 프로그래밍 언어 응용 36일차 (24/12/31) (0) | 2024.12.31 |
| 프로그래밍 언어 응용 35일차 (24/12/30) (2) | 2024.12.30 |
| 프로그래밍 언어 응용 34일차 (24/12/27) (1) | 2024.12.27 |