| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> header { /* fixed */ position: fixed; top: 0; left: 0; /* size */ width: 100%; height: 4rem; /* layout */ display: flex; justify-content: space-between; /* design */ border-bottom: 1px solid #ddd; } .container { display: flex; align-items: center; } .logo { margin: 0; margin-left: 1rem; } .btn { /* size */ height: 100%; padding: 0 1rem; /* design */ background-color: #000; color: #fff; border: none; font-size: 2rem; } .link { display: flex; align-items: center; padding: 0 1rem; color: #000; } </style> <header> <div class="container"> <button class="btn">☰</button> <h3 class="logo">COMPANY</h3> </div> <a href="#" class="link">Accounts</a> </header> </body> </html> |
header을 만들어서 전체적인 틀을 만들어주었다. position: fixed를 설정해서 움직이지 않게 고정해주었다. top과 left를 0으로 설정해 왼쪽 위에 붙여주었다. 그리고 넓이를 최대한 활용할수있게 width:100%를 해주었다. height:4rem 으로 높이 설정을 해주었다. 그리고 display:flex를 해서 자식들을 자유롭게 조정할수있게했다. 그리고 자식 컨텐츠들을 justify-content:space-between을 설정해서 일정한 가운데 공백을두고 정렬해주었다. 그리고 테두리를 만들어주었다. container 클래스를 만들어서 해당 요소의 자식 컨텐츠를 가운로 이동시켰다. logo 클래스를 만들어서 해당 컨텐츠의 요소의 margin과 margin-left를 설정해주었다. btn 클래스는 버튼을 설정해주는데 사용하였다. border:none으로 설정해서 테두리를 사라지게했다. align-item:center 로 텍스트를 가운데로 정렬해주었고 정렬해주기 위해서 display:flex로 설정해주었다. |
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> .side-bar { /* border: 1px dashed; */ width: 16rem; height: 100%; position: fixed; top: 0; left: 0; /* design */ background-color: #333; color: #fff; } .logo { padding: 1rem; } ul { list-style: none; padding: 0; margin: 0; } .link { display: block; padding: 1rem; color: #fff; } .link:hover { background-color: #222; } main { margin-left: 16rem; padding: 0 1rem; } </style> <nav class="side-bar"> <h1 class="logo">LOGO</h1> <ul> <li> <a href="#" class="link">Link</a> </li> <li> <a href="#" class="link">Link</a> </li> <li> <a href="#" class="link">Link</a> </li> </ul> </nav> <main> <h1>Side Bar</h1> <p>..</p> </main> </body> </html> |
사이드 바를 만들어보았다. side-bar 클래스를 보자 테두리를 만들어주었다. 넓이를 16rem 높이는 최대치 position 는 fixed로 고정된 위치를 주었다. top: 0과 left:0 으로 설정해서 맨위 맨 왼쪽으로 위치를 지정해주었다. 그리고 hover을 사용해서 link에 커서 접속시 배경색이 바뀐다. |
'(혼) (공) (web)' 카테고리의 다른 글
| CSS 복습(12일차) (0) | 2024.02.28 |
|---|---|
| CSS복습 (11일차) (0) | 2024.02.26 |
| CSS 네비바 안에 드롭다운 (0) | 2024.02.24 |
| CSS 네비게이션 바 (수직 수평) (0) | 2024.02.23 |
| CSS(display속성 ,position속성) 정리 (0) | 2024.02.23 |