[2주차 TIL] KnockOn Bootcamp HTML / JS 심화

HTML과 JS 기본에 대해 조금더 자세하게 살펴보고

실습을 진행하도록 하겠다

 

 

 

 

 

 

HTML

---

태그

img 태그 :

<img src="test.jpg" style="width: 200px;", height="200px">

현재 코드 파일 위치에서 test.jpg 사진을 사용한다

style은 넓이와 높이를 설정할 수 있다.

 

input 태그 :

<input type="text">

input 태그는 사용자 입력을 받는 필드를 만드는 태그이다

type은 text, button, submit 등등 필요에 의해 사용된다

value로 값을 지정할 수 있다

 

a 태그 :

<a href="test.html">test페이지로 이동</a>

a태그는 하이퍼링크를 만드는 태그이고 href속성에 링크할 파일이나 링크를 지정한다

 

ul, ol 태그 :

ul, ol 태그는 목록을 만드는 태그이다 li태그와 같이 쓰이며

ul은 순서가 없는 태그 ol은 순서가 있는 태그이다.

 

span 태그 :

인라인 요소를 그룹화하는 태그이다

텍스트 또는 다른 인라인 요소에 스타일을 적용하기 위해 사용

 

table 태그 : 

테이블을 생성하는 태그이다 (표) tr, td, th태그와 같이 사용한다

• <tr> : 테이블의 행을 정의
• <td> : 테이블의 데이터 셀을 정의
• <th> : 테이블의 헤더 셀을 정의

div 태그 :

구역이나 섹션을 만드는 태그이다

CSS와 함께 사용하여 스타일을 적용한다

 

form 태그 :

사용자 입력을 위한 양식을 만드는 태그

<input>, <textarea>, <button>과 함께 사용

 

 

 

HTML 실습

---

 

이 사진과 비슷한 사과와 바나나를 소개하는 페이지를 제작하겠다

 

필요 태그

<a>, <img>, <ul>, <li>, <input>,<hr>

바나나 소개 페이지와 사과 소개 페이지는 따로 만들어 <a> 태그로

연결되게 하겠다

 

 

바나나 소개 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>바나나 소개 페이지</title>
    </head>

    <body>
        <h1>바나나!</h1>
        <hr>
        <h2>바나나에 대하여</h2>
        <p>바나나는 전 세계에서 가장 인기 있는 과일 중 하나입니다. 바나나는 건강에 보호적인 영향을 미칠 수 있는 필수 영양소를 함유하고 있습니다.</p>
        <img src="바나나사진.webp" style="width: 200px;", height="200px">
        <h2>바나나의 건강 이점</h2>
        <ul>
            <li>높은 섬유질 함량</li>
            <li>심장 건강</li>
            <li>소화 촉진</li>
        </ul>
        <h2>맛있는 바나나 레시피</h2>
        <p>이메일:</p>
        <input type="text">
        <p>당신의 좋아하는 바나나 레시피를 공유해주세요:</p>
        <input type="text" style="width: 300px;", height="100px"><br>
        <input type="button" value="제출"><br>
        <p><a href="test2.html">사과</a>에 대하여</p>
        
    </body>
</html>

 

 

 

사과 소개 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>사과 소개 페이지</title>
    </head>

    <body>
        <h1>사과</h1>
        <hr>
        <h2>사과에 대하여</h2>
        <p>사과는 전 세계에서 널리 사랑받는 과일 중 하나입니다. 사과는 다양한 영양소를 함유하고 있어 건강에 좋습니다</p>
        <img src="사과 사진.avif" style="width: 200px;", height="200px">
        <h2>사과의 건강 이점</h2>
        <ul>
            <li>높은 식이섬유 함량</li>
            <li>다양한 비타민과 미네랄</li>
            <li>항산화 물질 풍부</li>
        </ul>
        <h2>맛있는 사과 레시피</h2>
        <p>이메일:</p>
        <input type="text">
        <p>당신의 좋아하는 사과 레시피를 공유해주세요:</p>
        <input type="text" style="width: 300px;", height="100px"><br>
        <input type="button" value="제출"><br>
        <p><a href="test.html">바나나</a>에 대하여</p>
        
    </body>
</html>

 

 

결과

 

 

 

JS

---

저번 블로그에서 JS의 기본문법들을 살펴봤으니

다른 내장함수들을 포함하

유용하게 사용할 수 있는 Arrow Function을 이해하고

룰렛 게임을 만들어 보겠다

 

setTimeout(실행할 함수, ms);

2번째 인자에 있는 밀리초가 지난 후 실행할 함수를 실행한다

 

setInterval, clearInterval

let test = setInterval(반복 실행할 함수, 반복 간격(ms));

반복 간격마다 1번쨰 인자를 반복실행한다

이때 ClearInterval(test);를 안에서 실행시킨다면

반복을 중지한다.

c언어에서의 break와 유사하다.

 

배열.forEach(함수);

배열에 각 요소에 각각 한번씩 함수를 실행한다

 

배열.map()

()안에 변환된 배열의 요소들로 새로운 배열을 반환한다

 

배열.filter()

각 요소에 대해 조건을 만족하는 요소로 배열을 반환한다

전에 했던 계산기실습에서 사용한 코드이다.

정규표현식을 활용해서 사용할 수 있다.

 

 

Arrrow function

화살표 함수는 간결한 문법으로 함수를 작성할 수 있게 해주는 기능이다

 

기본 함수구조

function add(a, b){

        return a + b;

}

 

Arrow function

const add = (a, b) => {

        return a + b;

}

여기서 꼭 const를 사용해야 하는것은 아니다

상수로 사용해 변하지 않음을 의미한다

매개변수가 없을때는 빈괄호를 사용해야 하고

Arrow function은 arguments 객체를 가지지 않는다

arguments 객체는 함수 내에서 자동으로 생성되는 객체로

함수 내부에서 사용할 수 있다.

 

 

실습 코드

<!DOCTYPE html>
<html>
  <head>
    <title>Roulette Game</title>
    <script></script>
  </head>
  <body>
    <div id="roulette">1</div>
    <button id="stopButton">정지</button>

    <script>
      const values = [1, 2, 3, 4, 5, 6];

      const rouletteDisplay = document.getElementById("roulette");

      let intervalId = null;

      let currentIndex = 0;

      function startRoulette() {
        intervalId = //interval 설정하기
      }

      document.getElementById("stopButton").addEventListener("click", () => {
        clearInterval(intervalId);

        alert("선택된 숫자: " + values[currentIndex]);
      });

      startRoulette();
    </script>
  </body>
</html>

 

이 코드는 룰렛 게임 코드인데

실습은 이 코드를 완성시키는 것이다

 

 

완성된 코드

<!DOCTYPE html>
<html>
  <head>
    <title>Roulette Game</title>
    <script></script>
  </head>
  <body>
    <div id="roulette">1</div>
    <button id="stopButton">정지</button>

    <script>
      const values = [1, 2, 3, 4, 5, 6];

      const rouletteDisplay = document.getElementById("roulette");

      let intervalId = null;

      let currentIndex = 0;

      function startRoulette() {
        intervalId = setInterval(()=>{
            currentIndex = (currentIndex + 1) % 6;
            rouletteDisplay.textContent = values[currentIndex];
        }, 100);
      }

      document.getElementById("stopButton").
      addEventListener("click", () => {
        clearInterval(intervalId);
        alert("선택된 숫자: " + values[currentIndex]);
        startRoulette();
      });
      
      startRoulette();
    </script>
  </body>
</html>

 

추가 코드

intervalId = setInterval(()=>{

        currentIndex = (currentIndex + 1) % 6;

        rouletteDisplay.textContent = values[currentIndex];

}, 100)};

 

setInterval을 사용해 100밀리초 마다 반복하여 실행하도록 하고

1~6까지의 값을 반복하고 index값을 증가시키는 와중

값이 너무 커지는것을 방지하기 위해 % 6을 추가하여 실제 index에

1~6까지에 값만이 들어가도록 하였다

그리고 상수로 지정하였던 rouletteDisplay값에

지정된 인덱스값의 값을 넣어주었다

 

 

 

 

 

Arrow function도 사용해 보고 setInterval도 사용해 보니

익숙한 c언어와는 다르게 실제 JS 프로그램들은

편리한 함수를 사용한다라는 것을 느꼈다