1. 학습한 내용
- 뭔가 코드가 복잡해서 다시 한 번 만들어보자는 생각으로 다 갈아엎고 새롭게 만들었다
- 여전히 코드가 복잡하고 꼬여보이지만 현재까지는 최선..
<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="./style2.css">
<script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
<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">
<h1>
<!-- <button>LOGO</button> -->
<button data-animation-scroll="true" data-target="#main"><img src="./img/resoft logo.png"></button>
</h1>
<nav>
<ul>
<li>
<button data-animation-scroll="true" data-target="#company">회사소개</button>
</li>
<li>
<button data-animation-scroll="true" data-target="#work">사업현황</button>
</li>
<li>
<button data-animation-scroll="true" data-target="#information">정보마당</button>
</li>
<li class="btn">
<button type="button" onclick="doDisplay()"><i class="fa-solid fa-bars" style="color:white"></i></button>
</li>
</ul>
</nav>
</div>
<div id="myNav" class="overlay">
<div class="overlay-content">
<a href="#">REsoft소개</a>
<a href="#">연혁</a>
<a href="#">조직도</a>
<a href="#">특허&인증</a>
<a href="#">오시는 길</a>
</div>
<div class="overlay-content">
<a href="#">ECOCE</a>
<a href="#">moaDo</a>
<a href="#">Etc</a>
</div>
<div class="overlay-content">
<a href="#">REsoft소식</a>
</div>
</div>
<div class="text-box">
<div class="hd-1">
<p class="main-text">Evolution<br />With New Software</p>
<p class="sub-text">
<span>Mobile APP(Android/iOS) Development, </span>
<span>AI Bigdata Analysis, MetaVerse, </span>
<span>Responsive WEBsite, Brand Design Launch, </span>
<span>ICT Consulting</span>
</p>
<img src="./img/Icon ionic-ios-arrow-round-back.svg" class="left">
<img src="./img/play.svg" class="center">
<img src="./img/Icon ionic-ios-arrow-round-back-1.svg" class="right">
</div>
</div>
<script>
var bDisplay = true;
function doDisplay(){
var con = document.getElementById("myNav");
if(con.style.display=='none'){
con.style.display = 'block';
}else{
con.style.display = 'none';
}
}
</script>
</header>
</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;
}
li {
list-style: none;
}
/********************************* 헤더부분 *************************************/
header {
width: 100%;
height: 900px;
background: url("./img/Head-back-img.png") no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;
position: fixed;
z-index: 1000;
top:0;
}
header .container{
display: flex;
justify-content: space-between; /* 양 끝으로 배치 */
align-items: center;
width: 100%;
border: 1px solid #ffff;
height: 80px;
}
header nav ul{
display: flex; /* 메뉴 가로 배치 */
}
header nav ul li{
padding: 2rem;
}
header button{
background: transparent;
border: 0;
cursor: pointer;
color: white;
}
/* 로고 */
header h1 button{
font-weight: bold;
color: white;
margin-left: 360px;
}
header h1 button img {
width: 133px;
height: 30px;
}
/* 메뉴 */
header nav ul li button {
font-size: 20px;
}
header nav ul li.btn button {
margin-right: 220px;
margin-left: 30px;
font-size: 32px;
}
.text-box {
position: relative;
height: 100%;
}
.hd-1 {
position: absolute;
top: 400px;
left: 240px;
color: #ffff;
letter-spacing: 0;
text-align: left;
}
.hd-1 p.main-text {
font-size: 40px;
font-weight: bold;
line-height: 140%;
margin-bottom: 50px;
}
.hd-1 p.sub-text {
word-break: normal;
font-size: 18px;
width: 60%;
}
.hd-1 img {
margin-top: 80px;
opacity: 0.5;
}
.hd-1 img.left{
width: 60px;
height: 40px;
}
.hd-1 img.center{
width: 15px;
height: 21px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
}
.hd-1 img.right{
width: 60px;
height: 40px;
}
/* Hidden */
.overlay {
height: 210px;
width: 100%;
position: fixed;
z-index: 1;
top: 80px;
left: 0;
background-color: rgba(47, 88, 163, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.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: 1169px;
}
.overlay-content:nth-child(2) {
margin-left: -22px;
}
.overlay-content:last-child {
margin-left: 10px;
}
.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;
}2. 학습한 내용 중 어려웠던 점
- 세세한 위치를 잡아나가는 과정도 생각보다 부침이 많았지만
- 토글 버튼 하나에 이렇게 많은 시간을 잡아먹을 줄은 생각을 못했다
- 토글 버튼을 연결하는 부분이나, 토글 시 나타나는 부분이 menu var의 하위 태그들로 구성이 되어야 하는지 아니면 따로 div를 만들어서 구성해야하는지 헷갈려서 많이 헤멘 것 같다
- 일단은 결론적으로 따로 div를 구성해서 만들었는데 왠지 이건 답이 아닐 것 같다는 느낌이 강하게 든다
- 하지만 현재까지의 최선, 또 다른 방법을 찾게되면 전부 다 갈아엎지 않을까..
- 토글 버튼 하나 만드는 함순데도 낑낑거리고 있으니..앞날이 참으로 멀고도 험하다
3. 해결방법
- 하나 하나 비교하면서 억지로 위치를 잡고 만들었다
- 나중에 미디어쿼리 적용하면 크게 망할 것 같은 느낌이 강하게 들어서 다른 방법들도 빠르게 찾아봐야겠다
- 일단은 결과물은 애니메이션 슬라이드만 연결하면 완성
4. 학습소감
- 하루하루 그래도 뭔가 나아간다
- 막힌 부분이 뚫리면 시원하기 그지없다
- 아직은 기본적인 부분도 끊임없이 막혀서 끊임없이 찾아보고 공부한다
- 아직은 멀고도 험한 길을 가야하지만 재미있다
코딩공부중