무작정 따라하기

무작정 따라하기 (랜딩페이지) Step.03

mr.팡 2023. 9. 6. 17:19

이번 포스팅에서는 공통 header 부분의 로고와, 클릭하면 펼쳐지는 nav 영역을 만들어 보려합니다.

 

먼저 아래의 이미지를 보시겠습니다.

네비게이션 close
네이베이션 open

위와 같이 네이베이션을 클릭하면 펼쳐지며 랜딩페이지의 메뉴가 보여지는 형태의 작업입니다.

어떻게 구현해야 할까요??

html에 태그 작성하기

먼저 앞서 준비된 소스에 추가로 header 영역의 태그를 입력해 주려합니다. 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>셀프다 교육용</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/slick.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

    </head>
    <body>
        
        <!-- 공통헤더 -->
        
        <div class="header">
            <a href="#none" class="logo">
                <img src="images/logo.svg" alt="셀프다 교육용 로고">
            </a>
            <div class="nav_btn"> 
                <span class="btn"></span>
                <a href="#s01">회사소개</a>
                <a href="#s02">광고채널</a>
                <a href="#s03">파트너스</a>
                <a href="#s04">포트폴리오</a>
                <a href="#s05">고객센터</a>
            </div>
        </div>
        
       
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="js/common.js"></script>

    </body>
</html>

<div> 에 class 명을 header라 주고

안쪽 태그들에게도 각각 logo, nav_btn 클래스를 주어 태그들의 이름을 정해 주었습니다.

이 class의 이름들을 이용하여 css와 js를 이용하여 네비게이션이 작동되도록 해볼 것 입니다.

 

CSS 작성하기

위 작성된 html 의 클래스 명을 기반으로 css로 레이아웃 및 디자인을 설정 해 주었습니다.

/** header **/

.header{position: fixed; left: 0; top: 0; width: 100%; padding: 3rem; z-index: 9999}
.nav_btn{position: absolute; position: absolute; right: 3rem; top: 3rem; display: flex; border: 1px solid #F41D00; border-radius: 86px; background: #F41D00; gap:50px; width: 86px; padding: 0; overflow: hidden;  transition-duration: 1s}
.nav_btn span.btn{width: 86px; height: 86px; background: #F41D00;  border-radius: 86px; cursor: pointer; position: absolute; display: block; left: 0; top: 0;  transition-duration: 1s}
.nav_btn span.btn::after{content: ''; position: absolute; width: 16px; height: 2px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.nav_btn span.btn::before{content: ''; position: absolute; width: 2px; height: 16px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%)}

.nav_btn a{color: #000; font-size: 20px; line-height: 86px}
.nav_btn a:hover{color: #F41D00; transition-duration: .5s}


.nav_btn.open{ padding-right: 3rem; padding-left: 130px; border-color:#dfdfdf;  transition-duration: 1s; width: 760px; background: #fff}

.nav_btn.open span.btn{transform: rotate(135deg); transition-duration: 1s; background: #fff}
.nav_btn.open span.btn::after, .nav_btn.open span.btn::before{background: #666}


.nav_btn:hover span.btn{transform: rotate(45deg); transition-duration: 1s;}

 

common.js 파일 만들기

js 파일을 만들어 jquery를 사용하여 아래와 같이 네비게이션 +버튼을 클릭하면 open이라는 클래스가 추가되도록 하였습니다.

$(function() {
    $(".nav_btn .btn").click(function () {
    	if($('.nav_btn').hasClass('open')) {
                $('.nav_btn').removeClass('open');
          } else {
                $('.nav_btn').addClass('open');
          }
    });
    
});

이제 각 영역 별로 어떻게 적용되어 가는지 알아볼가요?

.header

로고와 네비영역을 감싸는 부모요소 입니다. 공통적인 헤더영역의 이름으로 지정하였습니다.

.header{position: fixed; left: 0; top: 0; width: 100%; padding: 3rem; z-index: 9999}

위와 같은 css를 적용하였습니다 상세하게 알아볼가요?

position : fixed (절대적인 고정위치를 줍니다.)
left : 0 (왼쪽 기준 0으로 위치를 지정합니다.)
top : 0 (위쪽 기준 0으로 위치를 지정합니다.) 
width: 100% (넓이를 전체넓이로 합니다.)
padding : 3rem (영역의 패딩값 입니다.)
z-index : 9999 (영역들이 중첩되었을 경우 가장 상단으로 올리게 됩니다.)

로고 영역

<a href="#none" class="logo">
          <img src="images/logo.svg" alt="셀프다 교육용 로고">
</a>

 

a태그를 사용하여 클릭 하였을 경우 index페이지로 이동될 수 있도록 경우의 수를 주었습니다.

#none은 링크를 삽입하지 않을 경우 대체하여 작성하였습니다. 관련 내용으로는 아래를 참고해주세요.

"#"  : 아무것도 실행하지는 않지만 페이지 최상단으로 이동한다. 

"#none" : 아무것도 실행하지 않으며, 페이지 최상단으로도 이동하지 않는다.

네비 영역

<div class="nav_btn"> 
                <span class="btn"></span>
                <a href="#s01">회사소개</a>
                <a href="#s02">광고채널</a>
                <a href="#s03">파트너스</a>
                <a href="#s04">포트폴리오</a>
                <a href="#s05">고객센터</a>
</div>

 

.nav_btn이라는 클래스명을 지정하여 안쪽으로 

</span class="btn"> : +버튼 영역과

펼쳐졌을 경우의 a 태그들을 입력하였습니다.

.nav_btn{position: absolute; right: 3rem; top: 3rem; display: flex; border: 1px solid #F41D00; border-radius: 86px; background: #F41D00; gap:50px; width: 86px; padding: 0; overflow: hidden;  transition-duration: 1s}
.nav_btn.open{ padding-right: 3rem; padding-left: 130px; border-color:#dfdfdf;  transition-duration: 1s; width: 760px; background: #fff}

먼저 펼쳐지기 전 해당 클래스의 위치를 고정값으로 두어 위에서 3 오른쪽에서 3rem 만큼 위치에 두었습니다.

또한 넓이값과 배경색, border을 주어 둥근 모양을 만들었습니다. 

 

위에 jquery를 통하여 클릭시 open이라는 클래스가 추가되면서 css가 변화되도록 함께 작성하였습니다.

 

사용된 css는 아래와 같은 역할을 진행합니다.

<펼쳐지기 전>
position: absolute (위치를 고정시킵니다.)
right: 3rem (오른쪽에서 3rem만큼 이동)
top: 3rem (위쪽에서 3rem만큼 이동)
display: flex (영역의 태그들에게 flex값을 주어 가로방향으로 배치합니다.)
border: 1px solid #F41D00 (1px의 #F41D00 색상코드를 가진테두리를 줍니다)
border-radius: 86px (둥근 모서리를 만듭니다.)
background: #F41D00 (F41D00 색상코드의 배경을 줍니다.)
gap:50px (안쪽 태그들의 서로간의 좌우 간격을 줍니다. *flex사용시 적용)
width: 86px (가로값을 86px로 합니다.)
padding: 0 (안쪽 폭을 0으로 지정합니다.)
overflow: hidden (벗어나는 영역을 감추어 줍니다.)
transition-duration: 1s (속성값이 변화되면서 움직임에 부드러움을 줍니다.)

<펼처진 후>
padding-right: 3rem (오른쪽 안쪽 폭을 3rem으로 합니다.)
padding-left: 130px (왼쪽 안쪽 폭을 130px로 합니다.)
border-color:#dfdfdf (테두리 색을 #dfdfdf색상코드로 바꿉니다.)
transition-duration: 1s (속성값이 변화되면서 움직임에 부드러움을 줍니다.)
width: 760px (넓이를 760px로 바꿉니다.)
background: #fff (배경색을 #fff색상코드로 바꿉니다.)

+ 버튼과 x 버튼을 만들자!

이제 네비게이션 영역 안쪽의 +버튼과 클릭후 변화되는 x 버튼을 css로 지정해 주려합니다.

.nav_btn span.btn{width: 86px; height: 86px; background: #F41D00;  border-radius: 86px; cursor: pointer; position: absolute; display: block; left: 0; top: 0;  transition-duration: 1s}
/*+버튼의 기본적인 영역을 잡아줍니다.*/

.nav_btn span.btn::after{content: ''; position: absolute; width: 16px; height: 2px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.nav_btn span.btn::before{content: ''; position: absolute; width: 2px; height: 16px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%)}
/*+버튼의 - | 를 만들어 겹쳐줍니다.*/

.nav_btn.open span.btn{transform: rotate(135deg); transition-duration: 1s; background: #fff}
/*네비게이션 오픈시 + 버튼이 기울어져 x 모양을 만들어 줍니다.*/

.nav_btn.open span.btn::after, .nav_btn.open span.btn::before{background: #666}
/*네비게이션 오픈시 버튼영역의 색상을 변경합니다.*/

.nav_btn:hover span.btn{transform: rotate(45deg); transition-duration: 1s;}
/*마우스 오버시에도 +버튼이 움직이는 다이나믹한 요소를 줍니다.*/

 

a태그에 글자 사이즈와 굵기 색상을 정해주자!

.nav_btn a{color: #000; font-size: 20px; line-height: 86px}
/*a태그의 색상을 블랙으로 하고 폰트사이즈를 20px로 하며 횡간을 86px로 합니다.*/

.nav_btn a:hover{color: #F41D00; transition-duration: .5s}
/*a태그 마우스 오버시 색상을 변화시킵니다.*/

자 헤더 영역의 완성입니다.!

여기까지 작성하셧으면 아래와 같은 화면이 만들어 져있으실 겁니다.!

 

다음시간에는 푸터 영역을 만들어 보도록 하겠습니다.

'무작정 따라하기' 카테고리의 다른 글

무작정 따라하기 (랜딩페이지) Step.04  (0) 2023.09.08
무작정 따라하기 (랜딩페이지) Step.02  (0) 2023.08.31
무작정 따라하기 (랜딩페이지) Step.01  (0) 2023.08.30

'무작정 따라하기'의 다른글

  • 현재글무작정 따라하기 (랜딩페이지) Step.03

관련글

티스토리툴바