위 그림처럼 웹 사이트에 두 개 이상의 메뉴바를 만들기 위해선 두 가지 조건을 만족시켜야 한다.
- li 태그로 만들어진 메뉴 1, 메뉴 2.. 등을 가로로 정렬시켜야 함
- 두 번째 메뉴바는 화면의 아래 칸으로 넘어가서 생성돼야 함
이때 css의 float: left와 overflow: hidden 속성이 사용된다.
순서대로 살펴보자. 우선 ul 태그 안에 li 태그를 통해 메뉴 1~5를 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="first">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</body>
</html>
이런 화면이 나타난다. 본래 li 태그는 값이 아래로 이어지게 돼 있다. 메뉴를 오른쪽으로 줄지어야 한다. float: left는 속성이 주어진 태그의 값를 왼쪽으로 정렬한 후 오른쪽 빈 공간에 그다음으로 이어지는 태그 값이 나타나게 한다.
head 태그 사이에 이처럼 코딩해 준다.
<style>
ul li{
float: left;
display: block;
padding: 10px 20px;
border: 1px solid black;
}
</style>
최소한의 틀을 갖추기 위해 padding과 border 값을 줬다. display: block은 리스트마다 붙어있던 점을 없앤다.
이제 메뉴바를 추가하기 위해 또 하나의 ul, li 태그를 만든다.
<body>
<ul id="first">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
<ul id="second">
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
<li>메뉴D</li>
<li>메뉴E</li>
</ul>
</body>이렇게만 추가하면 어떻게 될까. 또 다른 ul 태그를 만들었더라도 float: left의 영향력은 유지된다. 때문에 두 번째 li도 연이어 붙는다.
두 번째 ul 태그부터는 float: left의 영향에서 벗어나도록 해야 한다.
이를 위해 id가 first인 ul 태그에 overflow: hidden 속성을 부여해 준다. 이는 id가 first인 영역에만 float: left를 주겠다는 의미가 된다.
<style>
#first{
overflow: hidden;
}
ul li{
float: left;
display: block;
padding: 10px 20px;
border: 1px solid black;
}
</style>
최종 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#first{
overflow: hidden;
}
ul li{
float: left;
display: block;
padding: 10px 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul id="first">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
<ul id="second">
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
<li>메뉴D</li>
<li>메뉴E</li>
</ul>
</body>
</html>
반응형
'WEB' 카테고리의 다른 글
| [JavaScript] 원하는 HTML 요소(Element) 찾아가는 방법 (0) | 2021.06.29 |
|---|---|
| [JavaScript] 카카오 우편번호 API 간단하게 적용하기 (0) | 2021.06.28 |
| [JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리? (2) | 2021.06.26 |
| [HTML] 입력 받는 <form> | Scanner와 작별 (0) | 2021.06.22 |
| [HTML] 절대경로 | 상대경로 차이는? (0) | 2021.06.21 |