본문 바로가기

민둥 개발자의 계발 블로그

HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기 본문

Study/HTML

HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기

민둥산의 민둥이 2022. 4. 21. 23:54

서론!?

 안녕하세요! 요즘 저의 관심사는 어떤 웹사이트를 만들고 싶은가, 그리고 어떤 웹사이트를 만들 수 있는 가입니다. 학원을 다니면서 6개월이 과정이 끝날 때는 제 개인 프로젝트와 그룹 프로젝트가 한 개씩 완성되어 있을 텐데요, 그때가 정확히 언제일지 모르지만 너무너무 기대되고 미리 구상해봐야겠다 싶다는 생각으로 가득합니다. 이제 국비지원 수업을 들은 지 거의 딱 1달 되는 날인데요, 현재로써는 HTML도 아직 다 배우지 못했습니다 ㅠㅠ(물론 저는 학원 외에도 혼자 예습하기에 다릅니다!★ 하지만 수업 속도가 제 열정에 비해 느린 것은 확실하니...). 그래서 이것저것 어떻게 하면 제가 재미있으면서도 많이 배울 수 있는가를 찾아보니 클론 코딩이라는 공부 방식이 있더군요.

 

클론 코딩이란?

 영어로 하면 Clone Coding. 직역하면 복제 코딩이라고 할 수 있는데요, 이미 만들어져 있는 것들을 한번 직접 보고 만들어 보는 것입니다. 클론 코딩 공부를 하면서 꽤 중요한 점이 있고 지키지 않는다면 제대로 된 공부라고 할 수 없는데요, 그것은 바로 생각 없이 따라 치기입니다. 클론 코딩을 통해 제대로 된 공부를 하고 싶다면,

  1. 생각 없이 따라 치지 않기!
  2. 먼저 화면이 어떻게 생겼는지 보고 HTML로 직접 구상해 보기!
  3. 화면의 코드를 확인 후, 왜 어떤 코드를 썼는지 생각하며 따라 쳐보기!
  4. 코드를 다시 보지 않고 한번 더 따라 해보기!

이 순서를 꼭 지켜주셔야 제대로 된 공부라고 저는 생각합니다.

 

 어쨌든, 제가 처음으로 해본 클론 코딩은 바로.....(두구두구) 지뢰 찾기 화면!입니다. 요즘 저희 학원에서 유행하는 게임이죠^^ 쉬는 시간마다 누가 빨리 푸나 다들 열정적으로 마우스 클릭하며 놉니다ㅎㅎ. 현재로써 CSS는 배우지도 않았고 Javascript도 응용방법은 배우지 않았기에 진짜로 화면만 그대로 구현해보려고 했습니다. 그래서 이미 완성된 코드에서 딱 CSS와 자바스크립트를 다 지우니... 별거 없긴 했습니다 하하.

 

 따라 치지 말라고 했지만 저는 그래도 모르는 태그들과 속성들이 있어서 한번 따라 쳐봤습니다.  코드의 의미를 몰라도 한 번씩 따라 쳐보고 싶다고요! 나중에 수업에서 배우면서 "아~ 이게 이거였구나" 하는 이해에 도움이 되기를 빌면서 다음 포스팅에는 지뢰 찾기의 HTML 코드 분석, 주로 모르는 태그들의 분석과 함께 CSS와 자바스크립트도 합쳐서 갖고 오겠습니다!

 

<html>
<header class="site-header" role="banner">
  <div class="wrap">
    <h1>minesweeper</h1>
    <div class="legend">
      <p><strong>flag:</strong> <code><span class="key">alt</span>+<span class="click">click</span></code></p>
    </div>
  </div>
</header>
<body>
<main class="site-main" role="main">
  <div class="wrap">
    <div id="board">
      <div class="top">
        <div id="scoreboard">
          <div id="minecounter" class="counter"></div>
          <div>
            <div class="select-wrap">
              <select name="level" id="level">
                <option value="beginner">Beginner</option>
                <option value="intermediate">Intermediate</option>
                <option value="expert" selected>Expert</option>
              </select>
            </div>
            <button class="reset">🙂</button>
          </div>
          <div id="timer" class="counter"></div>
        </div>
        <div id="grid"></div>
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</main>
</body>
</html>
반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML 연습! HTML 로그인 페이지 만들기 수정본!!  (0) 2022.04.25
HTML 연습! HTML 로그인 페이지 만들기!  (4) 2022.04.24
HTML#5 이미지 태그 정답 공개!  (2) 2022.04.18
HTML #5 이미지 태그!  (0) 2022.04.18
HTML 테이블 추가 문제 정답 공개!  (0) 2022.04.18
'Study/HTML' Related Articles more
Comments

티스토리툴바