crabLab

🎯이번 챕터는 꼭 vscode가 아니더라도 웹에서 간단한기능들을 테스트할 수 있는 codepen이라는 사이트와 브라우저 스타일 초기화, 그리고 emmet이라는 자동완성기능을 배웠다. 셋 다 생산성의 측면에서 알짜인 기능들이다. 공식적으로는 알기 힘든 이런 사소해보이는 팁들이 정말 유용한 것을 알기에 잘 습득해둬야겠다. ⭕01. Codepen.io 소개 📌강의 정리 기존의 프로젝트는 훼손하지 않고 수정을 하며 테스트를 하고자 한다면 어떻게 해야할까? 우선 바탕화면에 폴더를 만들고 그 폴더를 열어 진행하면 된다. 근데 이런 방식은 단순한 코드를 위해 처음부터 다시 프로젝트를 구성하는 것은 복잡하다. 이럴때는 codepen.io를 쓰면 좋다. 이 사이트에서 기본적인 기능들을 테스트하는 경우가 많이 생길것이다...

🎯이번 챕터는 제목대로 무작정 몇가지를 시작해보는 챕터였다. 그렇다고 마냥 가볍지는 않은 것이 나중에도 계속해서 쓰는 기술들이기 때문이다. !를 이용한 DOCTYPE이나 a태그 경로지정과 개발자도구 등등 다양한 걸 배웠지만 배우면서 느낀건 조금씩 다 아는거였지만 완전히 다 알지는 못했다는 점이다.. 정말 겉 핥기로 알고 있었다는 것을 통감하며 다시 잘 배워야 겠다. ⭕01. Doctype(DTD) 📌강의 정리 새로운 프로젝트를 만들예정이다. test프로젝트 즉 폴더단위는 자유로운 이름으로 하되 영어,소문자를 권장한다. 파일에서 열기해서 test 디렉토리를 열어준다. index.html을 만들어주는데 이름이 index라 짓는 이유는 브라우저가 index를 먼저 찾아 열기 때문이다. !로 doctype을 열..

🎯이번 챕터는 vscode에 관한 내용이었다. 몇개는 이미 알고 있기도 한 내용이었지만 상당히 유용하고 실용적인 내용들이 가득했다. 전에 vscode 설정때문에 2일정도 날린경험이 있어서인지 이번 내용이 매우 크게 다가왔다. 이번 내용을 잘 습득해서 생산성을 늘려야 한다. ⭕01. 설치 및 실행 📌강의 정리 vscode라는 코딩을 위한 에디터를 설치해볼 것이다. vscode를 구글에서 검색해서 첫번째 링크를 들어가서 설치하면된다. IDE가 아닌 code를 다운받아야한다. mac이라면 그대로 mac을 받으면 되고 운영체가 다르다면 우측 상단의 다운로드에서 맞는 운영체제로 받으면 된다. 바탕화면에 starter라는 폴더를 만들고 vscode를 실행시켜보자. mac에서는 cmd, window에서는 ctrl을 ..

🎯이번 챕터는 본격적인 강의에 앞서 기초적인 내용들과 진행하면서 알아두고 있으면 좋은 것들을 배웠다. 들으면서 프론트엔드는 항상 최신을 달려야한다는 점을 조금 느끼게 되었다. 각종 정보들을 잘 기억해 두어야 겠다. ⭕01. 첫 인사 및 강의 개요 📌강의 정리 앞으로 업데이트되는 프론트엔드 소식들은 heropy.blog에 올라오니 알아두면 좋다. 웹프론트엔드 개발의 핵심 줄기를 학습하는 과정이다. 난이도가 높고 중요도가 낮은 내용은 가볍게 학습하거나 생략한다. 프론트엔드 개발이란 HTML, CSS, JS를 사용해서 데이터를 그래픽 사용자 인터페이스(GUI) 로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것이다. 프론트엔드는 앞단이라는 뜻을 가지고 있다. 즉 사용자와 상호작용하는 것이다. 비즈..