식초의 지식보관소

방법 영상을 보고 감을 잡는다 > 힌트를 써놓는다 > 혼자 만들어 본다 > 해결 못한 부분 영상 보고 해결한다 영상 드림 코딩 : 반응형 헤더편 힌트 웹사이트 레이아웃 2가지 1. 넓은 너비 일 때 -네비 바 : 박스 3가지 (로고, 메뉴, 아이콘)=플랙스 박스, 양쪽 사이드&스페이스 골고루 =space-btween 2. 좁은 너비 일 때 -네비 바 : 미디어 쿼리 이용해서 박스 재배치, 박스 3가지 (로고, 메뉴, 아이콘), 플랙스박스 정렬=column 혼자 만들기 영상 보며 만들기 css 파일 연결하기 ~태그 1. HTML 구조 만들기 ~가장 큰 박스 만들기 : 시멘틱 태그 태그 : nav.navbar 탭 ~중간 3 박스 만들기 : .navbar__logo 탭, .navbar__menu 탭, .nav..

미디어 쿼리란? -사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다 -접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다 미디어 쿼리 구문 @media |not |only| screen |and (min-width: 200px)| { } 연산자 and : 조건을 추가한다 only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not : 다음에 나오는 미디어 유형 제외 , : 동일한 스타일 유형을 사용할 때 쉼표 사용 미디어 유형 all : 모든 미디어 print : 인쇄 장치 screen : 컴퓨터, 스마트폰 tv aural : 화면을 읽어 소리로 출력 braille : 점자 tty embossed 미디어 쿼리 조건 1. 웹 문서의 가로 너비, 세로 높..