crabLab

제목(Header) 제목 1 제목 2 제목 3 제목 4 제목 5 제목 6 문장(Paragraph) 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 줄바꿈(Line Breaks) 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 강조(Emphasis) 이텔릭 두껍게 이텔릭 + 두껍게 취소선 밑줄 목록(List) 순서가 필요한 목록 순서가 필요한 목록 순서가 필요한 목록 순서가 필요한 목록 순서가 필요한 목록 순서가 필요한 목록 순서가 필요하지 않은 목록 순서가 필요하지 않은 목록 순서가 필요하지 않은 목록 순서가 필요하지 않은 목록 순서가 필요하지 않은 목록 순서가 필요하지 않은 목록 링크(Links) GOOGLE G..

https://github.com/junsu1220/starbucks GitHub - junsu1220/starbucks Contribute to junsu1220/starbucks development by creating an account on GitHub. github.com 🎯이번 챕터는 git을 이용한 버전관리를 배웠다. 거의 대부분은 이미 알고 있는 내용이었지만 실제로 꽤 규모가 있는 프로젝트를 토대로 로그인 페이지를 다시 만들어 브랜치를 이용해 개발하며 다시 병합한 것은 꽤나 유의미한 배움이었다. 이번에도 정리하다 잠시 멈추고 완성된 깃허브 레포지토리 주소를 올렸다. ⭕01. 개요(Git, GitHub) 📌강의 정리 버전관리를 해보자. 기획서가 초안에 가깝다보니 수정본이 생겼다. 기획서를 ..

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이라고 적혀있는 부분을 선택자라고 한다. 그 이후 중괄호의 내용이 ..