본문 바로가기

Web29

#2 JavaScript 코어 기본 정리. 자바스크립트 코어 기본 정리 1. 엄격 모드 (use strict) 자바스크립트의 기존 기능이 변경되면서 호환성 문제를 해결하기 위해 사용한다. 최상단에 작성하여야 하며 클래스와 모듈을 사용한다면 생략해도 된다. (자동 적용) 하지만, "use strict"은 일반적으로 사용하는 것이 좋다. "use strict"; 2. 변수와 상수 변수 변수(variable)는 데이터를 저장할 때 쓰이는 이름이 있는 '저장소'이다. 자바스크립트에서는 let을 사용한다. let message='Hello!'; // message라는 변수에 'Hello' 값 할당 var는 요즘에 사용하지 않는다. 오래된 코드임. let , const를 사용하도록 한다. 변수명을 만들 때 '카멜표기법'을 흔히 사용한다. 첫 단어는 소문자로.. 2020. 12. 27.
프로젝트에서 공통으로 쓰이는 css 속성을 한곳에 정리 프로젝트가 커지다 보면 CSS를 수정해야 될 때 하나하나 찾아서 수정하는 것이 아니라 공통된 속성을 한곳에 정리하면 유지보수시에 매우 편리하다. React에서는 파일 구조를 잘 나눠서 만들어 보도록 하겠다. src안에 common이라는 폴더를 만들고 color와 size에 대한 css 속성들을 정리한다. 다음과 같이 key와 value로 설정해 놓으면 공통 속성을 정의한 후에 쉽게 사용하고 바꿀 수 있다. @value key: value; @value makerBlack: black; @value makerWhite: white; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; 그리고 사용하려는 .css 파일에서 다음과 같이 선언해 주고 .. 2020. 12. 11.
JS#1. Json 파일 fetch로 동적으로 받아오고 화면에 출력하기 Json 파일 동적으로 받아와서 출력 해보겠다. 먼저 Json 파일의 형식은 다음과 같다. data폴더 안에 있는 data.json { "items": [ { "type": "tshirt", "gender": "female", "size": "large", "color": "pink", "image": "../img/pink_t.png" }, { "type": "pants", "gender": "male", "size": "small", "color": "blue", "image": "../img/blue_p.png" }, { "type": "pants", "gender": "male", "size": "large", "color": "yellow", "image": "../img/yellow_p.png.. 2020. 8. 24.
HTML,CSS,JS : 정적인 Youtube mobile로 반응형 웹사이트 clone coding Youtube 정적인 웹사이트 구현 현재는 정적으로 구현하였으나 추후 youtube api를 가져와서 동적으로 만들 계획이다. url: https://jun7867.github.io/YOUTUBE_MOBILE/ Mobile에서 768px 이하 일때 768px 이상일때 https://github.com/jun7867/YOUTUBE_MOBILE jun7867/YOUTUBE_MOBILE Youtube mobile clone coding (Html, Css). Contribute to jun7867/YOUTUBE_MOBILE development by creating an account on GitHub. github.com www.youtube.com/watch?v=67stn7Pu7s4&ab_channel=%.. 2020. 8. 17.

티스토리툴바