[CSS] 기초 시작하기
- 카테고리 없음
- 2020. 11. 10.
앞서서 먼저 jsp를 배우다보니 확장명은 jsp로 만들었습니다.
또한 지금은 만드는 과정 중간부분이므로 html 문구는 100% 작성 형태는 아닙니다.
JSP(HTML)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Insert title here</title>
<script src="https://kit.fontawesome.com/45fba14eff.js"
crossorigin="anonymous"></script>
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap"
rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<i class="fab fa-accusoft"></i> <a href="">DreamCoding</a>
</div>
<ul class="navbar_menu">
<li><a href="">Home</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Weddings</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Bookings</a></li>
</ul>
<ul class="navbar_icons">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
</ul>
<a href="#" class="navbar_toogleBtn"><i class="fas fa-bars"></i></a>
</nav>
</body>
</html>가장 간단하게 nav로 영역을 지정하였습니다.
메뉴를 만들고, 로고와 리스트를 만드는 과정입니다.
평상시처럼 nav와 ul, li를 통해 만듭니다.
테그 <ul><li>는 순서 없는 리스트를 만들 때 주로 사용합니다.
여기서 css 로고에 관한 Tip을 드린다면,
<script src="https://kit.fontawesome.com/45fba14eff.js"
crossorigin="anonymous"></script>이 사이트에 가입후 인증을 받게 된다면, 간단하게 스크립트에 링크 하나 주므로써 로고를 자유롭게 사용 할 수 있게 됩니다. 로고의 작업이 간편화 됩니다.
저는 여기 사이트에서 사용하는 이미지 파일을 사용하므로 <i> 테그는 이 js파일에서 불러온 사이트 입니다.
CSS - style.css
/* CSS도 변수를 만들 수 있다. */
:root {
--text-color: #f0f4f5;
--background-color: #263343;
--accent-color: #d49466;
}
/*body 양 부분의 여백을 없앤다. */
body {
margin: 0;
font-family: 'Source Sans Pro';
}
/* a 링크의 특징인 밑줄 제거, a링크의 텍스트는 하얀색으로 */
a {
text-decoration: none;
color: var(--text-color);
}
.navbar {
/*navbar 클래스이름을 가진 테그는 flex 형식으로 정렬*/
display: flex;
/*justify-content: space-between = 플랙스 요소는 요소들 사이에만 여유 공간을 두고 배치*/
justify-content: space-between;
/*가운데 정렬*/
align-items: center;
background-color: #263343;
/* 안쪽 여백 좌, 우 길이 지정*/
padding: 8px 12px;
}
.navbar_logo {
font-size: 24px;
color: white;
}
.navbar_logo i {
color: #d49466;
}
.navbar_menu {
display: flex;
/* li 특징인 네모박스 스타일 제거 */
list-style: none;
/* navbar_menu의 왼쪽 여백을 지워서 가운데 정렬 */
padding-left: 0;
}
.navbar_menu li {
/* 리스트끼리 왼쪽여백 8, 오른쪽 여백 12 */
padding: 8px 12px;
}
/* 마우스 올렸을 때 변형되는 css*/
.navbar_menu li:hover {
/* 배경색 변경 */
background-color: #d49466;
/*기본은 직각이므로, 테두리를 둥근모양으로 만든다. */
border-radius: 4px;
}
.navbar_icons {
list-style: none;
color: white;
display: flex;
padding-left: 0;
}
.navbar_icons li {
padding: 8px 12px;
}
/* 영역에 고정되어있지 않고, 무조건 최상단 오른쪽에 정렬해야 한다. 그러므로 position 사용한다.*/
.navbar_toogleBtn {
/*화면이 작아졌을 때만 햄버거 버튼을 만들어야하므로, none을 지정한다.*/
display: none;
position: absolute;
/* 오른쪽 정렬, 여백 32px */
right: 32px;
font-size: 24px;
color: #d49466;
position: absolute;
}
/*길이가 낮아졌을 경우에, 반응형을 적용하기 위해 screen-max가 지정이 되었다.*/
@media screen and (max-width:768px) {
.navbar {
/* 크기가 작아졌을 경우 컬럼형식으로 정렬이 된다. */
flex-direction: column;
align-items: flex-start;
/* 너무 화면에 꽉차 있으므로 padding으로 여유 공간을 제공 */
padding: 8px 24px;
}
.navbar_menu {
/* 햄버거 버튼 눌렀을 때만 나타나게 해야하므로 기본 상태는 안 보이게 설정한다. */
display: none;
/* 크기가 작아졌을 경우 컬럼형식으로 정렬이 된다. */
flex-direction: column;
align-items: center;
width: 100%;
flex-direction: column;
}
/* 마우스 올렸을 때 하이라이트를 늘리기 위해서 list 의 길이를 100% 늘렸다.*/
/* 그러나 다시 list가 100%가 되었으므로 자동으로 왼쪽정렬이 된다. 그러므로 가운데 정렬을 다시 한다. */
.navbar_menu li {
width: 100%;
text-align: center;
}
.navbar_icons {
/* 햄버거 버튼 눌렀을 때만 나타나게 해야하므로 기본 상태는 안 보이게 설정한다. */
display: none;
justify-content: center;
width: 100%;
}
/* 기본크기에서 안보이다가 보이게 해야하므로 block을 지정해서 보이게 한다. */
.navbar_toogleBtn {
display: block;
}
.navbar_menu.active, .navbar_icons.active {
display: flex;
}
}
JavaScript - main.js
/*getElementById방식과 비슷하다. 그러나 선택하는 것은 더 구체적이고 한정적이다.*/
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
/* 토글 버튼이 클릭 했을 때, 전달하는 매개체다. */
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});결과
기본 페이지 모습
사이즈가 작아졌을 때, nav의 모습이 변형된다. 메뉴가 자동으로 가려진다. (반응형)
햄버거 버튼을 눌렀을 때, 메뉴가 생긴다.
반응형