실습 25일 차
<학습한 내용 및 학습소감>
- main page 미디어쿼리 완성, page2의 미디어쿼리 시작
- 갑자기 가로스크롤 이슈로 멘탈 터짐, 개발자코드 상황에서는 무조건 가로스크롤이 생기는 현상이 발생하는데 이게 마음에 많이 걸리고 마음에 들지 않음
- 네이버 같은 경우 비율을 줄일 경우 max-margin이 정해져 있어서 비율 자체로만 줄어들고 가로스크롤이 발생하지 않음
- 내가 원하는건 저런 식으로 만들고 싶었는데 그 부분을 실패했음
- 전체를 수정해 보려고 했으나 비율을 바꾸기 시작하니 포지션부터 모든게 어그러져서 손쓸 수 없는 상황으로 감, 가로스크롤만 없애고 쿼리에서 작동하는 식으로만 결과를 가져가려고 함
- 결론만 말하면 스스로 느끼기에 코딩의 일부를 실패했다고 생각함
- 물론 처음부터 네이버같은 사이트 수준을 원하는 건 큰 욕심이라고 생각할 수 있음
- 이전 리소프트 프로젝트도 비슷한 현상을 보이고 있기 때문에 이런 부분에 대한 해결책을 찾아 볼 필요가 있다고 생각함
- 자료들을 찾아보고 있는데 사실 아직 잘 이해가 가지 않음
- 클론 코딩을 좀 더 다양하게 해보면서 경험을 쌓을 필요가 있을 것 같음
- 결론적으로 오늘은 간만에 멘붕, 어제는 하루만에 4군데 작업을 했는데 오늘은 한 군데가 힘듬
- 멘탈에 따라 코딩 효율이 극심하게 차이가 남, 물론 코딩 난이도 차이도 있긴 함
- 마스터 피스를 만드는게 아니기 때문에 최대한 비슷하게 작업한다는 생각만 하려고 함
현재까지 만들어 놓은 데스크탑 page3
- 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>Document</title>
<link rel="stylesheet" href="./css/business.css">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container" id="business">
<h1>
<!--------------------- Resoft Logo ----------------------->
<a href="main.html"><img src="./img/Header-Logo.svg"></a>
</h1>
<!----------------------- Nav Bar ------------------------->
<ul>
<li class="nav">
<a href="company.html" class="nav-item" active-color="blue">회사소개</a>
<a href="business.html" class="nav-item is-active" active-color="blue">사업현황</a>
<a href="information.html" class="nav-item" active-color="blue">정보마당</a>
<span class="nav-indicator"></span>
</li>
<script src="./js/header5.js"></script>
<!--------------------- Hamberger Button ---------------------->
<li class="btn">
<button type="button" onclick="doDisplay()"><i class="fa-solid fa-bars" style="color:black"></i></button>
</li>
</ul>
</div>
<!------------------------- business header ------------------------->
<div id="business-header">
<h1>사업현황</h1>
</div>
<!------------------------- Hamberger Navbar --------------------------->
<div id="myNav" class="overlay">
<div class="overlay-content">
<a href="company.html#introduce-resoft">REsoft소개</a>
<a href="company.html#history">연혁</a>
<a href="company.html#Organization-chart">조직도</a>
<a href="company.html#certification">특허&인증</a>
<a href="company.html#directions">오시는 길</a>
</div>
<div class="overlay-content">
<a href="business.html#ecoce">ECOCE</a>
<a href="business.html#moado">moaDo</a>
<a href="business.html#remainder">Etc</a>
</div>
<div class="overlay-content">
<a href="information.html#information">REsoft소식</a>
</div>
</div>
<!--------------------------- Hamberger Script ----------------------------->
<script>
function doDisplay(){
var con = document.getElementById("myNav");
if(con.style.display == 'block'){
con.style.display = 'none';
}else{
con.style.display = 'block';
}
}
</script>
</header>
<!------------------------------- ecoce ----------------------------------->
<section id="ecoce">
<div class="ecose_7">
<h2 class="title_1">에코스</h2>
<p class="title_2">ECO-Clean Earth</p>
<div class="ecoce-imga">
<img src="./img/ecosfront.png" alt="">
</div>
<div class="ecoce-right">
<p class="ex_text">국내 최초<br>탄소중립 실천인증 플랫폼</p>
<img src="./img/ecos.png" alt="">
<p class="logo_2">ECO-Clean Earth</p>
<ul class="ecoce-app">
<li>
<a href="">
<img src="./img/playstore.png" alt="">
<p>Play Store에서 다운로드</p>
</a>
</li>
<li>
<a href="">
<img src="./img/apple.png" alt="">
<p>App Store에서 다운로드</p>
</a>
</li>
</ul>
</div>
</div>
</section>
<!----------------------------------- moado ------------------------------------>
<section id = "moado">
<div class="bkg-left">
<div class="bkg-right">
<div class="moado_title">
<h1>모아두</h1>
<p>moado</p>
</div>
<div class = "wrapper">
<div class = "moado_left">
<img src="./img/moado2.png">
</div>
<div class = "moado_right">
<p>내 손안의 모바일 회원수첩</p>
<img src="./img/pass649.png">
<button type="button" style="cursor:pointer;">사이트 바로가기</button>
</div>
<div class = "moado_middle">
<img src="./img/mainmoado.png">
</div>
</div>
</div>
</div>
</section>
<!-------------------------------- remainder ------------------------------------>
<div id="remainder">
<div class="remainder-text">
<p>Etc</p>
<span>PROJECTS</span>
</div>
<div class="remainder-container">
<ul class="remainder-ul">
<li class="remainder-li">
<div class="remainder-image-box">
<img src="./img/mask-go.png" class="remainder-img">
</div>
</li>
<li class="remainder-li">
<div class="remainder-image-box">
<img src="./img/urology.png" class="remainder-img">
</div>
</li>
<li class="remainder-li">
<div class="remainder-image-box">
<img src="./img/maroton-mobile.png" class="remainder-img">
</div>
</li>
<li class="remainder-li">
<div class="remainder-image-box">
<img src="./img/solab.png" class="remainder-img">
</div>
</li>
<li class="remainder-li">
<div class="remainder-image-box">
<img src="./img/kibwa-mobile.png" class="remainder-img">
</div>
</li>
</ul>
</div>
</div>
<!------------------------- footer ------------------------------->
<footer id="footer">
<div class="footer-wrap">
<div class="footer-logo">
<img src="./img/resoft.png" alt="">
</div>
<div class="address">
<p class="footer-add">© RESOFT CO.LTD. All Rights Reserved.</p>
<p class="footer-inform">
<span>상호 : (주)리소프트</span>
<br>
<span>사업자등록번호 : 722-81-02219</span>
<br>
<span>주소 : (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</span>
</p>
<p class="footer-inform-add">
<span>대표이사 : 오유나</span>
<span>개인정보책임자 : 이현지</span>
<br/>
<span>전화 : (053) 475-2110</span>
<span>팩스 : (0504) 257-5966</span>
<span>이메일 : call@resoft.kr</span>
</p>
</div>
</div>
</footer>
</body>
</html>- css
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+KR&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
box-sizing: border-box;
vertical-align: baseline;
}
body {
max-width: 1920px;
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
}
li {
list-style: none;
}
/********************************* 헤더부분 *************************************/
header {
width: 1920px;
z-index: 1000;
top:0;
}
header .container{
display: flex;
justify-content: space-between; /* 양 끝으로 배치 */
align-items: center;
width: 100%;
border: 1px solid #DBDBDB;
height: 80px;
}
header ul {
width: 648px;
position: relative;
margin-right: 126px;
height: 80px;
}
header ul li {
display: inline-block;
}
.nav {
display: inline-flex;
position: relative;
overflow: hidden;
max-width: 100%;
padding: 0 20px;
top: -6px;
}
.nav-item {
color: black;
text-decoration: none;
transition: 0.3s;
z-index: 1;
font-size: 20px;
font-weight: bolder;
position: relative;
margin-right: 68px;
margin-bottom: 10px;
}
.nav-item:before {
content: "";
position: absolute;
bottom: 0px;
left: -10%;
width: 100%;
height: 5px;
background-color: blue;
border-radius: 5px 5px 5px 5px;
opacity: 0;
transition: 0.5s;
margin-bottom: -10px;
}
.nav-item:not(.is-active):hover:before {
opacity: 1;
bottom: 0;
left: 1%;
}
.nav-item:not(.is-active):hover {
color: blue;
}
.nav-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 5px;
transition: 0.4s;
z-index: 1;
border-radius: 5px;
}
header button {
background: transparent;
border: 0;
cursor: pointer;
font-weight: bold;
font-size: 32px;
margin-top: 25px;
}
/************************************* 로고 ****************************************/
header h1 a {
margin-left: 360px;
}
header h1 a img {
width: 133px;
height: 30px;
}
/********************* business-header ***********************/
#business-header {
background: url(../img/business.png) no-repeat center;
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#business-header h1 {
color: white;
}
/************************** Hidden **************************/
.overlay {
height: 210px;
width: 100%;
z-index: 1;
top: 80px;
left: 0;
background-color: rgba(47, 88, 163, 0.9);
overflow-y: hidden;
transition: 0.5s;
position: absolute;
display: none;
}
.overlay-content {
float: left;
top: 10%;
text-align: left;
margin-right: 50px;
margin-top: 15px;
line-height: 0.7;
}
.overlay-content:first-child {
margin-left: 1157px;
}
.overlay-content:nth-child(2) {
margin-left: -18px;
}
.overlay-content:last-child {
margin-left: 15px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffff;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: black;
}
/****************에코스*****************/
#ecoce {
width: 1920px;
height: 983px;
}
.ecose_7 {
margin-top: 100px;
margin-left: 240px;
}
.title_1{
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 40px/58px var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
font: normal normal bold 40px/58px Noto Sans KR;
letter-spacing: 0px;
color: #1E1E1E;
}
.title_2{
font: var(--unnamed-font-style-normal) normal medium 18px/26px var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
text-align: left;
font: normal normal medium 18px/26px Noto Sans KR;
letter-spacing: 0px;
color: #C8C8C8;
}
.logo_2{
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 22px/32px var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
font: normal normal bold 22px/32px Noto Sans KR;
letter-spacing: 0px;
color: #1E1E1E;
opacity: 1;
}
.ex_text{
text-align:right;
margin-bottom:10%;
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-30)/var(--unnamed-line-spacing-44) var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
font: normal normal bold 30px/44px Noto Sans KR;
color: #1E1E1E;
opacity: 1;
margin:0%;
margin-bottom:140px;
word-break:normal;
}
#ecoce {
position:relative;
}
.ecoce-imga{
background-image:url("../img/ecosback.png");
float:left;
max-width: 679px;
max-height: 592px;
margin:0%;
position: absolute;
}
.ecoce-imga img{
padding-left:229px;
padding-top:95px;
margin:0%;
}
.ecoce-right {
text-align:right;
margin:0%;
margin-right: 284px;
position:relative;
}
.ecoce-app{
list-style:none;
float:right;
}
.ecoce-app li{
float: left;
background: #1E1E1E 0% 0% no-repeat padding-box;
border-radius: 69px;
opacity: 1;
margin-top:140px;
margin-left:30px;
}
.ecoce-app img{
float:left;
margin-top:11px;
margin-left:20px;
margin-right:15px;
margin-bottom:11px;
}
.ecoce-app p{
text-decoration:none;
color:#fff;
margin-top:10px;
margin-bottom:9px;
margin-left:12px;
text-align:left;
}
/*****************모아두***************/
#moado {
top: 1463px;
left: 0px;
width: 1920px;
height: 820px;
opacity: 1;
}
.bkg-left{
width: 1920px;
height: 820px;
background: linear-gradient(30deg, #339BE133 10%, #E4CDE800 20%);
}
.bkg-right{
width: 1920px;
height: 820px;
background: linear-gradient(161deg, #E4CDE800 40%, #E4CDE8 100%);
}
.moado_title {
position: absolute;
top: 1463px;
margin-left: 240px;
}
.moado_title h1 {
font-size: 40px;
}
.moado_title p {
font-size: 18px;
color: #C8C8C8;
text-align: center;
}
.wrapper {
width: 1920px;
height: 686px;
opacity: 1;
position: absolute;
margin-top: 132px;
}
.moado_left{
float: left;
margin-left:11%;
max-width : 30%;
display:block;
}
.moado_left img{
left: 240px;
height: 471px;
width: 850px;
position: absolute;
}
.moado_right {
display: inline-block;
width: 452px;
}
.moado_right p {
top: 0px;
left: 1300px;
width: 400px;
height: 44px;
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-30)/var(--unnamed-line-spacing-44) var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
text-align: right;
font: normal normal bold 30px/44px Noto Sans KR;
letter-spacing: 0px;
color: #1E1E1E;
opacity: 1;
position: absolute;
}
.moado_right button {
top: 429px;
left: 1527px;
width: 153px;
height: 57px;
background: #1E1E1E 0% 0% no-repeat padding-box;
border-radius: 69px;
opacity: 1;
text-align: center;
font: normal normal medium 14px/22px Noto Sans KR;
letter-spacing: 0px;
color: #FFFFFF;
position: absolute;
}
.moado_right img {
top: 184px;
left: 1228px;
width: 452px;
height: 105px;
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
position: absolute
}
.moado_middle{
top: 204px;
left: 700px;
width: 680px;
height: 482px;
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
position: absolute;
}
/********************************** Etc *********************************/
#remainder {
width: 1920px;
height: 784px;
}
.remainder-text {
margin-bottom: 50px;
}
.remainder-text p {
position: relative;
font-size: 40px;
padding-top: 100px;
margin-left: 240px;
font-weight: bolder;
}
.remainder-text span {
margin-left: 240px;
font-size: 18px;
color: #9E9E9E;
}
/********************** Etc 이미지 박스 ***********************/
.remainder-container {
width: 1440px;
height: 400px;
}
.remainder-ul {
display: flex;
margin-left: 240px;
}
.remainder-li {
position: inline-block;
margin-right: 75px;
}
/********************** Etc 이미지 **************************/
.remainder-img {
width: 228px;
height: 350px;
border: 2px solid #E9E9E9;
box-shadow: 2px 2px 10px #E9E9E9;
}
/***************** footer ********************/
.footer-wrap {
position: relative;
left: 0;
width: 1920px;
height: 250px;
background: #E9E9E9 0% 0% no-repeat padding-box;
opacity: 1;
}
.footer-wrap img {
width:200px;
height:45px;
margin-top:50px;
margin-left:240px;
}
.footer-wrap .address {
letter-spacing: 0px;
line-height: 26px;
color: #9E9E9E;
opacity: 1;
text-align: left;
}
.footer-wrap .address .footer-add {
position: relative;
height: 24px;
left: 460px;
bottom:20px;
font-size: 24px;
}
.footer-wrap .address .footer-inform {
position: relative;
margin-left: 240px;
padding-bottom: 49px;
height:76px;
}
.footer-wrap .address .footer-inform-add {
position:relative;
left: 1000px;
bottom: 50px;
height: 50px;
margin-top: -25px;
}- js(nav bar 이벤트)
const indicator = document.querySelector(".nav-indicator");
const items = document.querySelectorAll(".nav-item");
function handleIndicator(el) {
items.forEach(item => {
item.classList.remove("is-active");
item.removeAttribute("style");
});
indicator.style.width = `${el.offsetWidth}px`;
indicator.style.left = `${el.offsetLeft}px`;
indicator.style.backgroundColor = el.getAttribute("active-color");
el.classList.add("is-active");
el.style.color = el.getAttribute("active-color");
}
items.forEach((item, index) => {
item.addEventListener("click", e => {
handleIndicator(e.target);
});
item.classList.contains("is-active") && handleIndicator(item);
});
function preventClick(e){
e.preventDefault()
}- 이후 작업 사항
- nav bar hover 색상 변경
- page2 헤더부분 미디어쿼리
- 완성된 부분
코딩공부중