실습 24일 차
<학습한 내용 및 학습소감>
-
미디어쿼리를 적용 => 각 요소들을 1280px에 맞게 배치 중
-
각자 만든 section들을 통합해서 미디어쿼리를 적용해서 배치하는데 생각보다 쉽지 않았다
-
현재 작업하고 있는 미디어쿼리를 적용하는 방식들이 맞는 것인지 잘 모르겠다
-
지금은 어느정도 디자인이 정해져있어서 따라가는 수준이지만 만약에 샘플없이 적용하게된다면 어떤 식으로 적용되어야할지 궁금하다
-
현재 완성한 회사페이지 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/company.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>
<!-- Aos animation -->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
window.onload = function(){
setDraggable(false)
setZoomable(false)
}
</script>
</head>
<body>
<header>
<div class="container" id="company">
<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 is-active" active-color="blue">회사소개</a>
<a href="business.html" class="nav-item" 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>
<!------------------------- company header ------------------------->
<div id="company-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>
<!-------------------------------------------- Resoft 소개 --------------------------------------------->
<section id="introduce-resoft">
<div class="introduce-title">
<p class="title-m">REsoft 소개</p>
<p class="title-sub">ABOUT US</p>
</div>
<table class="info-container">
<tbody>
<tr class="info-box">
<td class="info-p"><p>회사명</p></td>
<td class="info-p2" ><p>(주)리소프트</p></td>
</tr>
<tr class="info-box">
<td class="info-p"><p>설립일</p></td>
<td class="info-p2"><p>2021년 5월 6일</p></td>
</tr>
<tr class="info-box">
<td class="info-p"><p>대표이사</p></td>
<td class="info-p2"><p>오유나</p></td>
</tr>
<tr class="info-box">
<td class="info-p"><p>주요 사업</p></td>
<td class="info-p2"><p>모바일 플랫폼 개발</p></td>
</tr>
<tr class="info-box">
<td class="info-p"><p>본사</p></td>
<td class="info-p2"><p>대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호</p></td>
</tr>
<tr class="info-box">
<td class="info-p">
<p>부설연구소</p>
</td>
<td class="info-p2">
<p>대구광역시 수성구 알파시티1로 160, SW융합테크비즈센터(Dnex) 305호</p>
</td>
</tr>
<tr class="info-box">
<td class="info-p">
<p>연락처</p>
</td>
<td class="info-p2">
<p>TEL. (053) 475-2110 / FAX. (0504) 257-5966 / E-mail. call@resoft.kr</p>
</td>
</tr>
</tbody>
</table>
</section>
<!--------------------- 연혁 --------------------------->
<section id="history">
<div class="history-title">
<p>연혁</p>
<span>history</span>
</div>
<ul class="history-ul">
<li class="ul-line">
<h1>2022</h1>
<h4>1</h4>
<p> </p>
</li>
<li>
<h1>2021</h1>
<h4 class="history-point">12</h4>
<p>대구여성인력개발센터 MOU 협약 (여성IT인재 현장실습)</p>
<p>대구가톨릭대학교 계약학과 MOU 협약 (ICTAI융합학과)</p>
<p>기업부설연구소(연구개발전담부서) 등록</p>
</li>
<li>
<h4>11</h4>
<p>제 38류, 제 45류 상표등록 출원 (Mmate : 제 40-1799224호, 제 40-1799225호)</p>
</li>
<li>
<h4>10</h4>
<p>서울특별시 송파구청 앱 개발 (제8회 한성백제마라톤 비대면 대회)</p>
<p>대구광역시체육회 앱 개발 (2021 대구 마스크쓰햬 컬러풀 핫플 걷기)</p>
<p>대구광역시 달서구체육회 앱 개발 (제15회 언택트 달서 하프마라톤 대회)</p>
</li>
<li>
<h4>9</h4>
<p>대구 경북지방중소벤처기업청 여성기업 등록</p>
</li>
<li>
<h4>8</h4>
<p>구미대학교 MOU 협약 (현장실습학기제)</p>
</li>
<li>
<h4>5</h4>
<p>(주)리소프트 회사 설립</p>
</li>
</ul>
</section>
<!------------------------- Organization chart ------------------------------->
<section id="Organization-chart"
data-aos="zoom-in"
data-aos-offset="200"
data-aos-easing="ease-out-sine"
data-aos-duration="1000">
<div class="Organization-title">
<p>조직도</p>
<span>ORGANIZATION</span>
</div>
<div class="org-tree">
<h1 class="level-1 CEO">대표이사</h1>
<ol class="level-2-wrapper">
<li>
<h2 class="level-2 department1">전략기획부</h2>
<div class="level-3-desc">
• 유저 Needs 분석<br>
• 고객 수요 확인<br>
• BM 설계/기획<br>
• 사업화 전략 수립<br>
• 사업계획서 작성
</div>
</li>
<li>
<h2 class="level-2 department2">개발부</h2>
<div class="level-3-desc">
• 유저 Needs 분석<br>
• 고객 수요 확인<br>
• BM 설계/기획<br>
• 사업화 전략 수립<br>
• 사업계획서 작성
</div>
</li>
<li>
<h2 class="level-2 department3">디자인부</h2>
<div class="level-3-desc">
• 유저 Needs 분석<br>
• 고객 수요 확인<br>
• BM 설계/기획<br>
• 사업화 전략 수립<br>
• 사업계획서 작성
</div>
</li>
<li>
<h2 class="level-2 department4">마케팅부</h2>
<div class="level-3-desc">
• 유저 Needs 분석<br>
• 고객 수요 확인<br>
• BM 설계/기획<br>
• 사업화 전략 수립<br>
• 사업계획서 작성
</div>
</li>
<li>
<h2 class="level-2 department5">경영지원부</h2>
<div class="level-3-desc">
• 유저 Needs 분석<br>
• 고객 수요 확인<br>
• BM 설계/기획<br>
• 사업화 전략 수립<br>
• 사업계획서 작성
</div>
</li>
</ol>
</div>
<script>
AOS.init(); // 자바스크립트로 init()을 해야 동작한다.
</script>
</section>
<!------------------------특허 인증 --------------------->
<div id="certification">
<div class="cert_text">
<p class="cert_p1">특허 & 인증</p>
<span>CERTIFICATION & PATENT</span>
</div>
<div class="cert_container">
<ul class="cert_ul">
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/certificate.png" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
<li class="cert_li">
<div class="cert_image_box">
<img src="./img/book.webp" class="cert_img">
</div>
</li>
</ul>
</div>
</div>
<!------------------------------------ Map -------------------------------------->
<div id="directions">
<div class="direction-title">
<p>오시는 길</p>
<span>DIRECTIONS</span>
</div>
<div class="cont">
<div>
<div id="map" class="kakaomap" style="width:1440px;height:680px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=78f4f36bf8cec7a4fe3231201a6f8b56"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.87172918917555, 128.62486866975289), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
var imageSrc = './img/map_marker.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(35.87172918917555, 128.62486866975289); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 버튼 클릭에 따라 지도 이동 기능을 막거나 풀고 싶은 경우에는 map.setDraggable 함수를 사용합니다
function setDraggable(draggable) {
// 마우스 드래그로 지도 이동 가능여부를 설정합니다
map.setDraggable(draggable);
}
// 버튼 클릭에 따라 지도 확대, 축소 기능을 막거나 풀고 싶은 경우에는 map.setZoomable 함수를 사용합니다
function setZoomable(zoomable) {
// 마우스 휠로 지도 확대,축소 가능여부를 설정합니다
map.setZoomable(zoomable);
}
</script>
</div>
<div class="info">
<div class="tel">
<div class="one"><p>연락처</p></div>
<div class="two"><p>TELL. (053) 475-2110 FAX. (0504) 257-5966 E-MAIL. call@resoft.kr</p></div>
</div>
<div class="line"></div>
<div class="add">
<div class="one"><p>주소</p></div>
<div class="two"><p>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (주)리소프트</p></div>
</div>
</div>
</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;
}
/********************* company-header ***********************/
#company-header {
background: url(../img/company-main.png) no-repeat center;
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#company-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;
}
/*************** 회사소개 - REsoft소개 ****************/
#introduce-resoft {
width: 1920px;
height: 756px;
}
.introduce-title {
margin-top: 100px;
margin-left: 240px;
}
.title-m {
font: bold 40px/58px Noto Sans KR;
color: #1E1E1E;
}
.title-sub {
font: medium 18px/26px Noto Sans KR;
color: #C8C8C8;
}
.info-container {
position:relative;
border-collapse: collapse;
width: 1440px;
height: 522px;
margin-top: 50px;
margin-left: 240px;
margin-bottom: 100px;
}
.info-p {
font: bold 24px/50px Noto Sans KR;
letter-spacing: 1.2px;
color: #1E1E1E;
text-align:center;
}
.info-p p {
position: absolute;
margin-left: 40px;
margin-top: 12.3px;
}
.info-p2 {
font: normal 20px/30px Noto Sans KR;
color: #959595;
}
.info-p2 p {
margin-left: 280px;
margin-top: 22.3px;
}
/****************** 회사소개 RESOFT소개 밑줄 ****************/
.info-box{
border-bottom: 1px solid #C8C8C8;
margin: 0;
}
/********************* history 연혁 ********************/
#history {
width: 1920px;
height: 1314px;
background-color: #F9F9F9;
}
.history-title p {
position: relative;
font-size: 40px;
padding-top: 100px;
margin-left: 240px;
font-weight: bolder;
}
.history-title span {
margin-left: 255px;
font-size: 18px;
font-weight: bolder;
color: #959595;
text-align: center;
}
/******************* history-ul *******************/
.history-ul {
position: relative;
width: 1140px;
height: 980px;
margin-left: 540px;
margin-top: 78px;
}
.history-ul h1 {
position: absolute;
width: 125px;
height: 72px;
font-size: 50px;
line-height: 40px;
}
.history-ul .ul-line {
border-bottom: 1px solid #DBDBDB;
}
/******** 세로 라인 만들기 *********/
.history-ul::before {
content: "";
display: block;
position: absolute;
background-color: #959595;
left: 31.5%;
margin-left: -2px;
padding: 20px 0;
width: 6px;
height: 88%;
margin-top: 30px;
}
.history-ul li {
position: relative;
margin-bottom: 20px;
}
.history-ul li h4 {
font-size: 32px;
color: #184B9F;
text-align: right;
margin-right: 830px;
}
/************ 세로라인 동그라미 만들기 ************/
.history-ul li h4::before {
content:"";
position: absolute;
left: 30.7%;
transform: translateY(60%);
border-radius: 100%;
background:#fff;
border: 10px solid #184B9F;
box-sizing: border-box;
}
.history-ul li p {
padding-left: 35%;
line-height: 65px;
margin-top: -15px;
font-size: 20px;
}
/************** 2021 위치 조정 *************/
.history-point {
margin-top: 50px;
}
/********************* Organization-chart *******************/
#Organization-chart {
background-color: #FFFFFF;
width: 1920px;
height: 906px;
}
.Organization-title p {
position: relative;
font-size: 40px;
padding-top: 140px;
font-weight: bolder;
margin-left: 240px;
}
.Organization-title span {
margin-left: 240px;
font-size: 18px;
color: #959595;
font-weight: bolder;
}
/************************* tree-title & box **********************/
.Org-tree {
width: 1400px;
height: 532px;
margin-top: 50px;
margin-left: 240px;
}
.Org-tree .CEO {
background-color: #184B9F;
color: #FFFFFF;
width: 200px;
height: 80px;
padding: 22px 48px;
font-size: 26px;
border-radius: 20px;
}
.Org-tree .department1 {
width: 200px;
height: 80px;
padding: 21px 34px;
font-size: 26px;
border: 1px solid #184B9F;
border-radius: 20px;
}
.Org-tree .department2 {
width: 200px;
height: 80px;
padding: 21px 60px;
font-size: 26px;
border: 1px solid #184B9F;
border-radius: 20px;
}
.Org-tree .department3 {
width: 200px;
height: 80px;
padding: 21px 47px;
font-size: 26px;
border: 1px solid #184B9F;
border-radius: 20px;
}
.Org-tree .department4 {
width: 200px;
height: 80px;
padding: 21px 47px;
font-size: 26px;
border: 1px solid #184B9F;
border-radius: 20px;
}
.Org-tree .department5 {
width: 200px;
height: 80px;
padding: 21px 34px;
font-size: 26px;
border: 1px solid #184B9F;
border-radius: 20px;
}
/********************* 위치 조절 **********************/
.level-1,
.level-2,
.level-3 {
position: relative;
}
/********************* LEVEL-1 STYLES ************************/
.level-1 {
width: 50%;
margin: 0 auto;
/* 중앙 정렬 */
}
/******************* LEVEL-1 중앙 세로선 **************************/
.level-1::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 140px;
background: black;
}
/***************** LEVEL-2 STYLES *********************/
.level-2-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
/* fr = 컨테이너 내의 공간 비율을 분수로 나타내는 단위 */
/* 5개의 부서를 가로로 나눠서 배치 */
}
/*************** LEVEL-2 가로선 & 위치 ***************/
.level-2-wrapper::before {
content: "";
position: absolute;
top: 70px;
left: 10%;
width: 80%;
height: 2px;
background: black;
}
/*************** LEVEL-2 세로선 & 위치 ***************/
/*.level-2-wrapper::after {
display: none;
content: "";
position: absolute;
left: -20px;
bottom: -20px;
width: calc(100% + 20px);
height: 2px;
background: black;
}*/
.level-2-wrapper li {
position: relative;
margin-top: 140px;
}
.level-2-wrapper > li::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 70px;
background: black;
}
.level-2 {
width: 70%;
margin: 0 auto 40px;
}
/*.level-2::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 0px;
background: black;
}
만약 그 밑에 하위 요소를 배치하기위해 선을 만들어야할 때 사용
.level-2::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: black;
}*/
/**************** LEVEL-3 STYLES ****************/
.level-3-desc {
margin-left: 40px;
font-size: 22px;
}
/******************************* 특허인증 **********************************/
#certification {
width: 1920px;
height: 1454px;
background-color: #F9F9F9;
}
#certification .cert_text .cert_p1 {
position: relative;
font: normal normal bold 40px/58px Noto Sans KR;
padding-top: 100px;
margin-left: 240px;
}
#certification .cert_text span{
margin-left: 240px;
font: normal normal medium 18px/26px Noto Sans KR;
color: #C8C8C8;
}
/********************** 특허 이미지 박스 ***********************/
.cert_container{
width: 990px;
height: 1120px;
margin-left:630px;
}
.cert_ul {
display: flex;
flex-wrap: wrap;
margin-top: 55px;
}
.cert_li {
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% / 3);
margin-bottom: 80px;
}
/********************** 특허 이미지 **************************/
.cert_image_box {
position: relative;
width: 230px;
height: 320px;
background-color: #FFFFFF;
padding: 5px;
border-radius: 4px;
border: #184B9F 1px solid;
}
.cert_img {
position: absolute;
width: 220px;
height: 310px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: 0% 0% no-repeat padding-box;
}
/*************************** Map *****************************/
#directions {
max-width: 1440px;
height: 1344px;
margin-left: 240px;
}
.direction-title p {
position: relative;
font: normal normal bold 40px/58px Noto Sans KR;
padding-top: 100px;
}
.direction-title span{
font: normal normal medium 18px/26px Noto Sans KR;
color: #C8C8C8;
}
.direction-title {
margin-bottom: 50px;
}
#directions .cont .info .tel,
#directions .cont .info .add{
height: 115px;
display: flex;
justify-content: center;
align-items: center;
}
#directions .cont .info .tel .one,
#directions .cont .info .add .one{
width: 230px;
margin-left: 150px;
font-weight: bold;
font-size: 24px;
letter-spacing: 1.2px;
line-height: 50px;
color: #1E1E1E;
text-align: center;
}
#directions .cont .info .tel .two,
#directions .cont .info .add .two{
width: 1080px;
font-size: 20px;
line-height: 30px;
color: #959595;
}
#directions .cont .info .line {
position: absolute;
width: 1440px;
height: 1px;
background-color: #C8C8C8;
}
#directions .cont .info {
border-bottom: solid #C8C8C8;
}
/***************** 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;
}- nav hover js
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()
}
코딩공부중