[CSS]CSS로 드롭다운 메뉴를 제작하자!! 1탄

CSS로 드롭다운 메뉴를 제작하겠습니다.

이 드롭다운 메뉴 제작 강좌는 총 3탄까지 있을겁니다.

1탄 : 1차메뉴만.

2탄 : 2차메뉴까지

3탄 : CSS로 애니메이션을 넣어서 메뉴 만들기

자 이렇게 총 3탄에 걸쳐서 제작될 강좌 입니다.

---

일단 시작하기 앞서서 잘봤다는 댓글 한번씩 부탁드려요~~!

이번 강좌에서는 Brackets 라는 프로그램을 이용합니다.

처음으로 html 소스를 작성해 봅시다.

이런식으로 작성을 하면 아래 사진과같은 결과가 나옵니다.

이렇게 동그란 점과 함께 Text1 ~ Text4 까지 출력이 됩니다. 이제 여기에 css소스를 적용시켜 보겠습니다.

저같은 경우는 html소스 안에 <style> 태그를 사용하지 않으며, 외부파일을 무조껀 불러오기때문에 style.css파일을 따로 만들어서 소스를 입혔습니다. style태그를 이용하던 안하던 결과값은 같으니 개인적으로 편한걸 사용하시길 바랍니다.

외부파일 불러오는 소스 : <link href="style.css" rel="stylesheet" type="text/css">

 [ head 사이에 넣어주시면 됩니다. ]

CSS src-

nav ul li{display: block}
nav ul li a{display: inline;float: left;}

이런식으로 li 를 대상으로 잡고 display 값을 block으로 줍니다.

그 후 a 를 다시 대상잡고 display에 inline값을 준 뒤 float:left를 먹여(?)줍니다

이런 결과가 나옵니다.

이정도만 한다면 90%는 한겁니다.

여기다가 스타일만 조금씩 입히시면 1차메뉴는 완성이 되는겁니다.

스타일을 입혀볼게요

스타일을 입히기 전 첫번재와 마지막 <a></a> 태그에 class나 id값을 넣어주시면 더 편하게 스타일을 입힐 수 있습니다.

제가올린 html소스에선 id값이나 class값을 넣지 않았지만 지금 스타일을 넣는 작업을 할땐 class값을 넣어줄겁니다.

첫번째 class : active

마지막 class : the_last

CSS src -

ul{
    list-style: none;
    height: 35px;
    width:440px;
    background-color: black;
    padding: 0px;
}
ul li{
    display:block;
    margin: 0px;
}
ul li a{
    display: inline;
    float: left;
    margin-right: 30px;
    margin-top: 7px;
    color: white;
    font-family: "Trebuchet MS", Dotum, Arial;
    border-right: 1px solid #fff;
    padding-right: 30px;
}
ul li a.the_last{
    margin-right: 0px;
    padding: 0px;
    border: none;
}
ul li a.active{
    margin-left: 50px;
}

이런식으로 색감과 간격 등 여러가지 디자인을 해 주었습니다.

이렇게 하면 1차메뉴 제작은 끝난겁니다. Text4 오른쪽이 너무 좁잖아!

---

자 다들 잘 보셧나요?

1탄은 여기서 끝이났습니다. 여러분 모두 CSS 1차 메뉴를 직접 커스터마이징 하셔서 꼭 마스터하세요!!

다음 CSS강좌는 [ [CSS] CSS로 드롭다운 메뉴를 제작하자!! 2탄 ] 에서 뵙겟습니다!

궁금사항 및 감사인사는 댓글로 받겟습니다.