CSS) li 관련 (float, 메뉴바 만들기)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

HTML 코드

<nav>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">Javascript2015</a></li>
        <li><a href="#">jQuery</a></li>
    </ul>
</nav>

 

CSS 코드

<style>
    ul.menu {
        width: 80vw;	/* 1vw : 실제 화면 너비의 1/100 */
        padding-left: 0;
        margin: auto;
    }
</style>

ul은 block 요소이므로 width를 80vw로 지정하여 너비를 줄여주고, 기본으로 설정 되어 있던 padding-left를 0으로 변경,

margin을 auto로 주어 가운데 정렬을 하였습니다.

 

float - 요소를 띄워서 정렬

.menu li {
    list-style-type: none;
    float: left;
    width: 8em;
    height: 2.5em;
    background-color: #c9c9c9;
    text-align: center;
    border-right: 1px solid #818181;
    box-shadow: 1px 1px 8px #bbb;
}

 

.menu li a {
    display: block;
    text-decoration: none;
    color: #292929;
    padding: .5em;
}

 

.menu li:hover {
    background-color: #333;
}
.menu li:hover a {
    color: white;
}
.menu li:first-child {
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}
.menu li:last-child {
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
    border-right: 0;
}

hover 시

 

 

※ float 관련 포스팅

https://aboooks.tistory.com/72

[css 기초] float 속성에 대하여