End - HTML + CSS

프론트엔드 HTML + CSS 실습

2021.07.19 ~ 2021.07.26

HTML + CSS 서론, 링크

추후에, 내가 만들 포트폴리오 사이트를 생각하면서 강의 영상의 사이트를 따라 만들기로 하였다.

아래는 도움을 받은 강의와 사이트이다.

드림코딩 엘리님의 웹사이트 따라만들기 반응형 헤더편 -
https://www.youtube.com/watch?v=X91jsJyZofw

디자이너 아이콘 참조 - https://fontawesome.com/
구글 폰트 사이트 - https://fonts.google.com/

반응형 헤더 만들기, 포트폴리오 상단 Nav bar 만들기

(1) : 사이트 구상

가장 중요한 박스를 나누어서 생각했다. 크게 봐서 상단의 nav와 본문의 section으로 나누었는데, 강의영상에서와 마찬가지로 nav만 구현한다.

nav를 구현할 때 세가지로 나누어서 생각했다.
1. 페이지의 로고와 이름이 들어가도록 하는 로고 박스
2. 페이지의 메뉴를 소개하는 메뉴 박스
3. 나의 페이스북, 인스타그램, 깃허브와 같이 다른 링크로 이동시켜주는 링크 박스

다음으로 생각한 것은 반응형 웹사이트를 만드는 것이다.

태블릿과 모바일 환경을 고려하여 사이트의 크기가 768px 이하로 된다면, 기존의 메뉴 박스와 링크 박스가 row 형태가 아닌 column 형태로 밑으로 내려오게 되는 형태를 구상한다. 이때 사용하는 기술은 Media Queries이다.

추가로, 데스크탑 환경에서는 메뉴 박스와 로고 박스가 상시 보이게 설정하지만 태블릿과 모바일 환경에서는 우측 상단의 버튼을 클릭하면 메뉴 박스와 로고 박스가 펼쳐지도록 설정한다.

(2) : HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>JaeYun Coding</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/1f943b0307.js" crossorigin="anonymous"></script>
    <script src="main.js" defer></script>
</head>

<body>
    <nav class="navbar">
        <div class="navbar_logo">
            <i class="fab fa-artstation"></i>
            <a href="">JaeYun Coding</a>
        </div>

        <ul class="navbar_menu">
                <li><a href="">Home</a></li>
                <li><a href="">Codes</a></li>
                <li><a href="">Awards</a></li>
                <li><a href="">Dreams</a></li>
                <li><a href="">FAQ</a></li>
        </ul>

        <ul class="navbar_icon">
            <li><a href="https://www.facebook.com/profile.php?id=100001873070222" target = '_blank'><i class="fab fa-facebook"></i></a></li>
            <li><a href="https://www.instagram.com/jae__yoon96/" target = '_blank'><i class="fab fa-instagram"></i></a></li>
            <li><a href="https://github.com/Shin-Jae-Yoon" target = '_blank'><i class="fab fa-github"></i></a></li>
        </ul>

        <a href="#" class="navbar_toggleBtn">
            <i class="fas fa-bars"></i>
        </a>
    </nav>

</body>

</html>

HTML 파트에서 크게 어려운 것은 없었다. 유의할 점은 fontawesome 이미지를 이용하기 위해 script에 추가하는 것과 구글폰트를 이용하기 위해 link를 거는 것을 까먹지만 않으면 된다.

(3) : CSS

body {
  margin: 0;
  font-family: "Baloo Chettan 2", cursive;
}

a {
  text-decoration: none;
  color: black;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: rgb(226, 196, 238);
}

.navbar_logo {
  font-size: 24px;
}

.navbar_logo i {
  color: rgb(177, 107, 243);
}

.navbar_menu {
  display: flex;
  padding-left: 0;
  list-style: none;
}
.navbar_menu li {
  padding: 8px 12px;
}

.navbar_menu li:hover {
  background-color: rgb(241, 219, 255);
  border-radius: 20px;
}

.navbar_icon {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.navbar_icon li {
  padding: 4px 6px;
}

.navbar_toggleBtn {
  display: none;
  position: absolute;
  right: 32px;
  font-size: 24px;
  color: rgb(177, 107, 243);
}

@media screen and (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
  }

  .navbar_menu {
    display: none;
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  .navbar_menu a {
    display: block;
  }

  .navbar_icon {
    display: none;
    justify-content: center;
    width: 100%;
  }

  .navbar_toggleBtn {
    display: block;
  }

  .navbar_menu.active,
  .navbar_icon.active {
    display: flex;
  }
}

CSS를 하는 과정에서는 Flexbox를 이용하여 navbar를 구성하니 아주 간편했다. 그러나 시간을 잡아 먹은 부분들이 있었다.

클릭하지도 않았는데 메뉴의 색깔이 바뀌어 있는 현상이었다. 기본 text-decoration 값이 지정되어있기 때문인데 이를 none으로 바꿔줘야
했고, 마우스를 올렸을 때 색깔이 보이게 하기 위해서는 클래스의 hover를 바꾸면 된다는 것을 알 수 있었다.
Flexbox의 기본 중심축은 justify이고 반대축이 align인데, MediaQuries 상태에서 버튼을 눌러 메뉴와 아이콘이 펼쳐지도록 했을 때이다. 메뉴를 펼치면서 기존의 flexbox는 row로 중심축이 잡혀있는데 column으로 바꾸면서 아무 생각없이 이전에는 column이 align이었으니 계속 align으로 하여 설정이 먹지 않았을 때이다. flexbox를 바꿨을 때 justify와 align을 유의하도록 하자.
text-align: center;로 했을 때 가운데로 가지 않는 현상도 있었다. 이는 기존에 설정된 box의 크기 자체가 작았기 때문에다. 사이트에서 F12를 눌러서 박스의 크기, padding, margin을 항상 확인하고 그에 맞게 값을 설정하자. 코드의 중간 중간 보이는 padding의 값을 변경한 것도 padding-left만 설정되어 있어서 가운데로 가지 않는 현상이 있었기 때문이다.

(4) : Java Script

const toggleBtn = document.querySelector('.navbar_toggleBtn');
const menu = document.querySelector('.navbar_menu');
const icon = document.querySelector('.navbar_icon');

toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icon.classList.toggle('active');
});

Media Queries 환경에서 삼단바를 눌러 메뉴와 아이콘이 펼쳐지도록 하기 위하여 HTML에서 추가한 toggleBtn에 기능을 넣기 위한 JS이다.

EventListener를 이용하여 마우스로 클릭 했을 때 menu, icon의 상태를 active로 바꾸면서 활성화 시켜주는 것이다. 그래서 CSS의 마지막에
추가한 .navbar_menu.active , .navbar_icon.active는 마우스를 클릭한 상태를 말한 것이고 이의 display를 flex로 설정해준 것이다.

주의해야할 점으로는 HTML에 추가한 toggleBtn 클래스에서

<a href="#" class="navbar_toggleBtn">
	<i class="fas fa-bars"></i>
</a>

"#"을 빼면 토글버튼을 눌렀을때 메뉴와 아이콘이 사라지는 것을 경험할 수도 있다. "#"을 넣지 않는다면 링크를 타고 들어가서 새로고침을 하기 때문이다.

(5) : 결과물

데스크탑 화면

메뉴 버튼에 마우스 올렸을 때 색깔 바뀌기
이미지 아이콘 눌렀을 때 해당 링크로 이동하는 기능

태블릿, 모바일 화면 (768px 이하)

처음에는 메뉴와 아이콘이 가려져 있는 상태
삼단바를 눌러서 메뉴와 아이콘이 펼쳐지는 기능

Author And Source

이 문제에 관하여(End - HTML + CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jae_yoon/WebFrontEnd-hfz9r5jb

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)