HAHYE_ARCHIVE

[새싹 프론트엔드] 메뉴바 만들기 본문

새싹

[새싹 프론트엔드] 메뉴바 만들기

하혜2 2022. 10. 26. 16:45

 

수업시간에 반응형 웹을 배우면서 메뉴바만들기 복습을 했는데

복습을 해도 너무 어렵고 이해가 잘 안가는거같아서 또 복습을 해본다! 

 

기본 html 코드는 아래와 같다

<body>
    <div class="menubar">
        <div class="logo">
            <a href="#">
                <i class="fa-brands fa-pagelines"></i>
                <b>SeSAC</b>
            </a>
        </div>
        <ul class="menuList">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
        </ul>
    </div>
</body>

 

이렇게 html을 짜고 나면

 

요런 기본 페이지가 나옴! 

이제 css 추가를 해보자! 

 

a {
    text-decoration: none;
    color: black;
}

.menuList {
    list-style: none;
}

li {
    display: inline;
    float: left;
}

 

  💡 수직메뉴를 수평메뉴로 바꾸는법!!

  1. <li> 태그의 display값을 inline으로 바꿔준다
  2. float 속성을 이용해 li 태그에 left 값을 넣어준다 

a태그의 텍스트 데코레이션 속성을 none으로 주면서 하이퍼링크에 밑줄을 없앴고,

파란글씨 싫어서 검정색으로 우선 바꿈

ul태그의 목록번호도 싫어서 list-style에서 none 값을줌!

 

 

이제 하나의 한줄 메뉴처럼 보이기위해서 ul 목록들을 저 새싹로고 랑 같은 위치에 존재할수있도록 위치를 옮겨야함

얘는...완벽하게 이해는 안가지만 강사님 따라서 이렇게 했다! 

 

.logo {
    float: left;
}

SeSAC 로고가 들어간 부분의 클래스 이름인 .logo에 float:left 값을 줘서 

왼쪽으로 붙을수있게 만들어줌! 

 

아! 그리고 그전에

/* 전체 태그 초기화 왜? 
위에 쫙 달라붙게 하려고  */
* {
    margin: 0;
    padding: 0;
}

전체에 마진과 패딩값을 0으로줌!

마진과 패딩에 값을 0으로 설정하지 않으면 

기본 설정값이 남아있어서 꽉찬 메뉴바를 만들수가 없음 ㅠㅅㅠ 

이건 완성때 예제로 공개! 🤭

 

 

우선 모양이 제대로 잡혔는지 주려고 div인 .menubar에 백그라운드 컬러를 주었는데 

띠용??????????? 색이 먹질 않는다 허허

뭔가 알듯말듯 강사님이 계속 말했던 부분인거같아 공부했던걸 쭉 둘러보니 알아냈다 

 

‼️ float을 쓰게되면 부모가 영역이 없어짐!

내가 .menubar의 자식인 .logo에 float 값을 주었기때문에 .menubar의 영역이 사라져서 백그라운드 색을줘도 보이지 않았던것!!!

 

💡 부모한테 overflow : hidden 주면 됨! (어려우면 height 높이 주면됨!!) 

.menubar에 overflow:hidden을 주니까 해결!

.menubar {
    background-color: aqua;
    overflow: hidden;
}

 

여기까지 했으면 다했다 어려운건 다 지나갔다고 생각ㅎㅎ 

으로 생각했지만 또 난관에 봉착

 

 

 

/* 전체 태그 초기화 왜? 
위에 쫙 달라붙게 하려고  */
* {
    margin: 0;
    padding: 0;
}

/* a 태그 밑줄 제거 */
a {
    text-decoration: none;
    color: white;
}

/* ul 리스트 */
.menuList {
    list-style: none;
    margin-left: 30px;
}


li {
    display: inline;
    float: left;
    padding: 0 20px;
    font-weight: bold;
    font-size: 20px;

}

.logo {
    float: left;
    margin-left: 20px;
    font-size: 20px;
    padding-left: 10px;
}

.menubar {
    background-color: rgb(81, 136, 255);
    overflow: hidden;
    height: 80px;
    line-height: 80px;
}

 

이리저리 만져서 이 모양까지는 완성했다!

근데 SeSAC과 Home 사이 간격을 벌리고싶은데 아무리 해도 안되는것!ㅠㅠ

메뉴리스트(ul)에 margin-left 값을 주면 딱인데..!

왜.. 왜때문에 안되는걸까 이리저리 뜯어보다가 또...발견...

어렵다 어려워 

 

우선 ㅠ!!!

메뉴리스트(ul)의 자식인 li에 float:left가 들어갔다..!

그 말인 즉슨 부모인 메뉴리스트에 overflow:hidden이 들어가야한다는것!

그래서 바로 추가했는데도 적용이 안됨 상관없나보다;; ㅎ

이게 아니군.... 코드를 다시 뒤집어봄 

 

float:left 가 정답이였다..! ㅎ 어? ㅎ 

내가 html 구조를 잘 이해를 못하고있는거같단 생각이 든때..ㅎ!!!! 

 

/* ul 리스트 */
.menuList {
    list-style: none;
    margin-left: 30px;
    overflow: hidden;
    float: left;
}

다행히 float:left 값을 주니까 margin-left값이 잘 먹었다! 

 

목록태그를 가지고 메뉴바만들기 간단해보이지만 절대 간단하지않았다.....

얘는 주기적으로 봐야할거같음 

자바스크립트 나가면 우쩔려고 벌써 힘든지~!!! 으이구!~!! 

 

다음엔 오늘 한걸가지고 반응형 메뉴바로 만들어보기~!

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅

저작자표시 비영리 변경금지 (새창열림)

'새싹' 카테고리의 다른 글

[새싹 프론트엔드] 자바스크립트 자료형과 변수  (0) 2022.11.14
[새싹 프론트엔드] 자바스크립트 문법  (0) 2022.11.01
[새싹 프론트엔드] CSS3 레이아웃  (0) 2022.10.26
[새싹 프론트엔드] CSS 속성 정리  (0) 2022.10.26
[새싹 프론트엔드] CSS 기초 정리  (0) 2022.10.24
'새싹' Related Articles more
Comments