일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- css3
- react
- 백엔드
- Animation
- iOS 개발자
- CSS
- ipad
- MAC
- 비전공 개발자
- hover
- front-end
- iPhone
- 풀스택
- php
- jQuery
- html5
- IOS
- 자바스크립트
- effect
- SWIFT
- javascript
- image
- button
- 애니메이션
- xcode
- 개발자
- keyframes
- 비전공자
- 프론트엔드
- HTML
- Today
- Total
목록프론트엔드 (470)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bBhVNh/btraRxz0xlH/BHwNNjIuzD7JV2L7WitMs0/img.png)
작업 환경 구성 (VS code) Npm init -y Npm i-D parcel-bundler Package.json -> script 수정 ("dev" : "parcel index.html", "build": "parcel build index.html") SCSS 연결 npm i -d sass SCSS => CSS 변환 확인 사이트 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SCSS에서 나누기(몫)을 할 때, 괄호 사용 ex) margin: (30px ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/8sCyD/btraFEnusWD/4NjTFsm5rspRIoaRBdHNJ1/img.png)
NPM Project - Bootstatp 1. 준비 (NPM 준비 후) 터미널에서 npm install bootstrap@next 2. SCSS 생성(폴더 및 파일) 3. Javascript 연동 연동 확인
1. 산술 연산자 console.log(1 + 2)// 덧셈 console.log(5 - 7) // 뺄셈 console.log(3 * 4)// 곱샘 console.log(10 / 2) // 나눗셈(몫) console.log(7 % 5) // 나눗셈(나머지) 2. 할당 연산자 let a = 2 a += 1 // a = a + 1 a -= 1 // a = a - 1 a *= 1 // a = a * 1 a /= a // a = a / 1 a %= 1 // a = a % 1 console.log(a) 3. 비교 연산자 const a = 1 const b = 3 console.log(a === b) // 일치 연산자 console.log(a !== b) // 불일치 연산자 console.log(a < b) con..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dQyJfT/btraNJG8IMD/oHUzGf4EkZrbeOAkG4NM90/img.png)
Node.Js: Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임(프로그래밍 언어가 동작하는 환경) 설치(In Windows) 1) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS ver 다운로드(안정적이고 신뢰도 높음) 2) https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go...
표기법 dash-case(kebab-case) snake_case camelCase PascalCase 데이터 종류(자료형) String: 문자 데이터, 따옴표를 사용 let myName = "ABC"; let email = 'abc@abc.com'; let hello = `Hello ${myName}??`; console.log(myName); // ABC console.log(email); // abc@abc.com console.log(hello); // Hello ABC?? Number: 숫자 데이터, 정수 및 부동 소수점 숫자 let num = 123; let opacity = 1.57; console.log(num); // 123 console.log(opacity); // 1.57 Boole..
CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..
선택자 { 속성1: 값1; 속성2: 값2; /* 주석 */ ... } 선택자: 스타일을 적용할 대상 속성: 스타일의 종류 값: 스타일의 값 선언 방식 내장 방식: 의 내용으로 스타일을 작성(HTML) 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML) 링크방식:로 외부 css문서를 가져와서 연결하는 방식(병렬 방식) @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식) @import url("") div { .... } CSS 선택자 기본선택자 전체 선택자: 모든 요소를 선택(*) 태그 선택자: 태그를 선택 (태그명) 클래스 선택자: (.class명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..
프론트 엔드 개발자: HTML, CSS, Javascript를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것 HTML: 웹의 구조 CSS: 웹의 정적 표현(시각적) Javascripit: 웹의 동적표현 특수 문자 ` : 백틱, 그레이브(Tab 위의 키) ~ : 틸드, 물결 표시(Tab 위의 키) ! : 느낌표, 엑스클러메이션 @ : 앳, 골뱅이 # : 샾, 넘버, 우물점 $ : 달러 % : 퍼센트 ^ : 캐럿 & : 앰퍼센드 * : 에스터리스크, 별표 - : 하이픈, 대쉬 _ : 언더스코어, 로우대쉬 = : 이퀄, 동등 " : 쿼테이션, 큰 따옴표 ' : 아포스트로피, 작은 따옴표 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, ..