[HTML, CSS] 헤더에 메뉴 넣기 (inline / block 구조 차이)

요런 식으로 오른쪽으로 정렬되어있는 메뉴바를 만들고 싶을 때!

 

1. 헤더 태그안에 필요한 클래스와 a 를 넣는다.

	<div id="header">
            <div class="container">
               <div class = "header">
                    <div class="header-menu">
                    <a href="http://wiss.tistory.com">Desinger</a>
                    <a href="http://wiss.tistory.com">Publisher</a>
                    <a href="http://youtube.com">Youtube</a>
                    </div>
                    <!-- //헤더 메뉴 -->
               </div>
            </div>
        </div>
        <!-- //header -->

 

2. css 부분은 아래와 같이 코딩한다.

/* 헤더 */
.header {}
.header .header-menu {text-align: right;}
.header .header-menu a{color: #fff; padding :10px; display:inline-block;}

 

 여기서 주의 할 점은 a 태그안에 text-align 을 할 경우 먹히지 않는 다는 것이다.

인라인 구조(a 태그)는 전체 옵션이 먹히지 않는다. 그렇기 때문에 블록구조인(클래스) header-menu 안에 text-align 옵션을 주고 padding 을 주는데 이때 padding 또한 인라인 구조에서는 먹히지 않는다. 그러므로 display 옵션을 통해 block 으로 변경시켜준 후 반영하면 반영이 된다.!

 

추가적으로 아래와 같은 코드를 넣으면 마우스를 올렸을 때는 회색으로 텍스트 색이 변하게 된다.

.header .header-menu a:hover {color: #666}

 

* inline/block 구조 자세히 알기 (아래 참조)

https://webzz.tistory.com/225