[CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기

먼저 결과화면부터

만들 내용은

먼저 ul, li(리스트)를 이용해서 5가지 요소(HTML, CSS, JAVA-SCRIPT, J-Query, BOOT STRAP)을 만들고

a태그로 감싸 링크를 만든다.

------ 여기까지는 예전에 했던 예제(https://qdgbjsdnb.tistory.com/134)와 같은데 이 다음부터 새로 배운 내용들을 적용한다.

1. ul 태그를 div 태그로 감싼다.(화면의 바를 좌측에서 우측으로 채우기 위해)

2. 링크들을 좌측 정렬 하고, padding 을 적용해서 간격을 준다.

3. 배경색을 지정

4. ul의 list-style을 없애 항목들의 º 표시를 없앤다.

5. a태그의 속성을 변경해 색깔을 상황에 따라 설정

결과 코드는 다음과 같다.

<!--다른 페이지에서 호출 되는 경우 일부분만 만들어도 된다.-->
<!--
    왼쪽에서 오른쪽으로 정렬
    링크 걸기, 링크 밑줄 제거
-->
<style>
    a, li{
        float:left;
        padding: 5px 20px;
        background-color: black;
        font-weight: 600;

    }
    ul{
        list-style: none;
        min-width: 900px;
    }
    a:link{
        text-decoration: none;
        color: white;
    }
    a:visited{
        text-decoration: none;
        color: white;
    }
    a:active{

        text-decoration: none;
        color: black;
    }
    li:hover{
        /*마우스 올렸을때 li 상자 색바꾸기*/
        background-color: red;
    }
    .bar{
        /*바를 좌에서 우로 쭉 연결되게끔*/
        height: 41px;
        width: 100%;
        background-color: black;
    }
</style>
<div class="bar">
<ul>
    <a href="#"><li>HTML</li></a>
    <a href="#"><li>CSS</li></a>
    <a href="#"><li>JAVA-SCRIPT</li></a>
    <a href="#"><li>J-Query</li></a>
    <a href="#"><li>BOOT STRAP</li></a>
</ul>
</div>
<!--참조만 할 html 파일은 html영역, head영역 body영역 등 생략이 가능-->

이 문제를 저번과 같이 iframe으로 합쳐보자