crabLab

https://starbucks-pjs.netlify.app/ 스타벅스 커피 코리아 스타벅스 커피 코리아 starbucks.co.kr 🎯이번 챕터는 netlify를 이용해서 배포했으며 정말 정신없이 지나간 것 같다.. 그래도 다 만들고 나니 정말 뿌듯했다.

🎯이번 챕터는 드디어 스타벅스 예제에 돌입했다. 평소 하던대로 진행하다가 이번예제는 강의를 들으며 정리하기 어렵다고 판단 하던대까지만 정리를 올리고 내가 만든 완성 사이트의 주소를 올릴예정이다. ⭕01. 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘 📌강의 정리 스타벅스예제를 만들어보자. 깃허브주소를 가면 스타벅스 랜딩 페이지를 만든다고 하는데 demo를 클릭하면 데모페이지가 나오게 된다. 여러가지 이미지를 사용해야하는데 이미지라는 폴더와 파비곤아이콘과 파비콘피엔지들을 받아야한다. 깃허브 다운로드 zip로 받으면 된다. 받은것의 이미지 3개를 복사하여 우리의 프로젝트 폴더에 넣으면 된다. vscode로 프로젝트 폴더를 열자. index.html을 만들고 ! tab으로 기본을 만들고 en을 ko로 하..

🎯이번 챕터는 스타벅스 예제를 들어가기에 앞서 필요한 JS기술들을 미리 공부해보는 시간이었다. 아직은 헷갈리는 것도 많고 어렵지만 나로서는 HTML,CSS보다 이부분이 더 마음에는 편한것같다. ⭕01. 개요 📌강의 정리 스타벅스예제 만들기전에 자바스크립트 선행 학습을 할것이다. 예제를 만들수 있는 수준으로 선행학습을 하고 후에 예제하고 본격적으로 배울것 TEST라는 빈폴더를 vscode로 열어준다. index.html을 !로 자동완성만들어준다. en을 ko로바꿔준다. main.js라는 파일을 만들고 console.log(’HEROPY’)를 해준다. 이제 head요소에서 script로 main.js를 연결해준다. 이제 표기법을 배워보자. dash-case(kebab-case) 는 the-quick-brow..

https://adoring-shirley-44bd4b.netlify.app Overwatch adoring-shirley-44bd4b.netlify.app 🎯이번 챕터는 지금까지 배운것을 바탕으로 overwatch예제를 따라 만들어보았고 그것을 netlify 를 통해 배포해 보았다.

🎯이번 챕터는 CSS를 구체적으로 배우는 과정이었다. 어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고 마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데 이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 생각이 든다. ⭕21. 전환 📌강의 정리 전환 효과에 대해 알아보자. html에 div를 주고 css에서 div:hover로 로얄블루를 주면 div에 마우스를 대면 전상태와 후상태를 나눌 수가 있다. 이때 div선택자에 transition: 1s;이면 전환과정을 1초에 보이게 지정할 수 있다. 전상태와 후상태를 자연스럽게 해주는 것을 전환효과라고 한다. transition은 속성명 지속시간 타이밍함수 대기시간이다. 요소의 ..

🎯이번 챕터는 CSS를 구체적으로 배우는 과정이었다. 어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고 마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데 이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 생각이 든다. ⭕11. 투명도 📌강의 정리 opacity는 요소의 투명도를 결정한다. 기본 1인 경우는 불투명을 의미한다. opacity가 0.07이면 매우 투명해진다. 0.7이면 많이 불투명해진다. 이것은 백분율로 1을 100으로 환산하여 계산한다. 코드펜에서 확인을 하면 부모 하나 자식 하나를 두고 자식을 클래스선택자로 선택하고 opacity를 조절하면 불투명도를 확인할 수 있다. 이때 소수점 앞의 0은 생략할 수 있다..

🎯이번 챕터는 CSS를 구체적으로 배우는 과정이었다. 어떻게 작동시키며 어떤 부분을 수정해야 브라우저에 뜨는지 등을 확인하고 마지막으로 HTML과 CSS만을 이용해서 오버워치 캐릭터 선택 화면을 만들었는데 이 두가지만 가지고도 이렇게 만드는 것을 보면 정말 기초에 충실한것도 중요하다고 생각이 든다. ⭕01. 개요 📌강의 정리 css의 속성들에 대해 알아보자. html의 속성은 어트리뷰트이고 css의 속성은 프로퍼티이다. css의 속성을 보면 화면에 어떻게 나올지 예상을 하는 것도 중요하다. 박스 모델, 글꼴, 문자, 배경 등등의 여러 개념이들이 있다. 박스모델은 가로너비, 세로너비 같은 것을 박스모델이다. 글꼴, 문자는 폰트라고 얘기하는 서체를 얘기한다. 배경은 사각형이라는 요소에는 배경과 배경색상 배경..

🎯이번 챕터는 마크업과 스타일링 작업을 하다보면 쓰기는 하지만 어떤 개념인지 정확히 모르고 쓰던 선택자를 중점적으로 배웠다. 매우 쓸만한 내용이었다. 배울때마다 느끼는 거지만 꼼꼼한 기초가 바탕이 되어야 더 멀리 탄탄하고 깊게 나아갈 수 있는 것 같다. 개념이 잘 잡히니 암기도 잘 되는 것 같다. ⭕01. 기본 문법, 주석 📌강의 정리 css의 기본문법부터 알아보자. div의 내용을 보기좋게 꾸며주는 것을 스타일작업이라고한다. div태그를 선언하고 폰트사이즈와 컬러, 텍스트 데코레이션을 바꿔줄 수 있다. css의 기본문법을 보면 맨앞에 div라고 써져있는 부분이 있다. 이렇게 적은 내용의 중괄호에 있는 부분이 꾸미는 내용부분이다. span이라고 적혀있는 부분을 선택자라고 한다. 그 이후 중괄호의 내용이 ..

🎯이번 챕터는 앞서 배웠던 HTML내용들을 실제로 실행시켜보는 과정이었다. 특히 전역속성과 그 정의 그리고 data속성은 매우 흥미로운 부분이었다. data속성을 잘 기억하고 있어야겠다. ⭕01. 핵심 요소 정리 📌강의정리 HTML의 요소들중 핵심요소를 알아보자. 자주 사용하는 요소들은 뭐가 있을까? div태그는 디비전의 약어로 블록요소에 해당한다. 레이아웃요소이며 특별한 의미가 없다. 구분을 위한 요소이므로 정말 많이 사용되고 있다. 구분 영역 을 잡을때, 의미를 묶을때 사용한다. h1태그는 제목을 의미하는 요소이다. heading 책을 사면 목차가 있는데 목차의 의미를 잘생각해보면 된다. p태그는 paragraph의 약어로 문장을 의미하는 요소이다. p태그는 div로 대체해도 되지만 p태그를 사용하면..

🎯이번 챕터는 기본적인 태그들의 정의와 의미, 개념에 대해서 배웠다. 알고 있던 내용도 있었고 모르고 있던 내용도 있었지만 하나같이 유익한 내용들이었다. 그동안 했던 HTMl마크업 작업에서의 의문도 해결이 되었다. 몰라도 코딩은 할 수 있지만 아는것이 백배 천배 더 좋다. ⭕01. 기본 문법 📌강의 정리 HTML의 기본문법에 대해 알아보자. 기본적인 구조는 h1태그안에 hello world를 넣은 구조이다. 내용 이고 요소element라고 한다. 즉 h1요소라고 할 수 있다. 앞쪽 태그는 열린 태그라고 한다. 뒷쪽 태그는 닫힌 태그라고 한다. 종료,닫힌태그는 /가 붙어있는다. 요소의 내용은 content라고 한다. 📌느낀점 기초적인 내용이었다. 용어의 정의를 했다. ⭕02. 부모와 자식 관계의 이해 📌강..