-
CSS를 이용 상단 메뉴바Coding 2022. 5. 26. 16:41
방향성
블로그 상단을 살펴보면 메인이나 특정 카테고리로 이동하는 메뉴바가 있다. 이를 기본적으로 지원해 화면 설정 > 메뉴에서 편집할 수 잇고 그 모양을 다르게 꾸밀수는 없다.
CSS를 활용해 메뉴바를 편집해보고자한다.
예제
메뉴 리스트 만들어보기
먼저 어떤 것들을 메뉴로 만들지 구상한다. 구상 목적상 메뉴1~5로 정하고 <ul>과 <il>태그를 활용한다.
ul은 순서가 없는 블릿 리스트고 il은 ul 아래의 항목들을 의미한다.
<div> <ul> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> <li>메뉴 5</li> </ul> </div>
이같이 작성하면 출력은
이렇게 출력된다.
메뉴모양 만들기
한줄에 리스트가 보이도록하며 옆에 동그라미를 없애본다. 이를 위해 ul 아래에 스타일로 list-style-type:none을 추가하고, il 아래에 display:inline라는 스타일을 추가한다.
<div> <ul style="list-style-type:none"> <li style="display:inline">메뉴 1</li> <li style="display:inline">메뉴 2</li> <li style="display:inline">메뉴 3</li> <li style="display:inline">메뉴 4</li> <li style="display:inline">메뉴 5</li> </ul> </div>
이렇게 나온다. 그렇지만 스타일시트로 다시 작성을 해보면,
<style> ul {list-style-type:none;} ul li {display:inline;} </style> <div> <ul> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> <li>메뉴 5</li> </ul> </div>
동일한 결과가 나온다.
메뉴 사이에 선을 넣어보기
스타일을 따로 때어냈기 때문에 스타일시트 부분만 편집을 진행하면 된다. 각각의 메뉴 사이에 구분선을 넣으려면, il의 좌측편에 선을 만들어준 후, 첫 번째에 위치하는 메뉴 부분의 테두리만 제거해주면 된다. 이는 border-left스타일을 이용하여 만든다.
<style> ul {list-style-type:none;} ul li {display:inline; /* li요소의 좌측 1px의 테두리 만들기 */ border-left: 1px solid #c0c0c0; } li:first-child { /* li의 첫번째 요소 좌측에는 테두리 없애기 */ border-left: none; } </style> <div> <ul> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> <li>메뉴 5</li> </ul> </div>
<style> ul {list-style-type:none;} ul li {display:inline; /* li요소에 1px의 테두리 만들기 */ border-left: 1px solid #c0c0c0; } </style> <div> <ul> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> <li>메뉴 5</li> </ul> </div>
li뒤의 first-child는 ul아래에 위치하는 li요소들 중 첫번째 요소에만 다음의 스타일을 적용한다는 의미다.
메뉴 사이 여백 / 위치 / 간격 편집
만들어진 파일을 살펴보면 메뉴가 좌측과 이유없이 떨어져 있다. 이 좌측 여백을 padding-left라는 스타일 값으로 없앤다. 값에 ul에 0으로 주고 메뉴의 위치는 float라는 스타일을 이용해 좌측이나 우측정렬을 할 수 있는데 margin과 padding이라는 스타일을 li에 이용해 메뉴간의 간격을 조절할 수 있다.
padding값은 기준으로부터의 내부 간격, margin은 기준으로부터 외부 간격이다.
<style> ul {list-style-type:none; /* 좌측 여백 없애기 */ padding-left:0px; /* 우측 정렬 하기 */ float:right; } ul li {display:inline; /* li요소의 좌측 1px의 테두리 만들기 */ border-left: 1px solid #c0c0c0; /* 테두리와 메뉴 간격 벌리기, padding: 위 오른쪽 아래 왼쪽; */ padding: 0px 10px 0px 10px; /* 메뉴와 테두리 사이 간격 벌리기, margin: 위 오른쪽 아래 왼쪽; */ margin: 5px 0px 5px 0px; } ul li:first-child { /* li의 첫번째 요소 좌측에는 테두리 없애기 */ border-left: none; } </style> <div> <ul> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li> <li>메뉴 4</li> <li>메뉴 5</li> </ul> </div>
'Coding' 카테고리의 다른 글
블로그 웹페이지에 F12 컨트롤 하기 (0) 2022.05.29 DCOTYPE와 HTML5에 대해서 (0) 2022.05.29 메타 태그 META TAG 속성들에는 어떤것이 있을까 (0) 2022.05.28 BOOL 알아보기 (0) 2022.05.26 HTML 수정하기전 기본숙지사항 (0) 2022.05.26 .js파일 확장명 열어보기 (0) 2022.05.25 <?xml version="1.0" encoding="UTF-8" ?> 의 의미 (0) 2022.02.12 Meta Tag , og는 뭔가 (0) 2022.02.10