보통 ul과 li태그는 홈페이지 메뉴 혹은 연속되는 콘텐츠들을 작성 및 나열할때 자주 사용되는 태그입니다.
물론, ul과 li를 굳이 사용하지 않고, div 혹은 span, p 등을 통해서도 연속되는 콘텐츠와 메뉴들을 작성할 수는 있습니다만
아무래도, 코드가 조금 지저분해진다는 점이 있고, css 작성의 약간의 번거로움이 추가되기 때문에 ul과 li 조합이 가장 좋다고 볼 수있습니다.
이번 포스트에서는 ul과 li를 어떤식으로 활용해야되는지, 여러 예제를 통해서 한번 알아보도록 하겠습니다. 첫번째로는 메뉴 작성입니다.
ul과 li로, 간단한 가로 메뉴 만들어보기
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
예제 코드를 작성하게 되면, 위 이미지와 동일한 결과를 얻게 됩니다. 이 부분에서 추가로 해야할 작업은, 메뉴1~4를 가로로 배치해야하고, 좌측에 있는 점을 제거해야하며, 각 메뉴마다 색상 및 일정 여백을 줘야된다는 부분이겠네요.
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
<style>
li {
list-style:none;
------------>> 리스트 스타일 논 값은 li 좌측에 있는 점을 제거하는 css 속성입니다.
}
ul {
margin:0 auto;
------>> 와이드 값 및 마진 0 auto 는 홈페이지의 중앙으로 정렬해주는 마법같은 효과라고 보시면 되겠습니다.
width:1200px;
display:flex;
----------->> 디스플레이 플렉스 속성은 각 태그마다 가로로 배치해주는 마법같은 속성이라고 보시면 되겠습니다. (디스플레이 플렉스는 가로열 뿐만아니라 세로열로도 배치할 수있습니다.)
}
ul > li {
text-align:center;
--------->> li 내에 있는 문자를 가운데 정렬시키는 속성입니다.
width:25%;
------------>>>>>>>> 각 li 값마다 와이드 25%의 값을 주었습니다. 부모요소인 ul이 1200px이기 때문에, 각 li마다 300px 넓이의 간격을 가집니다. (와이드 값 주셔도 되고, 아니면 패딩 값을 줘서 간격을 벌리시면 됩니다. 만약 패딩값으로 넣는 경우라면, padding:0 20px << 20px부분을 조절해서 적절한 값을 넣으시면 됩니다.)
color:#fff;
----------------->>> 글자색을 흰색으로 주는 속성입니다.
line-height:40px;
----------->> 상하 길이를 40px로 값을 주었습니다. (라인헤이트 값으로, li의 세로 중앙렬을 맞추기 위해서는 헤더 값 높이와 동일한 값을 주시면 되겠습니다. 예를들어 헤더 높이가 80px라면, 라인 헤이트에 80px를 주면 세로 중앙정렬이 됩니다.)
}
ul > li:nth-child(1){
background:red;
--------->> li 첫번째에 배경 레드값을 주었습니다.
}
ul > li:nth-child(2){
background:blue;
--------->> li 첫번째에 배경 블루값을 주었습니다.
}
ul > li:nth-child(3){
background:green;
--------->> li 첫번째에 배경 그린값을 주었습니다.
}
ul > li:nth-child(4){
color:#333;
--------->> li 첫번째에 배경 옐로우 및 색상값을 주었습니다.
background:yellow;
}
</style>위 HTML 코드에서 CSS만 추가하였습니다. 추가한 뒤, 출력 결과는 다음과 같습니다.
그럴싸하게 웹사이트의 메뉴처럼 보입니다. 여기서, 진짜 메뉴로 만들려고 한다면, CSS의 hover속성 혹은, 제이쿼리 혹은 자바스크립트를 추가로 작업을 해줘야하니, 이는 추후 포스트에서 다루도록 하겠습니다.
위에서 작성한 ul li 안에 a링크 태그 삽입해보기
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
</ul>
li 안에 a링크를 삽입하게 되면 위와 같이 출력이 됩니다. 보시면, 각 글자마다 링크가 걸려있다는 것을 알 수있습니다.
그런데, 여기서 또 개선해야할 부분이 생겼죠. 바로, a링크 태그의 스타일을 변경해주는 것입니다. 일반적으로는 총 두 가지의 css 속성을 사용하는 편입니다.
<style>
ul > li > a {
color:#fff; ----->> 링크 색상을 흰색으로 변경하겠다라는 속성입니다.
text-decoration:none; ----->> 밑줄을 제거하겠다라는 속성입니다.
}
</style>
그럼 모든 a 링크 태그의 색상이 흰색으로 변경되었고, 밑줄이 제거된 것을 확인할 수있습니다. 보통은 a링크 태그의 css 초기화 값 경우는 reset.css (리셋 css) 파일에다가 넣어주는 편입니다.
a {
text-decoration :none;
color : inherit; ----->> 다음에 작성될, a링크 css 속성의 색상값을 상속받겠다 라는 속성입니다. (그 색상을 사용하겠다.)
}보통 저는 위 코드 처럼 넣어주는 편입니다. 끝 !
