position 흐름과 상관없는 배치 absolute relative fixed static 작성 방법 보더 긋기 넓이 높이 패딩 마진 간격 디테일 타이포 색 플롯, 포지션 미세조정 느낀점 실습에서는 float과 position을 이용하는 방법으로 구현 flex로 사용하는 법을 연습해서 그런지...
Vue-How-to-2
Vue 문법 폼 입력 바인딩 단방향 데이터 바인딩 script에서 template으로만 정보가 간다 <template> <h1></h1> <input type="text" :value="msg" /> </template> <...
Vue-How-to-1
Vue 문법 <template> html을 작성하는 부분 {{ x }} 중괄호 두번으로 script의 데이터를 사용 @, :, v-if 와 같은 디렉티브 사용 <template> <div class="main" :class="now"> <nav> <...
Vue-ESlint
ESlint Ecma Script Lint : js 문법 검사 도구 (화면에 에러를 보여준다) 다양한 플러그인 설치가능 (확장성이 좋다) 설치하기 npm i -D eslint eslint-plugin-vue babel-eslint .eslintrc.js 설정 설정에 관한 참고 문서 module.exports = { env...
lec-[html/css] float
실습 리뷰 figma파일에서는 너비가 고정되어있었지만 일반적으로 다양한 디바이스를 지원해야되기 때문에 card의 너비가 달라졌을때 자식이 width: 100%가 되게한다 css에서 선택자에 > 안쓰는 이유는? 태그를 하나 더 감싸는등 여러 변화의 요구가 있을 수 있으므로 느슨하게 연결한다 typography vertic...
Vue-시작하기
Vue 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다 정교한 단일 페이지 응용프로그램을 완벽하게 지원 cli 설치 cli를 전역 설치 npm insta...
ts-시작하기-1
TypeScript ts는 js에 타입을 부여한 언어(js의 확장된 언어) ts는 js로 컴파일(complile)이 필요하다 컴파일 단계에서 에러 확인이 가능 타입 지정으로 가이드 가능 설치 npm init -y npm i -D typescript npx tsc --init 컴파일 # js 로 컴파일 js파일 생성 npx ts...
lec-[html/css] 박스 다루기
박스의 이해 cssom은 보더를 포함하지 않는다 box-sizing: content-box 가 기본값이기 때문 태그하나에 상자 하나 html도 상자 body도 상자 블럭의 가로는 100% 그래서 항상 변하는 브라우저 창에 따라 값이 변한다 한줄을 담당하는 ...
정규 표현식(Regular Expression)
정규 표현식 역할 문자 검색 문자 치환 문자 추출 -1은 해당사항이 없을 경우 반환 만들기 생성자 함수 방식 const regexp = new RegExp(“표현식”,”옵션”); 리터럴 방식 const regexp = ...
clone-soylent-7
clone 내용 파악하기 구현된 목록 4가지 탭을 선택할 수 있다 탭마다 다른 문구와 슬라이드가 보여진다 슬라이드는 3개씩 보여진다 라디오 버튼 모양 만들기 라디오 버튼 클릭시 하단의 표시내용 변경 날짜 텀 드롭다운으로 선택 가능하게 +,- 버튼, 숫자 5까지 선택 가능 페이지 버튼이 있으며 ma...