html 네비게이션바
-
flex를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 23. 14:03
flex를 이용한 네비를 만들어보겠습니다. 완성된 소스코드부터 보여드리겠습니다. LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 *{ color:#000; text-decoration: none; box-sizing: border-box; } .header{ width: 100%; height:100%; } .section{ width: 1720px; height: 100px; border: 1px solid; margin: 0 auto; position: relative; display:flex; justify-content: space-between; } .logo{ font-size:36px; flex: 1; padding: 0 0 0 30px; line-height: 2..
-
float를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 21. 18:11
float를 이용한 navigation bar 만들기 LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 css 코드 *{ box-sizing: border-box; text-decoration: none; color: #000; } .header{ position: relative; width: 100%; height: 100%; } .header .section{ width: 1720px; border: 1px solid; height:100px; margin: 0 auto; } .header .logo{ float: left; width: 6%; font-size: 36px; height:100%; margin-left: 30px; line-height: 2.7; } .hea..
-
inline-block를 이용한 네비만드는법웹사이트/HTML & CSS 2021. 7. 19. 12:55
css를 이용하여 수평 nivigation bar를 만들어 보도록 하겠습니다. 3가지 방법으로 보여드리겠습니다. 1. inline-block을 이용한 navigation 2. float를 이용한 navigation 3. flex를 이용한 navigation 모양은 아래의 이미지대로 만들겠습니다. 로고 폰트 크기는 36px 메뉴 폰트 크기는 16px 로그인 회원가입 크기는 14px입니다. 아래 사진은 inline-block을 이용해서 css navigation bar를 만들었습니다. inline-block으로 하는 방법에 대해서 알아보겠습니다. 먼저 html 코드입니다. LOGO menu 1 menu 2 menu 3 menu 4 로그인 회원가입 css 소스코드입니다. *{ color:#000; box-si..