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

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

목차

• MDN ‘Web’ 공부하기
  • MDN ‘Web과 함께 시작하기’
    • MDN ‘기본 소프트웨어 설치하기’
    • MDN ‘웹사이트의 외관은 어떻게 할까요?’
    • MDN ‘파일 다루기’
    • MDN ‘HTML 기본’
    • MDN ‘CSS 기초’
    • MDN ‘JavaScript 기본’
• ‘연준이의 코딩 연습실’ 작성
• My Links… ___

  MDN ‘Web과 함께 시작하기’

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

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

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

• 헤더가 고정되어있는 웹페이지
  • My Git Blog

MDN ‘파일 다루기’

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

MDN ‘HTML 기본’

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

MDN ‘CSS 기초’

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

MDN ‘JavaScript 기본’

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

‘연준이의 코딩 연습실’

• header만들기

  const headerTemplate = document.createElement("template");
  headerTemplate.innerHTML = `
  <link href="../src/style.css" rel="stylesheet">
  
  <div id="headbox">
    <div id="head-left">Go🏠</div>
    <div id="head-center">연준이의 코딩 연습실</div>
    <img id="spartaicon"/>
  </div>
  `;
  
  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번 연습실로 메뉴 구성 변경
  • 1번 연습실
    • 이미지 클릭시 이미지 변경하고, 이미지에 맞는 이름이 적용되 도록 함
  • 2번 연습실
    • ‘랜덤 숫자 맞히기 게임’을 MDN JavaScript에서 보고 만들기
  • 3번 연습실
    • 각종 input type 연습
    • 테이블 만들기 연습

My Links…

• My profile
• My homepage