Step 1. Setting

Visual Studio Code 설치

index.html 파일 생성

! 입력하면 html template 입력 가능

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Extensions(확장)에서 Live Server 설치

설치 후 index.html 가 live server 에 띄워지는지(서버가 실행되는지) 확인

Tip. prettier

스크린샷 2022-05-28 오후 10.55.16.png

설정하는 방법 : https://uxgjs.tistory.com/150

개인 세팅 (.prettierrc)

{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "bracketSameLine": true,
  "printWidth": 999,
  "singleQuote": false,
  "trailingComma": "all",
  "semi": true,
  "tabWidth": 2
}

Step 2. Structuring HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Search Me</title>
  </head>
  <body>
    <main>
      <h1 class="offscreen">Search Me A Wikipedia Powered Search Engine</h1>
      <section class="searchEntry">
        <h2 class="offscreen">Search Term Entry</h2>
        <div class="logo" aria-hidden="true">Search Me</div>
        <form id="searchBar" class="searchBar">
          <label class="offscreen" for="search">Enter a search term or phrase</label>
          <input id="search" type="text" autocomplete="off" />
          <div id="clear" class="none button claer" role="button" tabindex="0" aria-label="Clear search term">X</div>
          <button id="searchButton" class="button searchButton" type="submit" aria-label="Submit button">Search</button>
        </form>
      </section>
      <section class="results">
        <h2 class="offscreen">Search Results</h2>
        <div class="statsBar">
          <div id="stats" class="stats" aria-live="assertive"></div>
        </div>
        <div id="searchResults" class="searchResults"></div>
        <div class="resultItem">
          <div class="resultTitle">
            <a href="#">Dachsund</a>
          </div>
          <div class="resultContents">
            <div class="resultImage">
              <img src="" alt="Dachsund" />
            </div>
            <div class="resultText">
              <p class="resultDescription"></p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <p><span aria-hidden="true">&lt;&lt;</span> Powerd by <a herf="<https://www.wikipedia.org>" target="_blank">Wikipedia</a><span aria-hidden="true">&gt;&gt;</span></p>
    </footer>
  </body>
</html>

Step 3. Adding font and icon libraries to the project

cdnjs - The #1 free and open source CDN built to make life easier for developers

awesome all.min.css link