navigation - bar 로고 넣기

웹 페이지 상단에 네비게이션을 만들었다. 만들던 와중 

.logo{ ....        float : left;  }

가 있길래 필요없는 내용이 들어가 있어 지웠더니.....

프로젝트1

또잉.....(니가 왜 거기로 갔냐.....)

문제를 찾기 위해 하나씩 분석해 갔다... 

 

일단 html파일 순서를 혹시 거꿀로 했나 해서 찾아봤다.

 

<div class="wrap">
    <header>
        <a class="logo" href="#home"><img src="https://poiemaweb.com/img/logo.png"></a>
        </a>
        <nav>
            <!--input을 만든 다음 label 과 연동한다. label을 클릭했을 때, checkbox 처럼 움직이기 위해-->
            <input class="nav-toggle" id="nav-toggle" type="checkbox">
            <label class="navicon" for="nav-toggle"><span class="navicon-bar"></span></label>
            <!-- input checkbox 요소의 프로파티 값과 label 요소의 for 프로퍼티값을 일치시켜 연동시키면 label을 눌렀을 때 checkbox와 동일 효과  -->
            <ul class="nav-items">
                <li><a href="#">강사소개</a></li>
                <li><a href="#">예약하기</a></li>
                <li><a href="#">리뷰</a></li>
            </ul>
        </nav>
    </header>
</div>

위에 같이, html 순서는  a태그 - > ul - > li 태그 순으로 되어 있기 때문에 로고가...!!! 앞으로 와야 되는 것이 맞다.

그렇다면 문제는 css 쪽에 있다는 말인거같은데.....

css navigation 관련 내용을 보던 와중 

css 에 의심될만 한 내용이 있었다... 

 

nav {
    float: left;
}

 

이런.... 내가 로고에도 float:left; 를 붙였던 이유가 이것때문이였구나....

그래서 float :right로 변경하고 했더니 조치완료!!

nav {
    float: right;
}

 

 

float에 대해 더 자세히 알아보기 위해 MDN에 검색을 해봤다. 

 

float

---

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline)요소가 그 주위를 감싸는 자기 컨테이너의 좌 우측을 따라 배치되어야 함을 지정합니다. 

 

핵심내용 : 

위에서 말한 바와 같이, 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동합니다.!!!!!

 

 

잘알아보고 써야될거같다..