코딩하는 등산가

클론 코딩 유튜브 사이트 따라 만들기 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 와이어 프레임 만들어 보기 따라 만들어 보기 - 따라 만들어본 페이지 입니다. - 이미지 파일을 넣지 못해서 이미지 부분은 없습니다. - html과 CSS를 위주로 연습을 하기에는 좋은 클론 코딩인거 같습니다.

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. - 부모의 크기에 따라서 사용하는 경우는 %와 em을 사용 - 브라우저의 크기에 따라서 사용하는 경우는 v*와 rem을 사용합니다. 1. em level 1 level 2 level 3 level 4 .level1 { font-size: 2em; } .level2 { font-size: 2em; } .level3 { font-size: 2em; } .level4 { font-size: 2em; } - 부모 요소보다 2배씩 커지게 됩니다. 2. rem rem의 경우는 전체 브라우저 창의 크기를 기준으로 하기 때문에 일정한 크기를 갖습니다. .level1 { font-..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. CSS의 반응형 유닛 CSS 문법 복습 .box{ width:200px; height:200px; color:#ffffff; font-size: 10px; } Selector -> box Property -> width, height, color, font-size Value -> 200px, #ffffff , 10px.... 픽셀 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위 픽셀의 문제점은? 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지 됩니다. 이러한 문제점때문에 %를 이용하고 있습니다. 상대적인 유닛 사용 - 전부 다 쓰기 보다는 ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. ES6 1. 객체 초기자 { const ellie1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; const ellie2 = { name: name, age: age, }; const ellie3 = { name, age, }; console.log(ellie1, ellie2, ellie3); } - 오브젝트를 선언하는 방식이 새로 추가 되었습니다. - 키와 값이 같은 경우에는 생략이 가능합니다. 2. 할당 { // object const student = { ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. FlexBox - flexbox를 이용해서 박스의 배치가 수월해졌습니다. float : left center right 옵션 Container에 지정하는 속성 값 - display - flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content item에 지정하는 속성 값 - order - flex-grow - flex-shrink - flex - align-self 전체 코드 - index.html 코드 1 2 3 4 5 6 7 8 9 10 index.css 코드 .co..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 원하는 위치에 원하는 박스를 배치하는 것이 가장 중요합니다. 이를 하기 위해서 display와 position에 대해서 잘 이해해야 합니다. CSS 연습 코드 1. block, inline-block - html 코드 1 2 3 1 2 3 - CSS 코드 div, span { width: 80px; height: 80px; margin: 20px; } div { background: red; display: inline-block; } span { background: Blue; display: block; } - 여기서 display에서 inline-block의 ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. CSS란? Cascading Sytle Sheets의 약자 HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다. - 우리가 작성하는 스타일 - 사용자의 취향에 맞게 하는 스타일 - 브라우저 상에서 기본적으로 지정된 스타일 Selectors - 전체를 선택하는 경우 * - type을 선택하는 경우 Tag - ID를 선택하는 경우 #id - Class를 선택하는 경우 .class - State를 사용하는 경우 : - Attribute를 이용하는 경우 [ ] CSS 설정 연습해 보기 - index.html First Second Button 1 But..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. async & await Promise를 좀 더 간편하고, 간결하고, 또한 동기적으로 실행되는 것처럼 보이게 해줍니다. 1. async - Promise를 사용한 경우 function fetchUser() { return new Promise((resolve, reject) => { 'ellie'; }); } const user = fetchUser(); user.then(console.log); console.log(user); - resolve와 reject를 사용하지 않았기 때문에 pending 상태에 then으로 받지도 않았기 때문에, ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 비동기 처리 및 콜백에 대한 이해 1. 동기와 비동기 - hoisting(호이스팅)은 함수 또는 var를 어디에 선언을 하든, 맨 위로 올라가는 것을 말합니다. console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); - 출력이 되는 순서는 setTimeout(() => console.log('2'), 1000); - 이 함수의 경우 브라우저에 보냈다가 1초 후에 콜백함수를 실행해달라고 하면 실행이 됩니다. setTimeout(() => console.log('2..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. JSON HTTP -> HyperText Transfer protocol의 약자로 서로 주고 받을지를 규약 한 프로토콜 - XMLHttpRequest 브라우저 api에서 제공하는 오브젝트중 하나로, 간단하게 서버에 데이터 요청 및 응답받을 수 있습니다. - fetch() API fetch() API를 통해서도 데이터를 주고받을 수 있습니다. 요즘에는 XML을 가독성 및 사이즈 크기 때문에 잘 사용되지 않고, JSON을 많이 사용합니다. - 데이터를 주고 받을 때, 가장 간단하게 쓰는 파일 포맷 - 텍스트를 기반으로 가볍다. - 쉽게 보기 편함 ..