스파르타 내일배움캠프 사전캠프 2주차 개발일지

목차

MDN ‘기본 소프트웨어 설치하기’

  • 코드 편집기
    • 코드 작성을 위한 편집프로그램으로는 Sublime, Brackets, Atom, Visual Studio Code 등이 있다.
    • 나는 기존에 사용하던 Visual Studio Code를 사용할 것이다.
  • 웹 브라우저
    • 기존에 사용하던 Chrome을 사용할 것이다.

MDN ‘웹사이트의 외관은 어떻게 할까요?’

MDN ‘파일 다루기’

  • index.html 만들기
  • pages 폴더 : 각종 하위 페이지 저장
  • src 폴더: 각종 스크립트, 스타일 저장
    • 스타일은 한 파일에 모아서 사용하자

MDN ‘HTML 기본’

  • HTML에 대한 공부 내용은 HTML.md에 따로 정리하자

MDN ‘CSS 기초’

  • CSS에 대한 공부 내용은 CSS.md에 따로 정리하자

MDN ‘JavaScript 기본’

  • JavaScript에 대한 공부 내용은 JavaScript.md에 따로 정리하자

‘연준이의 코딩 연습실’

  • header만들기 ```js const headerTemplate = document.createElement(“template”); headerTemplate.innerHTML = `
Go🏠
연준이의 코딩 연습실

`;

class Header extends HTMLElement { constructor() { super(); } connectedCallback() { const shadowRoot = this.attachShadow({ mode: “open” }); shadowRoot.appendChild(headerTemplate.content); } }

customElements.define(“header-component”, Header); ```

  • javascript로 react 비슷하게 컴포넌트처럼 활용할 수 있다는 것을 알고 구글링해서 따라 만들어 봤는데… 문제가 있음
    • root폴더에 있는 index.html과 pages폴더에 있는 하위 페이지에 동일하게 적용시키기가 어려움
    • 포기…나중에 다시 해보자…ㅠ
  • 1번 연습실, 2번 연습실, 3번 연습실로 메뉴 구성 변경

댓글남기기