CSS _ 왼쪽 세로 메뉴 만들기 ,o1 숫자 없애기, a 스타일 적용

2021. 7. 20. 16:39HTML_CSS

ol로 메뉴를 만들 것입니다. ol은 숫자가 있는 리스트 이죠. 앞에 나오는 이런 숫자들을 list-style-type: none;로 없애 줬습니다.

그리고 li에 메뉴 이름을 넣어주고 스타일을 적용하는데 Ending에만 따로 class를 만들어 적용했습니다.  처음엔 class가 아닌 

nav ol li {

 border-bottom: 2px solid gray; 

}

를 설정했는데 이러면 전체 설정이 되어서 그냥 calss로 따로 했지요.

왜냐면 Ending bottom 쪽에 테두리를 만들면 div테두리와 겹치기 때문이죠. text-aling center로 text를 정렬합니다.

border bottom으로 하면  왼쪽 끝까지 테두리가 채워지지 않는 걸 확인합니다. 아무래도 li 영역에서의 border이라 그런가 봅니다. 

ol영역의 padding-left를 0px로 하니 border이 끝까지 채워졌습니다. 

해당 메뉴를 클릭했을 때 그 제목과 일치하는 내용으로 가기 위해 <a href="#">를 사용합니다. 그곳엔 넘어갈 url이나 id를 넣어 기입했습니다. 

그리고 a 특유의 스타일 밑줄에 파란색을 없애기 위해 text-decoration: none; 로 밑줄을 없애고 color로 글자색을 바꿉니다.