드림코딩 by 엘리. 웹사이트 따라만들기 (HTML, CSS) 2화

지난 1화에 이어서 햄버거를 세 덩어리와 독립적으로 오른쪽 상단에 위치시키고자 한다.

 

youtu.be/X91jsJyZofw

아이콘 코드를 받아온 후,

a 태그를 사용하여 코드를 작성한다.

css로 돌아가서 position : absolute를 통해 햄버거의 절대 위치를 정의하고,

우측 상단에 맞게 right, top 픽셀 값을 설정한다.

사실 여기서 햄버거의 위치가 바뀌지 않아 결국 컨닝?을 하고 말았다..

알고 보니 클래스 이름을 제대로 쓰지 않은 것이 원인이어서 약간 허탈했다;

기본적인 실수는 하지 않도록 더 신경 써야겠다!

이제 화면이 넓어질 때 햄버거가 나오지 않도록 해야 한다.

제이쿼리 밖의 navbar__toogleBtn 클래스에 display: none을 추가한다.

그런데 햄버거는 사라졌지만 덩어리들이 화면 크기에 맞지 않게 모여있는 것을 발견하였다.

원인은 가장 큰 박스인 navbar에서 justify-content : space-between으로 설정하지 않은 것이 이유였다.

이제 커서가 메뉴 위에 위치할 때, 색깔이 배경색과 바뀌도록 해보겠다.

 

방법은 css에서 .클래스명:hover로 코딩하면 된다.

메뉴 클래스의 li의 색을 바꾸는 것이 목표이므로,

navbar__menu li:hover {}이며, background-color : 원하는 색을 통해 색을 변경한다.

마우스는 안보이지만 마우스를 올린 상태

여기서 border-radius로 값을 지정해주면 둥근 사각형이 된다.

그리고 햄버거를 누를 때마다 화면이 새로고침 되는데,

이를 방지하려면 햄버거의 a 태그 href에 '#'을 넣어주면 된다.

 

엘리님이 JS를 활용하여 햄버거 버튼을 눌러서 메뉴를 보여주는 것도 알려주셨지만,

JS를 배울 때 적극 적용해보도록 하겠다.

 

이제 영상을 보고 짠 코드와 안 보고 짠 코드를 비교해보겠다.

 

안본 것                                                                                              본 것

먼저 html 코드에서,

폰트 지정을 안 한 것을 제외하면 거의 다 일치한 것 같다.

폰트는 link 태그를 통해 사이트와 해당 글꼴 코드를 불러오며 적용한다.

 

아직 간단하게 구현하는 단계라서 그렇게 어렵지 않았던 것 같다.

   안본 것                                                                                                    본 것

전체적으로 다른 점은 글씨의 사이즈나 색 지정, 글꼴 같은 디테일에서 많은 차이를 보였다.

 

글꼴의 경우에서도 html에서 link 태그뿐만 아니라 css에서도 body의

font-family를 통해 설정해주어야 화면 밖으로 구현된다.

 

이렇게 사이트 하나를 연습 삼아 만들어보았고,

비교해보니 확실히 많은 부분이 피드백되어서 도움이 많이 되는 것 같다.