본문 바로가기

헤더2

KDT 5th 웹개발자 입문 수업 8일차 주말 간 헤더를 세 개의 사이트(인프런과 청년몽땅정보통, 투썸플레이스)에 만들어 보면서 그래도 좀 실력이 늘었을까 싶다. 완벽하게 모작하지는 못했지만(아직 자바스크립트 활용법을 모름..) 모양만 대애충 ... 오늘부턴 스타벅스 페이지를 클론 코딩 한다고 하신다! 스타벅스 홈페이지 클론 코딩 - 1 1. 문자 인코딩 설정 - UTF-8 : 초성, 중성, 종성으로 문자를 구분하여 작성 (ex. ㄱ, ㅏ, ㅇ, ㅇ, ㅏ, ㄴ,...) - EUC-KR : 하나의 완성된 글자를 인식 (ex. 강, 안, ...) 2. 뷰포트 렌더링 방식 설정 - width=device-width : 화면의 가로 너비를 각 디바이스의 가로 너비와 동일하게 적용 - initial-scale=1.0 : 화면의 초기 화면 배율(확대 정도.. 2023. 2. 6.
KDT 5th 웹개발자 입문 수업 7일차 인프런 헤더 만들기 간단하게 헤더를 만드는 방법에는 2가지가 있는데, 첫번째로는 position absolute로 고정시키는 것 두번째로는 display flex로 만들기 ✔️ 이 방식을 사용함 1. HTML 파악하기 - 로고 - Nav 메뉴 - 검색창 - 추가 메뉴 - 로그인/회원가입 버튼 1-1. B.E.M (Block / Element / Modifier) CSS 클래스 이름을 짓는 방법 기본적 룰을 가지고 통일이 되어야 협업하기에 용이, 추후 SCSS 와 함께 사용하기 편리 (React 때문에 점점 덜 사용되는 추세지만 기본으로 알아 둬야함) - 요소__일부분 : 요소의 일부분을 표시할 때 언더바(__) - 요소--상태 : 요소의 상태를 표시할 때 대쉬(--) 1-1-1. Block 가장 바깥쪽 .. 2023. 2. 3.