Ch 4. 웹에서 시작하기

🎯이번 챕터는

꼭 vscode가 아니더라도 웹에서 간단한기능들을 테스트할 수 있는

codepen이라는 사이트와 브라우저 스타일 초기화, 그리고 emmet이라는 자동완성기능을 배웠다.

셋 다 생산성의 측면에서 알짜인 기능들이다.

공식적으로는 알기 힘든 이런 사소해보이는 팁들이 정말 유용한 것을 알기에 잘 습득해둬야겠다.

---

⭕01. Codepen.io 소개

📌강의 정리

• 기존의 프로젝트는 훼손하지 않고 수정을 하며 테스트를 하고자 한다면 어떻게 해야할까?
• 우선 바탕화면에 폴더를 만들고 그 폴더를 열어 진행하면 된다.
• 근데 이런 방식은 단순한 코드를 위해 처음부터 다시 프로젝트를 구성하는 것은 복잡하다.
• 이럴때는 codepen.io를 쓰면 좋다.
• 이 사이트에서 기본적인 기능들을 테스트하는 경우가 많이 생길것이다.
• 왼쪽의 start coding을 하면 새창에서 왼쪽에 HTML과 CSS,JS가 있다.
• 코드펜에서는 정보부분은 필요가 없고 바로 Hello world라 치면 나온다.
• CSS에서도 css내용을 적으면 바로 그 기능이 구현된다.
• JS에서도 console.log(”HEROPY!”); 라 하면 개발자도구에서 확인 할 수 있다.
• 각 패널의 왼쪽 톱니바퀴 설정으로 들어가면 여러가지 옵션이 있다.
• 여기서는 HTML, Pug같은 전처리 도구들을 쓸 수 있게 해준다.
• CSS 에서도 SCSS같은 전처리 도구를 쓸 수 있게 해준다.
• JS에서는 search CDNjs를 보면 다양한 기능들을 테스트 해볼 수 있다.
• 또한 이 코드펜에서는 로그인해서 사용하면 저장기능도 사용할 수 있다.

 

📌느낀점

코드펜이라는 새로운 웹사이트를 알게 되었다.

웹사이트에서 프론트엔드 코딩을 간단하게 테스트 할수있는 사이트인데

지금은 잘 와닿지 않지만 나중에 JS를 깊이있게 배우다보면 분명 유용할 것 같다.

---

⭕02. 브라우저 스타일 초기화

📌강의 정리

• 비어있는 폴더를 열어보자.
• index.html을 만들어주고 ! tab을 해서 기본내용을 만들고 div태그도 추가한다.
• main.css를 열어주고 css 파일에서 div{width: 200px height: 100px;}
• 그리고 안에 background-color: orange 를 추가해주자.
• 이제 index.html에서 link를 입력하고 tab을 해주면 링크연결하는 href속성이 있다.
• 이제 이 경로 부분에 “./main.css”해주면 200,100의 div영역이 나온다.
• 이제 이 브라우저에서 개발자도구를 켜주고 왼쪽상단의 셀렉트로 div를 클릭해준다.
• 그러면 이제 style 탭에 css속성들이 나온다.
• body부분에는 margin이 8px라고 나오는 것을 알 수 있다.
• 이는 기본적인 값이다. margin은 여백이다.
• 의도하지 않아도 기본적인 여백이 들어가 있는 것인데
  이것은 크롬 브라우저에서 기본적으로 제공하는 여백이므로
  다른 브라우저에서는 조금씩 달라질 수 있다.
• 그러므로 많은 CSS속성들을 초기화해주는 것이 좋다.
• 구글검색창에 reset.css cdn을 검색해주면 jsdeliver에 가서 코드를 사용하자.
• 들어가면 min이라는 것은 용량을 압축해서 한것이다.
• 그래서 reset.min.css를 html코드를 복사한다.
• 이제 link태그 전에다가 복사해주면 절대경로로 css파일이 추가되는 것을 볼 수 있다.
• 이제 이 코드를 통해 브라우저의 적용을 초기화 해줄 수 있다.
• 각각의 브라우저마다 다를 수 있기 때문에 항상 CSS요소를 초기화 하고 진행하는 것을 추천한다.
• codepen.io에서는 어떻게 초기화할까?
• 로그인하면 create의 pen을 선택하면 코딩페이지로 넘어가진다.
• 이제 초기화 하려면 CSS의 톱니바퀴의 설정으로 가서 CSS Base에 가서 Reset으로 해서 save하면 초기화가 된다.

📌느낀점

조금씩 코딩할때마다 편리를 위해 제공하는 브라우저의 기본 CSS를 초기화 하고 싶은 적이 있었는데

이렇게 깔끔하게 배우고 나니 마음이 시원하다.

개발환경의 구성이 참 잘되가는것 같다.

---

⭕03. Emmet

📌강의 정리

• vscode에서 body 태그의 div가 되어있고 img태그 또한 있다.
• 코드를 자동으로 완성해주는 기능을 emmet이라고 한다.
• 예를 들면 div ~~~를 치면 자동으로 완성해준다.
• div.heropy라고 쓰고 tab키를 누르면 자동으로 완성해준다.
• CSS에서도 이 emmet을 쓸 수 있다.
• w:200 tab하면 자동완성된다.
• 이런 emmet문법은 css선택자에서 좀 더 유용하게 쓸 수 있다.
• 예를들면 div>ul>li*4{$}를 하면 예상되는 결과가 보여지는데 이때 tab을 누르면 그대로 내용이 들어가진다.

📌느낀점

자동완성을 뭐라고 하고 또 어떤 기능들이 있는지 알아봤다.

이 emmet기능이 그냥 뭐 이래 라고 생각할 수 도 있지만

정말 코딩할때 어마어마한 생산성 향상을 해준다는 것을 알고 있기에 emmet이라는 이름을 알게 된것만으로도 큰 수확이라 생각한다.