방법
영상을 보고 감을 잡는다 > 힌트를 써놓는다 > 혼자 만들어 본다 > 해결 못한 부분 영상 보고 해결한다
영상
드림 코딩 : 반응형 헤더편
힌트
웹사이트 레이아웃 2가지
1. 넓은 너비 일 때
-네비 바 : 박스 3가지 (로고, 메뉴, 아이콘)=플랙스 박스, 양쪽 사이드&스페이스 골고루 =space-btween
2. 좁은 너비 일 때
-네비 바 : 미디어 쿼리 이용해서 박스 재배치, 박스 3가지 (로고, 메뉴, 아이콘), 플랙스박스 정렬=column
혼자 만들기
영상 보며 만들기
css 파일 연결하기
~<link>태그
1. HTML 구조 만들기
~가장 큰 박스 만들기 : 시멘틱 태그 <nav>태그 : nav.navbar 탭
~중간 3 박스 만들기 : .navbar__logo 탭, .navbar__menu 탭, .navbar__icons 탭
무료 아이콘 삽입
https://fontawesome.com/ >무료 이용 > 이메일 등록 > 메일 안에 스크립트 파일 <head>안에 복붙 > 아이콘 태그복붙
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
홈페이지 이름
~클릭해서 홈화면으로 이동 = <a> 태그로 홈페이지 이름을 감싼다!
메뉴 만들기
~리스트화 되어 있다 =<div> 말고 <ul> 태그를 이용한다
~리스트 아이템은 5번 반복된다= (li>a)*5
아이콘 만들기
~리스트화 되어 있다 =<div> 말고 <ul> 태그를 이용한다
~아이콘 무료 사이트에서 검색한다 > twitter, facebook
2. CSS 스타일링 하기
-맨 위에 있는 태그부터 차례대로 스타일링 한다
navbar 꾸미기
-블록화 되어 있다 > flex로 지정해서 플랙스 박스인거 알려주기..
-주축 기준 배치 > justify-content : space-between
-교차축 기준 배치 > align-items : center
-배경색 > 지정
-원하지 않는 스페이스가 있다 >body{ margin:0; } > 위치: 맨위
-앵커 태그에 밑줄 없애고 흰색 설정 > a {text-decoration: none; color:white;}
-너무 모서리에 붙어 있다 > 패딩값 설정 > .navbar {padding: 8px 12px;} > 위아래, 양옆
로고 꾸미기
.navbar__logo {font-size: 24px; color:white;}
-로고 아이콘 색 바꾸기 > .navbar__logo i {color: }
메뉴 꾸미기
-플랙스 박스 설정하기 > .navbar__menu {display: flex;}
-항목 닷 지우기 > list-style: none;
-패딩 없애주기 > 개발자모드해서 있는 곳만 > padding-left:0;
-메뉴 안에 항목들 너무 붙어 있음 > 패딩 준다 > .navbar__menu li {padding: 8px 12px;}
-폰트 설정 : https://fonts.google.com Source Sans Pro 검색> <link>태그 복붙 > body {font-family: 'Source Sans Pro';}
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
-메뉴에 마우스 가져다 대면 배경색 바꾸기 >.navbar__menu li:hover {background-color:}
-모서리 둥글게하기> .navbar__menu li:hover {border-radius: 4px;}
아이콘 꾸미기
-html에서 <i>태그를 <li>태그로 묶는다
-항목 닷 지우기 > .navbar__menu li {list-style: none;}
-아이콘 색 바꾸기 > color: white;
-플랙스 박스로 만들기 > display: flex;
3. 레이아웃 바꾸기
-미디어 쿼리 사용한다
너비 768px 보다 작을 때 레이아웃
@media screen and (max-width: 768px) {
--여기 내용 넣기--
}
밑으로 내려서 보는 네비를 만들고 싶다
-가장 상위에 있는 .navbar {flex-direction: column;}
-메뉴도 .navbar__menu {flex-direction: column;}
-로그 왼쪽 하기 위해 교차축 정렬을 왼쪽으로 한다 > .navbar {align-items: flex-start;}
-메뉴는 가운대로한다 > .navbar__menu {align-items: center;}
-메뉴 너비를 100%로 바꿔줘야 중간에 온다 > width: 100%
-메뉴 호버 너비도 전체로 하고싶다 > .navbar__menu li {width:100%; text-align:center;}
-네브바 패딩을 줘서 여유좀 주자 > .navbar {padding: 8px 24px;}
-아이콘도 가운데 정렬한다 > 주축기준 가운로 > .navbar__icons {justify-content: center; width:100%}
-아이콘 패딩도 0으로해준다 (media 안에 태그 아님) > .navbar__icons {paddig-left: 0;}
햄버거 아이콘 화면 너비에 따라 있고 없고
-html에 토글 이름으로 <a>태그 넣는다 : <a href="" class="navbar__toogleBtn"></a>
-아이콘 : fontawesome 햄버거 검색 > html에 태그 복붙
-햄버거가 문서 흐름에서 나와서 배치하고 싶다 > .navbar__toogleBtn {position: absolute;}
-오른쪽에서 32px 떨어진 곳에 놓고 싶다 > right:32px;
-햄버거 font-size, color 도 바꾸기
-화면이 넓을 때는 햄버거 없다 > .navbar__toogleBtn {display: noene;}
-768px 이하일 때는 햄버거 있다 > 미디어 쿼리 태그에서 수정 > .navbar__toogleBtn {display: block;}
4. 자바스크립트 이벤트
-먼저 기본은 안보이게 설정한다 > 미디어 쿼리 안에서 > menu, icons {display: none;}
자바스크립트로 햄버거 클릭하면 메뉴 나오게 한다
-html에 연결 : <script src="main.js" defer></script>
-토글 버튼이라는 변수에 쿼리 셀렉터라는 변수 이용해서 navbar__toogleBtn에 할당한다
const toggleBtn =document.querySelector()
-메뉴, 아이콘도 만든다
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
-클릭이 될 때마다 지정한 함수를 정의하는 함수 쓴다.
toggleBtn.addEventListener('click', ( ) => {
--여기 내용 쓴다--
});
(요즘은 API가 잘 되어 있기 때문에 jQuery 사용 빈도 줄었다)
-메뉴, 아콘의 클래스 리스트 중에 active를 토글한다= 액티브 없다면 추가 있다면 빼준다
--여기 내용 쓴다--에 넣을 내용
menu.classList.toggle('active');
icons.classList.toggle('active');
-css로 돌아와서 > 미디어 쿼리에 추가 > 액티브일 때는 플랙스 박스로 보이게 한다
.navbar__menu.active,
.navbar__icons.active {
display: flex;
}
색을 변경할 때 번거로움 줄이기
-css 파일에 :root 변수 할당한다
:root {
--text-color:#f0f4f5;
--background-color:#263343;
--accent-color:#d49466;
}
원색을 안 할 수록 좋다
-색을 넣으려는 위치에 var(--text-color); 대신 넣는다
-:root에서 바꾸면 한번에 바꿀 수 있다
'클론 코딩' 카테고리의 다른 글
| 드림코딩 : 미니 쇼핑몰 게임 만들기 - 4. JS 동적 연동 (main.js), 완성본 (0) | 2020.10.22 |
|---|---|
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -3. JSON 데이터 저장 (0) | 2020.10.22 |
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -2. CSS 꾸미기 (0) | 2020.10.22 |
| 드림코딩 : 미니 쇼핑몰 게임 만들기 -1. HTML 마크업 (0) | 2020.10.22 |
| 드림 코딩 : 반응형 유튜브 만들기 (by HTML, CSS) (0) | 2020.09.23 |