webpack 구체적인 설정이 필요 대형 프로젝트에 적합 설치와 설정 npm init -y npm i -D webpack webpack-cli webpack-dev-server@next # @next를 붙이는간 cli와 버전을 맞추기위함 npm run 으로 실행할 개발서버 및 빌드 명령 설정 "scripts": { ...
parcel-bundler
parcel bundler 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합 설치와 설정 config와 parcel 번들러 설치 npm init -y npm i -D parcel-bundler npm run에 parcel 을 사용하기 위한 설정 "scripts": { "dev": "parcel in...
lec-[html/css] dom, cssom
기초 지식 web : 스크린 미디어와 각종 사물을연결시키는 매개체 web의 진정한 힘은 그 보편성에 있다 웹의 탄생은 연결이다 -팀버너스리 html로 쉽게 프로그래밍 → http 약속을 통해 요청 브라우저 (CPU로 처리)html,css, 이미지파일등을 랜더링해서 보여준다 WHATWG(Web Hypertext Application ...
scss-basic
scss를 사용해보자 CSS Preprocessor css 전처리기 결과물을 css로 컴파일 sass? scss? Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해...
clone-soylent-6
clone 내용 파악하기 구현된 목록 4가지 탭을 선택할 수 있다 탭마다 다른 문구와 슬라이드가 보여진다 슬라이드는 3개씩 보여진다 라디오 버튼 모양 만들기 라디오 버튼 클릭시 하단의 표시내용 변경 날짜 텀 드롭다운으로 선택 가능하게 +,- 버튼, 숫자 5까지 선택 가능 페이지 버튼이 있...
clone-soylent-5
clone 내용 파악하기 구현된 목록 4가지 탭을 선택할 수 있다 탭마다 다른 문구와 슬라이드가 보여진다 슬라이드는 3개씩 보여진다 라디오 버튼 모양 만들기 라디오 버튼 클릭시 하단의 표시내용 변경 날짜 텀 드롭다운으로 선택 가능하게 +,- 버튼, 숫자 5까지 선택 가능 구...
clone-soylent-4
clone 내용 파악하기 구현된 목록 4가지 탭을 선택할 수 있다 탭마다 다른 문구와 슬라이드가 보여진다 슬라이드는 3개씩 보여진다 구현해볼 목록 페이지 네이션이 있으며 자체 클릭이 가능하다 페이지 버튼이 있으며 max 로 가면 클릭 불가 상태가 된다 라디오 버튼 모양 만...
clone-soylent-3
clone 내용 파악하기 구현된 목록 구현해볼 목록 4가지 탭을 선택할 수 있다 탭마다 다른 문구와 슬라이드가 보여진다 슬라이드는 3개씩 보여진다 페이지 네이션이 있으며 자체 클릭이 가능하다 페이지 버튼이 있으며 max 로 가면 클릭 불가 상태가 된다 라디오 버튼 모양 만들기 라디오...
clone-soylent-2
clone 내용 파악하기 hover시 움직이는 border hover시 움직이는 화살표 화살표의 경우 일부만 늘어나기 때문에 그림 파일 사용 불가 구조 만들기 뒷 배경 부분 박스 부분 왼쪽에 위치할 박스 border, background-col...
clone-soylent-1
clone 내용 파악하기 최상단의 공지 부분 스크롤을 내리면 사라짐 하단의 로고, 네비, 언어 선택, 로그인의 영역 fix되어 스크롤 시에도 따라옴 스크롤 시 최상단 공지 부분이 사라짐 사라진 부분만큼 하단의 헤더가 올라감 ...