Less 나 Sass나 어떤 단어의 약자를 의미하지는 않지만 Less는 영어의 "~보다 적다"또는 "덜하다"는 의미로 기존의 CSS 방식의 스타일시트보다 덜 코드를 사용하는데서 연유한 것으로 보입니다. 그래서 Less is More는 Less라는 프리프로세서는 더 많은 일을 할 수 있다는 의미로 사용해서 Less 관련 글들이 이런 타이틀이 있는 것 같습니다. 이 구절은 알아보니 원래 시에서 나왔다고 하네요. 그런 이후로 노래 제목으로도 사용됐습니다.
이번 글은 Less를 사용해서 실제로 웹디자인을 해보겠습니다. 많은 부분을 하지는 못하고 웹디자인에서 가장 복잡하다고 생각되는 수평 메뉴바를 만들 것인데요. 왜 복잡한가 하면 서브 메뉴도 만들고 이 서브메뉴가 3단, 4단, 여러개의 단계에서도 나타나야 하기 때문입니다. 메뉴를 만들면서 Less의 기초적인 기능인 변수(Variables)와 내포 규칙(Nested Rules)을 이용해서 만들게 됩니다.
변수(Variables)와 내포 규칙(Nested Rules)
1. 변수
Less 프리프로세서를 사용하는데 있어서 가장 기초적인 부분이 변수입니다. 이전에 알아봤듯이 변수는 CSS의 특정부분을 대체합니다.
우선 나눔고딕 웹폰트를 사용하기 위해서 다음과 같이 스타일시트 링크 위에 구글 웹폰트 스타일시트 링크를 삽입합니다.
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
less 스타일시트에 아래처럼 @import를 사용해서 직접 가져올 수도 있습니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
<header> 태그 바로 아래에 다음과 같이 내비게이션 메뉴를 만듭니다. 아주 간단한 구조이지만 앞으로 서브 메뉴도 여러 개 만들어 시험해볼 것입니다.
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">웹디자인</a></li>
<li><a href="#">포토샵</a>
<li><a href="#">제이쿼리</a></li>
<li><a href="#">HTML/CSS</a></li>
</ul>
</nav>
style.less 파일을 만들고 아래와 같이 변수를 만들어줍니다. 이름은 원하는 대로 만들고 되도록 알아보기 쉽게 만드는 것이 좋습니다. 기본 색상인 흰색을 시작으로 배경색상, 테두리 색상 등 점점 어두어지는 색상으로 해서 이름을 알기 쉽게 붙여줍니다. @Border:1px solid @borderColor;와 같이 변수에는 변수를 삽입할 수도 있습니다. 마지막의 별표는 모든 요소를 지칭하는 선택자입니다. 이것의 역할은 웹브라우저는 기본적인 마진과 패딩이 있으므로 이를 제거합니다.
@basecolor:#fff;
@bgcolor: #f2f2f2;
@colorDDD:#ddd;
@borderColor:#ccc;
@textColor:#333;
@hoverColor:blue;
@Border:1px solid @borderColor;
* {
margin:0;
padding:0;
}
태그에 대해서 기본적인 CSS를 정의합니다. 위에서 선언한 변수를 색상이 들어갈 부분에 삽입합니다.
body {
font-family: "Nanum Gothic", Arial, sans-serif;
background-color: @bgcolor;
color: @textColor;
width:960px;
margin:10px auto;
}
2. 내포 규칙(Nested Rules)
CSS에는 자손 선택자(Descendent Selector, 또는 복합선택자: Compound Selector)를 많이 사용하는데 nav ul li a 과 같이 태그 선택자를 대상으로 부모 자식 태그를 이어서 사용하면 특정 요소를 지정해서 스타일을 정해줄 수 있습니다.
nav {
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
height: 40px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
float: left;
position: relative;
}
nav ul li a {
text-decoration: none;
display: inline-block;
float: left;
line-height: 40px;
padding: 0 20px;
color: #333333;
}
nav ul li a:hover {
color: #0000ff;
color: #dddddd;
background: #333333;
}
일반 스타일시트에서는 이처럼 사용하지만 중복되는 부분이 많죠. 그래서 Less CSS에서는 부모 선택자에 포함(Nest) 시켜서 사용합니다. 방법은 부모 선택자의 중괄호 안에 자식 선택자를 입력하고 중괄호를 만들어 원하는 규칙을 선언하면 됩니다. Nav 태그 안의 ul 태그에 대해서 CSS 명령을 내리는 것이죠. 많은 코드의 스타일시트를 작성하다보면 서로 연관된 곳을 찾지 못해서 아무데나 작성하곤 하는데 그러다 보면 중복해서 선얼할 때도 있습니다. 이런 방식으로 스타일시트를 작성하면 중복되는 것도 방지하고 체계적인 스타일시트가 될 수 밖에 없습니다.
nav {
background: @basecolor;
border:@Border;
border-radius: 5px;
height:40px;
ul {
list-style:none;
}
}
list-style:none;은 <li> 태그의 불릿을 제거해줍니다. 이번에는 <li> 태그에 대해서 스타일시트를 작성합니다. <li> 태그에 display:inline;을 넣어주면 세로로 있던 메뉴가 수평으로 나타납니다.
nav {
background: @basecolor;
border:@Border;
border-radius: 5px;
height:40px;
ul {
list-style:none;
li {
display:inline;
}
}
}
Less 파일이 CSS 파일로 컴파일이 어떻게 됐는지는 확인할 필요는 없습니다. 원하는 대로 웹브라우저에 나타나는 것으로 족하죠. 어떤 명령을 내렸는데 적용이 안된다면 Less 파일에서 잘못 입력한 경우가 대부분입니다. Less를 처음 사용하면 헷갈리기 때문에 어디서 잘못됐는지 알 수가 없습니다. 그래서 컴파일했을 때 에러가 있는 경우 몇번째 줄에서 잘못됐다는 것을 알려주는 크런치(http://martian36.tistory.com/1126)를 사용하면 편리합니다.
수평형 메뉴바를 만들때는 서브 메뉴까지 감안해야하기 때문에 규칙이 있습니다. 먼저 <li>태그에 대해서 display:inline;을 선언하고 하위의 a 태그에 대해서 float:left;와 display:inline-block;을 선언합니다. text-decoration:none;은 링크의 밑줄을 제거하고 line-height:40px;은 nav 의 높이를 사용해서 텍스트가 세로로 중앙 정렬되도록합니다. 좌우 패딩을 20픽셀 적용해서 다른 텍스트와 일정한 간격이 유지되도록 합니다.
그다음으로 :hover는 텍스트에 마우스를 올렸을 때의 효과입니다. 이러한 유사 클래스 선택자는 앞에 부모요소를 대신하는 &를 사용합니다.
li {
display:inline;
a {
display: inline-block;
float:left;
text-decoration: none;
line-height:40px;
padding:0 20px;
color:@textColor;
&:hover {
color:@hoverColor;
}
}
}
여기까지 하면 1단의 메뉴는 완성입니다. 서브메뉴를 html에 추가하고 이 서브 메뉴에 대해서 추가작업을 합니다. 다음처럼 하나의 메뉴에 서브 메뉴를 만들어줍니다. 저장하고 웹브라우저에서 보면 서브 메뉴도 같이 수평으로 나타납니다.
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">웹디자인</a></li>
<li><a href="#">포토샵</a>
<li><a href="#">제이쿼리</a></li>
<li><a href="#">HTML/CSS</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</li>
</ul>
<li> 태그에 종속되도록 아래처럼 ul 태그를 입력하고 display:none;을 적용하면 서브메뉴가 나타나지 않습니다. 서브 메뉴는 메뉴바에서 벗어나서 나타나도록 해야하므로 절대위치를 적용합니다. li에 마우스를 올렸을 때 나타나도록 li에 종속되도록 &:hover ul을 입력하고 속성으로 display:block;를 입력합니다. 절대위치를 적용하면 부모요소에 상대위치를 적용해야하죠. 그래서 li에 position:relative;를 적용합니다.
절대위치를 적용한 서브메뉴가 메뉴바의 바로 아래에 나타나도록 nav의 높이인 40픽셀을 top:40px;에 적용합니다. 이제 제대로된 모습으로 보이도록 스타일합니다. 둥근모서리를 각지게 만들기 위해 border-radius:0;을 적용하고 배경색상, 태두리를 입력합니다. 이때 상단 테두리를 없애주면 메뉴바와 접하는 테두리가 없어지므로 자연스럽게 연결됩니다.
li {
display:inline;
position:relative;
a {
생략
&:hover {
color:@hoverColor;
}
}
ul {
display:none;
position:absolute;
top:40px;
border-radius:0;
background: @basecolor;
border:@Border;
border-top:none;
}
&:hover ul {
display:block;
}
}
그런데 메뉴에 마우스를 올리니 서브메뉴가 li 태그의 우측에 나타납니다. 이를 li 태그의 좌측에 정렬되도록 하려면 모든 li 태그에 대해서 float:left;를 적용합니다.
li {
display:inline;
position:relative;
float:left;
여기까지 하면 2단 서브메뉴는 잘 나타납니다. 그런데 3단, 4단의 서브메뉴를 추가하면 아래그림처럼 엉망이 됩니다. 나타나지 말아야할 3단의 서브 메뉴까지 나타나고 있습니다.
<li><a href="#">포토샵</a>
<ul>
<li><a href="#">사진효과</a></li>
<li><a href="#">필터효과</a>
<ul>
<li><a href="#">사진효과</a></li>
<li><a href="#">필터효과</a></li>
<li><a href="#">애니메이션</a></li>
<li><a href="#">글자효과</a>
<ul>
<li><a href="#">사진효과</a></li>
<li><a href="#">필터효과</a></li>
<li><a href="#">애니메이션</a></li>
<li><a href="#">글자효과</a></li>
</ul>
</li>
</ul>
</li>
최하단의 다음 코드 부분을 추가합니다. 이것은 li에 마우스를 올렸을 때 바로 아래 하위의 ul만 나타나도록 설정하는 것입니다. 그러면 위처럼 중복돼서 나타나지 않습니다.
&:hover & > ul {
display:block;
}
그런 다음 ul 안의 li, 즉 두번째 li에 대해서 설정합니다. 우선 a의 폭을 120픽셀로 하고 내부의 ul이 나타나지 않도록 한 다음 마우스를 올리면 바로 아래의 ul이 나타나도록 합니다. 이것이 3단의 서브 메뉴인데 top을 0으로 해야 메뉴 옆에 서브 메뉴가 나타납니다. left를 100%로 하면 메뉴 폭의 100%에 해당하는 만큼 우측에 배치되므로 메뉴 바로 옆에 나타납니다. 이때 첫번째 서브메뉴의 상단 테두리를 없앴으므로 모든 테두리가 나오도록 테두리를 설정합니다.
ul {
생략
li {
a {
width:120px;
}
ul {
display:none;
}
&:hover & > ul {
display:block;
top:0;
left:100%;
border:@Border;
}
}
}
&:hover & > ul {
display:block;
}
이제 마우스를 올렸을 때 배경이 짙은 회색으로, 글자는 밝은 색으로 변경해봅니다. 아래처럼 첫번째 a 태그에 대해서 글자 색상을 수정하고 배경색을 추가해주면 됩니다.
&:hover {
color:@colorDDD;
background: @textColor;
}
less1.zip
