코딩 초보 반응형 웹사이트 만들기 피드백

드림코딩엘리 채널에서 반응형 웹사이트 만들기 실습을 해보았다. 따라 쓰는 것은 누구나 다 할 수 있으므로 여기서 제안하는 것은 먼저 결과물을 '스스로' 만들어보라는 것이다. 그래서 한 번 해보았다.

 

1차 시도: 30분 but 매우 허접함 이후 영상을 한 번 시청하여 아이콘, 폰트를 로드하는 사이트와 전체적인 윤곽을 배웠다.

 

2차 시도: 총 2시간이 걸렸고, 비슷하게 만들었으나 JavaScript 쪽으로 까지 미치지는 못하였다. 이후 영상을 시청하여 HTML과 JS를 연결시키는 방법과 여러 디테일에 관해 배웠다. 밑에 정리를 하였고, 이 지식을 바탕으로 3차 시도를 해볼 것이다.

 

3차 시도: 총 2시간 반이 걸렸고, HTML과 CSS에서 2가지 상황에서 막혔었다. 또한 CSS에서 :hover 를 a에다가 주는 실수를 해서 미디어 쿼리를 썼을 때 한 줄 전체가 다 hover 가 안 되는 것을 빼먹었었다. 이 세 가지를 제외하면 매우 잘했다. 다만, 자바스크립트에서 막혀서 참고를 하였다.

1. 미디어 쿼리 에서 로고를 오른쪽으로 못 옮김 => align 을 써야하는 데 justify를 씀
2. 미디어 쿼리에서 diplay:flex를 안 써도 되는 이유는 이미 위에 썼기 때문에 적용되고 있는 것이다. 그냥 바로
   justify와 align 을 쓰면 된다. 기준이 수평인지 수직인지 그걸 잘 알고,  justify와 align를 잘 쓰는게 핵심인듯.
3. li:hover 이런식으로 하면 li 전체가 hover 가 된다. 한 줄 다 하고 싶다면 width: 100% 주면 된다.
4. text-align: center; 로 li 들을 중앙으로 오게 끔 할 수 있다. 
5. 자바스크립트 맨 처음 부분 할당할 때 () 안에 class를 표시하는 ' . '을 써줘야 한다는 점
6.  document.query 와 addEventListener 를 활용 못 했으니 다음번에 시도해보려고 한다. 할당하는 것과 event를 실행시켜주는 기능.
7. active를 시켜줄려면 .active 를 css에서 붙이면 되는 것!
8. toggle이란 하나의 설정 값을 다른 값으로 전환하는 것!

엘리 선생님의 것

 

2차 시도 

 

3차 시도

1. HTML 몰랐던 점

실수한 점

navbar 에 flex를 해주었다. flex는 자녀 태그에서 넣었어야 했다.

<div> 다음에 <ul>을 넣고, <li>를 넣었다.

로고에 a 태그를 안 넣었다.

 

배운 점

목록이있는 상자에는 <div> 대신 의미 있는 <ul>을 사용하는 것이 보기 좋다.

<li> 리스트를 사용하면 부모태그에 무조건 <ul> or <ol> 이 있어야 하는데 div 대신 사용하면 된다는 뜻이다.

        <div class="navbar__menu">
                <ul>
                    <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>
        </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>

 

(li> a)*5 하고 tag => li 안에 있는 a 세트를 5번 반복한다.

 

자바스크립트를 연결할 햄버거 모양을 넣을려면 a.navbar__toggleBtn 을 입력하면 된다.

=> <a href="#" class = "navbar__toggleBtn"> 가 나온다.

2. CSS 몰랐던 점

스타일링을 할 때는 최상위에 있는 박스부터 레이아웃을 먼저 배치한 다음에 그 안에 내용들을 세부적으로 꾸며주는 것이 중요하다.

 

실수한 점

body 태그에 margin: 0; 으로 해야지 하얀 공백이 안 생기는데 padding: 0;을 썼다.

 

배운 점

초기 설정 아이템들이 다 block level 이기 때문에 한 줄에 하나씩 나와 있는 것을 확인할 수 있다. 그래서 처음에 박스에게 display: flex를 지정해준다. 그러면 나란히 한 줄에 다 들어오게 된다. 

 

박스 사이마다 space를 넣어줄 때는 같은 중심축에서 넣기 때문에, justify-content: space-between; 을 사용하여 여백을 사이사이에 넣어준다.

 

아이템들을 수직적으로 중간에 배치하고 싶다면? => 이것은 반대 축이기 때문에 align-items: center; 를 써야 한다. 

 

body CSS에 margin: 0; 으로 해야 양 옆 하얀 공백 부분이 안 생긴다.

 

 

a 태그에서 기본적으로 들어가는 underline을 text-decoration: none;으로 없애주고, color도 바꿀 수 있다.

 

전체적으로 아이템들이 양 모서리에 너무 붙어 있다고 느껴지면? => padding을 써서 8px, 12px 정도 주면 좋다.

 

navbar__menu 도 똑같이 display: flex; 라고 지정해주면 나란히 한 줄로 나열된다.

 

메뉴 아이템 자체가 <li> 이기 때문에 dot 이 들어가 있는데 이것은 list-style: none; 으로 해주면 없어진다. 이후

<li> 가 쓰인 menu 아이템들의 배치가 정확하게 중간이 아니라면 바로 dot의 padding 때문인데 이것을
padding left: 0; 으로 만들면 된다. icons도 똑같이 적용해준다.

 

아이템들이 너무 붙어있으니까, 밑에처럼 padding을 주어서 여유를 준다.

.navbar__menu li{
	padding: 8px 12px;
}

 

padding 말고, margin 을 쓰면 안 되나?

padding을 쓰면 나중에 마우스를 올렸을 때의 background 영역을 좀 더 넓게 만들 수 있다. 또한 박스 안에 넣기 때문에 마우스를 클릭할 수 있는 영역도 넓어져 크게 하이라이트가 가능하다. 반면, margin을 넣으면 클릭할 수 있는 범위가 작아진다. 

 

이 쪽도 똑같이 <ul> 이니까 flex를 써준다. 이후 li에 padding을 주면 Twitter 와 FB 사이에 여백을 줄 수 있다.

.navbar__icons {
	list-style: none;
	color: white;
	display: flex;
}

.navbar__icons li {
	padding: 8px 12px;
}

 

폰트를 적용하고 싶다면, HTML에 따온 코드를 복붙 하고, CSS body 안에 이렇게 쓰면 된다.

body {
	font-family: 'Source Sans Pro';
}

 

마우스를 올렸을 때 a의 박스 색깔 바꾸려면 :hover를 쓰면 된다. 모서리가 직각인 것이 싫으면 border-radius 를 사용해서 px가 올라간 만큼 둥글게 만들 수 있다.

.navbar__menu li: hover {
	background-color : #d49466;
	border-radius: 4px // 이걸 쓰면 모서리가 둥글게 바뀐다
}

3. media query

미디어 쿼리의 양식이며, { } 사이에 미디어쿼리가 적용됐을 때, 디자인하고 싶은 class들을 집어넣을 수 있다. 
@media screen and (max-width: 768px) {
	.class {
    ~
    }

~

}

width가 작을 때는 아이템의 방향을 아래로 바꿔야 한다. 이렇게 만들면 자동으로 아이템들이 밑으로 떨어진다.

@media screen and (max-width: 768px) {
	.navbar {
		flex-direction: column;
	}

	.navbar__menu{ // 메뉴 또한 아래로 한 줄 씩 나오게 해야한다. 그래서 중심축을 column으로 바꿔준다
		flex-direction: colunmn;
	}
}

 

미디어 쿼리와 같이 중심축은 수직인데, 아이템을 수평의 왼쪽에 두고 싶다면? => align-items 를 사용해야한다.

@media screen and (max-width: 768px) {
	.navbar {
		flex-direction: column;
		align-items: flex- start 
	}
    
    .navbar__menu{
		flex-direction: colunmn;
		align-items: center;// 메뉴 or 아이콘을 중간에다가 지정을 하고 싶을 때는 center!
		width: 100%; //여기서 100%해주는 이유는 너비 자체가 너무 작아서 center로 해도 안 바뀌기 때문이다
	}
}

 

li 친구들의 hover 박스 크기가 작을 때 이렇게 해주면 한 줄 꽉 차게 보여진다. center 를 다시 해주는 이유는 너비가 넓어졌을 때, text는 자동으로 왼쪽으로 정렬되기 때문이다.

@media screen and (max-width: 768px) {
		.navbar__menu li{
		width: 100%;
		text-align: center;
	}    
}

 

 

다음으로 넘어가기 전에 body CSS 위에 이걸 추가해야한다. 박스 모델에 padding과 border의 사이즈를 아이템 width와 height에 포함해 달라고 말하는 것이다.

 * { 
 box-sizing: border-box;
 }

 

아이템들이 너무 꽉차 보여서 여유공간을 주고 싶을 때는 padding 을 넣어준다.

@media screen and (max-width: 768px) {
	.navbar {
		flex-direction: column;
		align-items: flex- start;
		padding: 8px 24px; // 이것을 추가한다.
	}

	.navrbar__icons {
		justify-content: center; // 아이콘들도 가운데 정렬을 하고 싶을 때
		width:100%;
	}
}

 

문서 흐름으로 부터 나와서 포지션을 할 수 있게 해주는 것은 position 이다.

.navbar__toggleBtn {
	display: none; // 이렇게 해야 평소에는 안 나온다. 밑에 미디어 쿼리 안에서 display: block; 해주면 그 때만 나온다.
	position: absolute;
	right: 32px; // 오른쪽에서 32px 떨어진 곳에 붙여줘
	font-size: 24px;
	color: #d49466
}

 

미디어 쿼리 안에서만 나오게 하려면? 

@media screen and (max-width: 768px) {
	.navbar__toggleBtn{
	display: block;
	}
}

미디어 쿼리 안에서만 안 보이게 만들려면

menu와 icon에 display: none; 을 추가해준다.

3. JavaScript

자바스크립트는 버튼을 클릭했을 때 이벤트를 처리하기 위해서 쓸 수 있다.

 

JavaScript는 <script src="main.js">로 연결해주는데 이렇게만 하면 우리가 이 모든 파일을 다 받을 때까지 html 브라우저 상에 표시가 안 된다. 이것을 방지하기 위해서 'defer' 라는 키워드를 넣어준다.

<script src="main.js" defer></script>

 

자바스크립트와 html을 연결하는 중요한 방법

toggleBtn 라는 변수에 document.querySelector를 이용하면 html 노드 중에 class가 '.navbar__toggleBtn' 이라는 아이를 할당할 수 있다. 즉, html 안에 있는 class 노드들 중에 '.navbar__toggleBtn' 라는 class를 가진 아이를 찾아서 여기 toggleBtn 에 연결시켜주는 것이다.

const toggleBtn = document.querySelector('.navbar__toggleBtn')
const menu = document.querySelector('.navbar__menu')
const icons = document.querySelector('.navbar__icons')

토글 버튼이 클릭될 때마다 이벤트를 처리해야 하는데 

toggleBtn.addEventListener('click', () => {
~
});

addEventListener 을 이용해서 클릭이 될 때마다 지금 우리가 지정하고 있는 이 함수를 호출해줘 라고 정의하는 것이다.

 

예전에는 이런 API들이 많이 없었기 때문에 jQuery 라이브러리를 많이 써는데 요즘에는 기본적으로 자체 API들이 잘 되어있기 때문에 더 이상 jQuery를 사용하지 않는다. 옛날 생활코딩 강의 괜히 들었다는 생각이..

 

버튼이 클릭될 때마다, menu 나 icons 에 쓰이는 class list 중에 active class를 toggling 할 것이다.

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

이 말은 마우스를 클릭했을 때, menu 나 icons class 가 active 가 없다면 active를 추가해주고, active가 있다면 다시 빼준다는 코드이다.

 

여기서 미디어 screen 이 768보다 작으면 아까 설정해준 데로 menu와 icons는 display:none; 이다. 하지만 active 일 때 (클릭이 되었을 때)는 보여주고 싶다면 CSS에 이 코드를 추가하면 된다.

.navbar__menu.active, 
.navbar__iconcs.acvtive {
	display: flex;
}

이렇게 하고 클릭을 하게 되면 아이템들이 나오게 된다. 

추가 내용

디자인 측면에서 너무 극단적인 하얀색과 검은색은 사용자에게 좋지 한다. 고로 어느 정도 톤 다운된 색을 쓰는 것이 좋다. root을 쓰면 순수 CSS에서 변수를 할당해서 사용할 수 있다. 이렇게 쓰는 것의 장점은 맨 위에서 색깔을 바꾸고 싶을 때 한 번만 바꾸게 되면 모든 색깔들이 바뀌게 돼서 편리하다.

:root {
	--text-clor: #f0f4f5;
	--background-color: #263343
	--accent-color: #d49466
}

 

이렇게 한 번 맨 위에 정의해 둔 다음, 쓰고 싶은 곳에서 정의되어 있는 것을 쓸 수 있다. 

.class {	
    color: var(--text-color);
    }

 

href = ""에 # 없는 상태로 토글 버튼을 누르면 메뉴바가 열리자마자 곧장 창이 새로고침 되기 때문에 창이 깜빡거리면서 다시 메뉴바가 닫히는 처음 상태로 돌아간다. 그래서 #을 써워야 하는 것이다.

• href="" => 창을 새로고침 합니다.
• href="#" =>  새로고침 없이 페이지의 최상단으로 이동합니다.

유용한 사이트 목록

1) 무료 아이콘 사이트

Font Awesome

2) 무료 폰트

Google Fonts