네비게이션바는 웹페이지에서 다른 페이지로 이동하기 위해서 여러가지 버튼형식으로 만들어진 메뉴의 집합이다.
이것은 타이틀 아래에 있는 경우도 있고 사이드바에 위치하기도 하며 어떤 때는 페이지의 하단에 위치하기도 한다.
이 네이게이션바는 웹페이지에서 아주 중요한 역할을 하기 때문에 디자인에 각별한 신경을 쓰게 된다. 제이쿼리나 플래시를 이용하여 아주 다양하게 만들어지고 정지된 메뉴가 아닌 슬라이딩 효과를 주게 되고 사진을 넣어서 움직이게 하여 방문자로 하여금 재미를 선사하기도 한다. 이러한 네비게이션바를 만드는데 있어서 기본이 되는 CSS를 점검해 본다.
아주 기본적인 것이므로 간단하게 위와같이 만들어본다.
바디부분에 다음과 같이 li 태그를 작성한다.
<body>
<div id="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../products.html">Products</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../about Us.html">About Us</a></li>
</ul>
</div>
</body>
헤드태그안에 css가 들어갈 자리를 만든다.
<head>
<style type="text/css">
</style>
스타일시트(css)가 위치할 곳은 가장 좋은 장소가 외부 시트이다. 간단한 페이지 작성에는 위와같이 임베디드방식도 좋다.
현재까지를 웹페이지에서 보면 다음과 같다.
메뉴는 목록의 형태이므로 li 태그를 사용한다. 이 태그는 기본적으로 앞에 불릿(bullet)을 만들게 되어있는데 제일 먼저 할일이 이것을 지우는 것이다. 그다음이 현재의 세로형태에서 가로형태로 만든다. css는 태그를 제어하기위해서 타겟(선택자:selector)을 정하는데 여러종류가 있지만 주로 사용하는 선택자는 Type선택자(태그자체를 타겟으로 함)와 Id선택자(태그에 아이디를 부여하고 이 아이디를 타겟으로함)를 이용한다. 위 html코드를 보니 아이디선택자는 하나이고 태그는 여러개이다. 보통 아이디를 부여하는 것은 페이지에서 유일한 경우이다. 네비게이션바는 페이지에서 하나이니까 아이디를 붙인다. 사이드 네비게이션바를 2차적으로 둘 수도 있는데 이럴 경우는 아이디를 side-nav이라고 하면 된다.
#nav ul {
list-style-type: none;
}
스타일시트안에서 선택자를 지정할때 아이디의 경우는 앞에 샤프를 붙이고 태그선택자는 태그를 그대로 사용한다. 그래서 ul앞에는 아무것도 없다. 위와같이 선택자가 두개 있는 경우는 선택자를 특별히 지정하는 경우이다. ul태그가 다른 곳에도 나타날 수도 있으니 nav이라는 아이디를 가진 곳의 ul태그를 지정하는 것이다. 타겟을 아주 정밀하게 지정하는 방법이다. 하지만 여기서는 ul태그가 하나뿐이므로 ul만 붙여도 된다. list-style-type은 목록의 앞에 붙은 심볼을 지정할때 사용하는 스타일 속성이다. 기본적으로 값이 disc로 되어있고 이외에도 circle(테두리만 있는 원), square(까만 정사각형) 등 몇가지가 더있다. 여기서는 기본으로 되어있는 disc를 없애주기 위해 값을 none으로 한다. 다음을 추가해본다.
#nav ul li {
float: left;
}
이제는 li 태그의 속성에 대해서 값을 부여한다. float 는 페이지 레이아웃할때 항상 쓰이는 속성이다. 이것은 위아래로 나열된 것을 좌우로 나열되도록 하는 속성이다. left는 좌측을 기준으로 좌우정열한다는 의미다. html코드상에 li태그가 4개가 있는데 이 4개의 태그에 대해서 각각 위의 명령이 떨어지므로 li태그 전부가 좌우정렬하게 된다. 여기까지의 화면을 보면..
li 끼리 간격을 안 정해줬으니 너무 다닥다닥 붙어있다. 서로 떨어지라고 40픽셀의 간격을 주고 li태그 안의 글자는 중앙정렬시키기 위해 다음을 추가한다.
#nav ul li {
float: left;
margin-right: 40px;
text-align: center;
}
margin은 li 태그와 li태그 사이의 간격이다. right는 오른쪽으로만 간격을 준다는 뜻이다. li태그마다 오른쪽마진을 40픽셀줬으니 전체 li태그가 40px씩 떨어지게 된다.
이제 좀 숨이 트인다.
이제부터는 a태그를 타겟으로 여러가지 장식을 할 차례다. 지금 상태로 웹페이지에 올려서 마우스를 글자에 대면 링크가 있다는 표시로 커서가 pointer(손모양)로 바뀐다. 그런데 글자에만 링크가 걸려있어서 글자 외의 부분 즉, 상하좌우로 공간을 주게 되면 그 부분까지 링크가 걸리게 해줘야한다. 이럴때 쓰는 속성이 display 이고 그 값으로는 block을 준다. 그리고 글자 외의 부분까지 링크가 미치는 영역을 넓히기 위해 패딩이라는 속성과 값을 준다. 그리고 영역을 구분하기 위해서 테두리를 1픽셀 준다.
#nav ul li a {
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
border: 1px solid #666;
}
앞에서 마진이란 것을 사용했는데 여기서는 패딩을 사용했다. 마진은 어떤 영역의 외부에 공간을 줄때 사용하고 패딩은 그 영역의 내부에서 공간을 줄때 사용한다. 여기서 아무리 a태그에 대해서 마진을 줘바야 링크가 표시되는 영역은 늘어나지 않는다. 패딩을 줘야 영역내의 공간이 늘어나니까 마우스로 클릭할 수 있는 범위가 넓어지는 것이다. 위에서 보면 패딩이라는 속성이 4개나 된다. 이것을 하나로 줄일 수가 있다. padding이라는 속성다음에 값으로 상, 우, 하, 좌 의 순서로 값을 주면 된다 12시부터 시계방향으로 9시까지이다. 그러니 위 내용은 padding: 0 20px 0 20px; 같이 줄일 수도 있다. 이것도 길다고 생각하면 padding: 0 20px; 로 해도 된다. 상하가 같은 값이고 좌우가 같은 값일 경우만 해당된다. 전부가 같은 값이면 padding: 20px; 이라고 하면 된다.
테두리는 border라는 속성을 사용한다. 값을 주는 순서가 있다. 처음은 테두리의 굵기이고 그다음이 테두리 스타일이고 그 다음이 색상이다. solid는 점선인 dotted와 상대되는 개념으로 실선이다. 컬러는 16진수 컬러코드를 사용하는데 앞에 샤프를 붙여야된다. 헥사코드는 16진수로 6자리로 구성되지만 같은 숫자가 반복되면 하나씩 줄여서 세자리수로 표현한다. 6자리숫자는 각각 RGB의 색상코드이다. 이에 대해서는 별도의 튜토리얼이 있어야하니까. 나중에 자세히 하기로 한다. 여기까지를 보면....
마우스가 링크걸리는 영역이 확대됐고 그 영역이 테두리로 표시된다. 이제 조금만 장식하면 끝이다.
보통 링크가 있다는 표시로 글자 밑에 줄이 있고 파란색의 글자로 표시되는게 기본이다. 저걸 그대로 놔두면 보기가 안좋다. 밑줄은 마우스 오버시에만 나오게 하고 글자의 색상도 다른 예쁜 색으로 바꿔줘야한다.
#nav ul li a:link, #nav ul li a:visited {
color: #000;
text-decoration: none;
}
요상한 선택자가 등장했다. 태그에 대해서 가상의 선택자를 부여할 수 있다. 전문용어로 pseudo class selector라고 한다. a:link 는 링크가 있는 경우의 표시이고 a:visited는 방문한 링크를 표시할때 사용한다. 또한 두가지의 선택자를 동시에 타겟을 정했다. 이처럼 원하는 수만큼 쉼표를 구분자로 해서 타겟을 정할 수 있고 같은 속성과 값을 부여할때 사용한다. 색상은 검정이고 밑줄표시는 없앴다. 위처럼 두가지 선택자에 대해서 같은 속성을 줄 수도 있지만 분리해서 주는 것이 보통이다. 이외에도 마우스오버시와 클릭했을때의 모양도 장식해본다.
#nav ul li a:hover, #nav ul li a:active {
color: #F00;
text-decoration: underline;
}
hover는 마우스를 링크에 댔을때이고 active는 클릭했을때를 의미한다. 색상은 빨강이고 글자에 밑줄을 줬다.
여기서 중요한 것은 스타일시트에서는 어떤 명령이 앞에오느냐에 따라 표현되는게 달라진다. 가상의 선택자의 경우 link, visited, hover, active의 순서로 타겟을 정해 명령을 줘야한다. 만일 hover가 link나 visited보다 앞에 있다면 hover가 작동을 안한다. 절대로 이 순서에 의해 css를 작성해야한다. css는 cascading style sheet의 약자이다. cascade는 폭포를 의미한다. 폭포의 물이 떨어지는 방식으로 계단형태의 스타일시트라는 뜻이다. 순서에 의해 마지막에 정해진 css명령이 항상 우선한다. 만일 위의 상태에서 별도로 a:hover에 대해 다른 명령을 부여하면 이것이 우선적으로 적용되고 이전 것은 무시된다.
여기까지 한 것을 웹페이지에 올려보고 마우스 오버시 색상이 변하는지 밑줄이 나오는지 확인한다.
