Skip to content

Commit

Permalink
24.02.21
Browse files Browse the repository at this point in the history
  • Loading branch information
@onjeong721
onjeong721 committed Feb 21, 2024
1 parent 41be75c commit 5871281
Show file tree
Hide file tree
Showing 5 changed files with 526 additions and 210 deletions.
11 changes: 5 additions & 6 deletions css/aside.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@ aside .wrap ul.list > li:nth-child(5) h3::before{
background-color: red;
}
aside .wrap ul.list > li:nth-child(6) h3::before{
background-color: gold;
background-color: #7829EE;
}
aside .wrap ul.list > li:nth-child(7) h3::before{
background-color: cyan;
}
aside .wrap ul.list > li:nth-child(9) h3::before{
background-color: brown;
aside .wrap ul.list > li:nth-child(8) h3::before{
background-color: #FF1A82;
}
aside .wrap ul.list > li h3 a {
height: 100%;
Expand Down Expand Up @@ -118,7 +118,6 @@ aside .wrap ul.list > li:nth-child(8) h3 a::before{
background-position-y: calc(-41px * 7);
}
aside .wrap ul.list > li div{
display: none;
}
aside .wrap ul.list > li ul.listsub {
position: absolute;
Expand Down Expand Up @@ -167,13 +166,13 @@ aside .wrap ul.list > li:nth-child(5) ul.listsub::before{
background-color: red;
}
aside .wrap ul.list > li:nth-child(6) ul.listsub::before{
background-color: gold;
background-color: #7829EE;
}
aside .wrap ul.list > li:nth-child(7) ul.listsub::before{
background-color: cyan;
}
aside .wrap ul.list > li:nth-child(8) ul.listsub::before{
background-color: brown;
background-color: #FF1A82;
}
aside .wrap ul.list > li ul.listsub li {
position: relative;
Expand Down
227 changes: 167 additions & 60 deletions css/header.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
header {
position: relative;
transition: 1s;
}
.headerFix{
position: fixed;
z-index: 1;
width: 100%;
background-color: white;
top: 0;
animation-name: down;
animation-duration: 0.5s;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
@keyframes down{
100%{
top:-80px;
}
}

@keyframes headerdown{
0%{
transform: translateY(-40px);
Expand All @@ -27,15 +44,22 @@ header .wrap nav {
align-items: center;
}
header.headerFix .wrap nav{
grid-template-columns: auto auto auto; grid-template-rows: auto;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
}
header .wrap nav h1 {
grid-column: 1 / span 2;
justify-self: center;
line-height: 2;
width: 100%;
height: 44px;
display: flex;
justify-content: center;
align-content: center;
}
header.headerFix .wrap nav h1{
grid-column: 1; justify-self: start;
grid-column: 1;
justify-self: start;
}
header .wrap nav h1::before{
content: "";
Expand All @@ -48,7 +72,7 @@ header .wrap nav h1::before{
top: 0;
}
header.headerFix .wrap nav h1::before{
display: none;
display: none;
}
header .wrap nav h1:hover::before{
}
Expand All @@ -59,6 +83,7 @@ header .wrap nav h1 a {
height: 25px;
background-image: url(../img/logo_hitejinro.png);
position: relative;
margin: 0 auto;
}
header .wrap nav h1 a span {

Expand All @@ -67,7 +92,6 @@ header .wrap nav ul.gnb{
display: flex;
}
header.headerFix .wrap nav ul.gnb{

justify-self: center;
}
header .wrap nav ul.gnb li {
Expand All @@ -85,47 +109,103 @@ header .wrap nav ul.gnb li a:hover{

}
/* wgnb */
header .wrap nav .wgnb{
header .wrap nav .wgnb {
display: block;
position: absolute;
width: 90%;
height: 100vh;
left: -90%;
top: 0;
width: 100%;
background-color: white;
z-index: 1;
padding: 20px 20px 0 20px;
padding: 0 20px 0 20px;
box-sizing: border-box;
transition: 1s;
/* display: none; */
/* transition: 1s; */
left: 0;
top: 120px;
background-color: rgba(18,83,250,0.98);
display: none;
height: 240px;
}
.close{

header .wrap nav .wgnb *{
color: white;
}
header .wrap nav .wgnb .center{
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.wgnbShow{
left: 0 !important;
display: block !important;
}
.close{
display: block;
width: 32px;
height: 32px;
background-image: url(../img/close.svg);
background-size: contain;
}
header .wrap nav .wgnb .wsub{
/*! padding-left:30px; */
height: 240px;
}
header .wrap nav .wgnb .wsub:nth-child(2) ul.sub1{
grid-template-columns: repeat(4,1fr);
grid-template-rows: auto;
}
header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(1){
grid-column: 2;
grid-row: 1;
}
header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(1) div{
width: 80%;
font-size: 14px;

}
header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(1) div a{
line-height: 1.4;
color: #ccc;
}
header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(2){
grid-column: 3;
grid-row: 1;
}
header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(3){
grid-column: 4;
grid-row: 1;
}
header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(3) ul.sub2{
flex-direction: column;
}
header .wrap nav .wgnb .wsub{
display: none;
position: absolute;
left: 0;
top: 0;
}
header .wrap nav .wgnb h2{
/*! display: block; */
/*! line-height: 3; */
/*! cursor: pointer; */
/*! font-size: 19px; */
/*! display: flex; */
/*! justify-content: space-between; */
/*! align-items: center; */
/*! opacity: 0.7; */
}
header .wrap nav .wgnb >a{
font-size: 0;
width: 30px;
height: 30px;
background: url(../img/close.svg) no-repeat center /contain;
}
header .wrap nav .wgnb .center{

}
header .wrap nav .wgnb .wsub{
padding-left: 45px;
}
header .wrap nav .wgnb h2{
display: block;
line-height: 3;
cursor: pointer;
font-size: 19px;
display: flex;
justify-content: space-between;
align-items: center;
opacity: 0.7;
/*! display: block; */
/*! line-height: 3; */
/*! cursor: pointer; */
/*! font-size: 19px; */
/*! display: flex; */
/*! justify-content: space-between; */
/*! align-items: center; */
/*! opacity: 0.7; */
}
header .wrap nav .wgnb h2::after{
content: "";
Expand All @@ -141,23 +221,69 @@ header .wrap nav .wgnb h2.currentH2::after{
.currentH2{
color: blue;
}
header .wrap nav .wgnb ul{
display: none;
header .wrap nav .wgnb .wsub ul.sub1{
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(3, 80px);
text-align: left;
margin-left: -65px;
margin-right: -20px;
background-color: #eee;
padding-left: 65px;
}
header .wrap nav .wgnb ul li{

header .wrap nav .wgnb ul.sub1 >li{
transition: 0.3s;
}
header .wrap nav .wgnb ul.sub1 > li:nth-child(-n+3){
margin-left:-20px;
padding-left: 20px;
}
header .wrap nav .wgnb ul.sub1 >li:hover{
background-color: rgba(11, 79, 184, 0.6);
}
header .wrap nav .wgnb ul.sub1 >li:nth-child(n+4){
border-left: 1px solid #ccc;
grid-row: 1 / span 3;
}
header .wrap nav .wgnb ul.sub1>li:nth-child(2){
grid-column: 1;
grid-row: 2;
}
header .wrap nav .wgnb ul.sub1>li:nth-child(3){
grid-column: 1;
grid-row: 3;
}
header .wrap nav .wgnb ul li a{
line-height: 3;
header .wrap nav .wgnb ul.sub1>li>a{
display: block;
line-height: 2.5;
padding-top: 20px;
}
header .wrap nav .wgnb ul li:not(:first-child) a{
border-top: 1px solid #ccc;
header .wrap nav .wgnb ul.sub1>li>a::before{
content: "";
display: block;
width: 20px;
border-top:1px solid #fff;
}
header .wrap nav .wgnb ul.sub1>li:nth-child(n+4) a{
padding-left: 20px;
}
header .wrap nav .wgnb ul.sub1>li:not(:first-child)>a{
padding-left: initial;
}
header .wrap nav .wgnb ul.sub2{

}
header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(2) ul.sub2{
flex-wrap: wrap;
}
header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(2) ul.sub2 li{
width: 40%;
}

header .wrap nav .wgnb ul.sub2 li{

}
header .wrap nav .wgnb ul.sub2 li a{
color: #ccc;
font-size: 14px;
line-height: 1.4;
font-weight: 300;
}
/* 기타메뉴 */
header .wrap nav ul.enb {
Expand All @@ -184,22 +310,3 @@ header .wrap nav ul.enb li a:hover {
header .wrap nav ul.enb li:nth-child(1) a::after,header .wrap nav ul.enb li:nth-child(2) a::after{

}
.headerFix{
position: fixed;
z-index: 1;
width: 100%;
background-color: white;
top: 0;
animation-name: down;
animation-duration: 0.5s;
animation-direction: reverse;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}

@keyframes down{
to{
top: -75px;
opacity: 0;
}
}
Loading

0 comments on commit 5871281

Please sign in to comment.