나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기
반응형
안녕하세요
간단한 html, css를 이용한 menubar를 만들어 보려 합니다
기본적으로 display : flex; 가 들어가는 방식입니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 메뉴바 만들기 -->
<nav class="menubar">
<div class="menu_logo">안녕하세요1</div>
<div class="menu_menu">안녕하세요2</div>
<div class="menu_etc">안녕하세요3</div>
</nav>
</body>
</html>
위와 같이 큰 menubar 라는 박스안에 3개의 div 가 안에 있습니다 (menu_logo, menu_menu, menu_etc)
/* 바디 속성 지정 */
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* menubar 속성 */
.menubar {
background-color: lightgreen;
font-size: 30px;
display: flex; /* 3개의 박스를 담는 가장 큰 박스에 flex*/
justify-content: space-between; /* justify-content 속성으로 3개를 동일한 간격 */
align-items: center; /* 이 개념은 박스에 수직으로 중앙값을 자동으로 찾기 */
}
이제 display, justify-content, align-items 의 css 값만 살짝 건드려 주면 이렇게 배치가 됩니다
- display : flex
- justify-content : space-between
- align-items : center
위의 세가지 옵션을 사용하면 자동으로 div박스가 배치됩니다
이제 예제는 끝났고 진짜 메뉴와 같이 만들어보면!!
화이트 & 블랙 톤으로 깔끔하고 간단한 메뉴를 만들어 보았습니다
menu에 a 링크의 text-decoration 기능으로 마우스가 올려졌을 때 밑줄이 그어지는 기능까지 추가하였습니다
위 의말은 hover 효과라고하는데, 마우스가 올려졌을 시 효과를 주는 방법입니다
사용해보시고 싶으신 분들을 위해 밑에 간단하게 소개해드리도록 하겠습니다
/* CSS 마우스 오버 효과 */
a:hover {
text-decoration : underline; /* 밑줄 기능*/
opacity : .5; /* 투명도를 주는 기능 */
color : gray; /* 글자의 색을 변경하는 기능 */
}
이 외에도 다양한 기능들이 많습니다
다음에 더 자세히 다루어보면 좋을것 같습니다, 감사합니다
혼자 코딩을 하다 보니 혹시 더 좋은 방법 또는 궁금하신 사항이 있으시면 댓글 남겨주세요
같이 열심히 공부하면 좋겠습니다
반응형
'웹코딩 공부&공유 > css' 카테고리의 다른 글
| [html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째 (1) | 2020.12.23 |
|---|---|
| (공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라? (0) | 2020.12.23 |
댓글