dukDukz

클론페이지 SKT Cloud 본문

프로젝트

클론페이지 SKT Cloud

헤일리_HJ 2021. 4. 11. 16:47

210409_project.zip
2.28MB

사용한 주요 기능들

 

1. href

<a href = "new.html">

<a href = "#first_div">

클릭 시 다른 html이나 특정 id값을 가진 영역으로 이동가능

 

좀 더 부드럽게 이동하려면 css에서 html 안에 scroll-behavior : smooth 를 주면 된다.

그 이상으로 속도를 조절 하는건 불가능(css만으로는 불가능함)

html{
    scroll-behavior: smooth;    
}
<li><a href="./introduce.html">소개</a></li>
<li><a href="#main_section3">SKT상품</a></li>

 

 

 

 

2. hover

.header_ul>li:nth-child(3):hover>a,
.header_ul>li:nth-child(4):hover>a
{
    color: #ff7a00;
}

.menu_ul>li:hover
{
    border-bottom: 2px solid #ff7a00;
}

********************************************************


.section1_ul > li:hover{
    background-color: white;
    border: 5px solid rgba(182, 177, 177, 0.8);
    border-radius: 20px;
    transition: all .45s;
    cursor: pointer;  
    transform: scale(1.1);
}

.section2_ul>li:hover >#section2_img> img{
    background-color: rgba(95, 90, 90, 0.61);
    transition: all .45s;
    /*transform: scale(1.1);*/
}

.section2_ul>li:hover >#section2_img>.s2_img1{
    filter: brightness(60%);
    transition: all .45s;
}

*****************************************************


.section2_div2:hover>a>.skt_pi{
    filter: brightness(60%); 
    transition: .1s;
} 

.section3_div > a:hover{
    background-color: #ff7a00;
    border: 1px solid #ff7a00;
    color: #fff;
    transition: .3s;
}


.leftBtn:hover{
    background-image: url('./img_skt/icon_promo_indicator_left_active.svg');
}


.rightBtn:hover{
    background-image: url('./img_skt/icon_promo_indicator_right_active.svg');
}


#section4_content > ul > li:hover > .n_con >a{
    color: #FF7A00;
    transition: all .35s;
}

 

 

3.   클릭, 재클릭시 display : block/none 토글되는 버튼 .js

 

/*PC ver 메뉴 부분 눌렀을때*/
var menubar = document.querySelector('#menubar');

function menuBtn(){
    className = menubar.getAttribute('class');

    plusimg = document.querySelector('.img_plus');

    if(className == "fake")
    {
        menubar.setAttribute('class', 'menu_show');
        document.getElementById("plusImg").src="./img_skt/icon_gnb_plus_active.svg";
        plusimg.setAttribute('class', 'img_plus deg');
    }else if(className == "menu_show")
    {
        menubar.setAttribute('class', 'fake');
        document.getElementById("plusImg").src="./img_skt/icon_gnb_plus.svg";
        plusimg.setAttribute('class', 'img_plus deg2');
    }
   
}



/*PC ver 돋보기 검색 눌렀을 때*/

function searchBtn(){
    search_li = document.querySelector('.search_li>input');
    console.log(search_li);

    className2 = search_li.getAttribute('class');
    console.log(className2);

    if(className2 == "search_hide"){
        search_li.setAttribute('class', 'search_show');
    }else if(className2 == "search_show"){
        search_li.setAttribute('class', 'search_hide');
    }
    
}

function toggleImg(){
    getImg = document.getElementById("search_img").src="./img_skt/icon_search_active.svg";
}

function Img_back(){
    getbackImg = document.getElementById("search_img").src="./img_skt/icon_search.svg";
}

 

4.   mobile ver

/*mobie ver css*/
@media (max-width: 1200px) {}

 

 

5.   icon 변경과 font 추가

<!DOCTYPE html>
<html lang="en">

<head>
    
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
    <link rel="icon" href="./img_skt/favicon.ico">

</head>
html{
    font-family: 'Nanum Gothic', sans-serif;
}

 

 

 

 

항상 해매는 부분

 

1. height 설정 잘못해서 밑에 영역이 치고 올라오는 것

      height auto로 설정

 

2.  slider 부분에서 옆으로 쫙 늘여놓을 때 

      position : flex;

 

3. position: absolute; relative; 

    버튼 넣을 때는 큰 틀에 relative를 주고 각각 좌 우 버튼에 absolute를 주었다.

 

'프로젝트' 카테고리의 다른 글

어플리케이션 감귀 개인정보 처리 방침  (0) 2021.08.25
[포트폴리오] 팀프로젝트 경일 홈페이지 리뉴얼 - 로그인 부분 상세 설명 + css 정리  (2) 2021.06.30
'프로젝트' Related Articles more