티스토리 뷰
제이쿼리도 자바스크립트도 아직 버거워서, CSS정도만 사용해서 사이드메뉴를 만들고 싶어 구글링으로 야매하게 만들었다.
여러 블로그에서 코드를 소개하고 있어서 감사의 말씀 남깁니다.
<!DOCTYPE html>
<html>
<!--CSS 추가-->
<link href="사이드메뉴.css" rel="stylesheet" type="text/css" />
<div id="wrapper">
<div class="topbar" style="position: absolute; top:0;">
<!--왼쪽 메뉴-->
<div class="left side-menu">
<div class="sidebar-inner">
<div id="sidebar-menu">
<ul>
<li class="has_sub"><a href="javascript:void(0);" class="waves-effect">
<i class="fas fa-bars"></i>
</a></li>
</ul>
</div>
</div>
</div>
<!--왼쪽 서브 메뉴-->
<div class="left_sub_menu">
<div class="sub_menu">
<input type="search" name="SEARCH" placeholder="검색">
<h2>메뉴</h2>
<ul class="big_menu">
<li>MENU 1 <i class="arrow fas fa-angle-right"></i></li>
<ul class="small_menu">
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="#">소메뉴 2</a></li>
<li><a href="">소메뉴 3</a></li>
<li><a href="#">소메뉴 4</a></li>
</ul>
</ul>
<ul class="big_menu">
<li>MENU 2<i class="arrow fas fa-angle-right"></i></li>
<ul class="small_menu">
<li><a href="https://www.google.co.kr/">구글</a></li>
<li><a href="#">작은메뉴 2</a></li>
</ul>
</ul>
<ul class="big_menu">
<li>MENU 3</li>
</ul>
</li>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</html>참고 : [html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 (tistory.com)
[html/css] 대시보드 좌측 사이드 메뉴 기본 포멧
TITLE MENU 1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 MENU 2 소메뉴2-1 소메뉴2-2 MYPAGE .side-menu { top: 50px; width: 45px; z-index: 10; background: #ff5858; border-right: 1px solid rgba(0, 0, 0, 0.07); bottom: 50px; height: 100%; margin-
nh0404.tistory.com
HTML/CSS 코드는 이 블로거님의 코드를 대체로 사용했다.
여기서 CSS를 불러오도록 하는 코드는 추가한 것이고 스크립트를 사용하는 부분은 삭제하였다.
목표는 블로거님이 제시한 사이드메뉴가 아닌 화면에 고정되어있는 메뉴이다.
여기서 <a href>에 네이버와 구글의 주소를 추가하였으며, 제대로 동작하고 있음도 확인했다.
/* 메뉴 왼쪽 테두리 */
.side-menu{
top: 50px;
width: 40px;
z-index: 10;
background: rgba(155, 20, 144, 0.692);
border-right: 1px solid rgba(0, 0, 0, 0.07);
bottom: 50px;
height: 100%;
margin-bottom: -70px;
margin-top: 0px;
padding-bottom: 70px;
position: fixed;
box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0 rgb(0 0 0 / 2%);
}
/* 검색창 */
input[type="search"] {
width : 180px;
margin: 0 auto;
margin-left: 9px;
border: 2px solid #797979;
font-size: 14px;
margin-top: 10px;
padding: 4px 0 4px 14px;
border-radius: 50px;
}
/* 메뉴 창 바탕색 및 폭 */
.left_sub_menu {
position: fixed;
top: 50px;
width : 200px;
z-index: 10;
left: 45px;
background: white;
border-right: 1px solid rgba(0, 0, 0, 0.07);
bottom: 50px;
height: 100%;
margin-bottom: -70px;
margin-top: 0px;
padding-bottom: 0px;
box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%);
color: black;
}
/* 검색창 위 폭 */
.sub_menu {
margin-top: 50px;
}
/* 메뉴 문단 나눔 줄 */
.left_sub_menu>.sub_menu li {
color: #333;
font-size: 17px;
font-weight: 600;
padding: 20px 0px 8px 14px;
border-bottom: 1px solid #e1e1e1;
}
/* 메뉴 글자 및 하단 바 */
.sub_menu>h2 {
padding-bottom: 4px;
border-bottom: 3px solid #797979;
margin-top: 30px;
font-size: 21px;
font-weight: 600;
color: #333;
margin-left: 10px;
margin-right: 10px;
font-family: 'Courier New', Courier, monospace;
line-height: 35px;
}
/* MENU1, MENU2, 소메뉴, 작은메뉴 글자 폰트 및 폭 */
.sub_menu>.big_menu>.small_menu li {
color: #333;
font-size: 14px;
font-weight: 600;
border-bottom: 0px soild #e1e1e1;
margin-left: 14px;
padding-top: 8px;
}
.big_menu {
cursor: pointer;
}
/* 메뉴 왼쪽 정렬 */
/* 이걸 빼면 계단식으로 배열. 점차 오른쪽으로 계단을 형성 */
ul {
padding-inline-start: 0px;
}
/* 메뉴 글자 */
a {
color: #797979;
text-decoration: none;
background-color: transparent;
}
/* 메뉴 옆 o 제거 */
ul {
list-style: none;
}
ol,
ul {
margin-top: 0;
margin-bottom: 10px;
}
.has_sub {
width: 100%;
}
/* 사이트 배경 색*/
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}CSS를 지우고 수정하는 과정에서 의외로 '글자'와 '배경'을 따로 입력하고 있음을 알게 되었다.
쉽게 말하면 노트에 글을 쓰면 이걸 반으로 접는다 글자들이 왼쪽이나 오른쪽으로 정렬되지 않지 않은가?
마찬가지였다.
일일히 타이핑해서 그 위치로 정렬해줘야하는 작업이 필요했던 것이다.
또한 색을 표현하는 것에도
black
#779977
rgba
3가지가 있는 것도 파악했다.
우리가 흔히 색 하면 navy, pink, gold, bronze와 같이 특정 단어로 지정하는 것과
RGB 값이라고 해서 #000000부터 #FFFFFF까지 지정하는 것과
아예 rgb로 지정해서 rgb(0,0,0 /0%) 하기도 하고
rgba 값이라고 해서 위와 같지만 투명도 부분이 추가되어 이를 조절하는 것이 있었다.
RGB까진 게임에서 진득하게 사용해서 이미 간파한 부분이지만 rgba는 이번에 CSS 코딩을 손으로 쳐가면서 알게 되었다.
rgba 은근 맘에든다.
사실 작업은 어제 손으로 일일히 쳐가면서 다 했는데 중간에 검수하려는 과정에서 식사시간이 되어서 흐지부지하게 대강 검수하느니 다음날 하기로 작정하고 넘겼었다.
넘기길 잘한거 같다.
시간 여유가 생기니 CSS 코드들이 어떤 역할을 해서 화면에 표시되는지 눈으로 짚을 수 있었다.
* ul > 언오더드 리스트(Unordered list)
>> 순서 적용이 필요 없는 경우 사용.
* li > 리스트 아이템 (List Item)
<ul>
<li>바나나과자</li>
<li>초코과자</li>
<li>감자과자</li>
</ul>* ol > 오더드 리스트(Ordered list)
>> 순서 적용이 필수인 경우 사용.
<ol>
<li>물을 냄비에 넣는다.</li>
<li>물이 끓으면 스프와 라면을 넣는다.</li>
<li>3분간 끓인다.</li>
</ol>라면을 끓일때 갑자기 3분간 끓인다는게 먼저 나오면 당연 설명이 안되겠죠.
물은 1인분을 먹는다고 가정하면 2분내에는 필연적으로 끓어오를텐데요.
*dl > 디스크립션 리스트
>> dd, dt와 같이 사용됨.
>> dt는 코드를 짤 때 tab 키를 한 번 친것 같은 효과를 줌.
<dl>
<dt>테란 배럭</dd>
<dd>테란 마린</dt>
<dd>테란 파이어벳</dt>
<dd>테란 고스트</dt>
<dd>테란 메딕</dt>
<dt>테란 팩토리</dd>
</dl>이 경우
테란 배럭
테란 마린
테란 파이어벳
테란 고스트
테란 메딕
테란 팩토리
이렇게 출력됩니다.
'코딩 공부 > HTML,CSS' 카테고리의 다른 글
| 검색 창 만들기 씨름.. [HTML/CSS] (0) | 2023.03.17 |
|---|---|
| 버튼, 새 창 열기, 입력 필드 [HTML/CSS] (0) | 2023.03.16 |
| HTML 연습 (0) | 2023.03.15 |