Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

나구리의 개발공부기록

[왕초보] 웹개발 종합반 1주차, 2주차 본문

내일배움캠프_spring6기/온보딩, 1주차 - 왕초보 웹개발 수강

[왕초보] 웹개발 종합반 1주차, 2주차

소소한나구리 2025. 2. 17. 23:15
728x90

1주차

html

모든 태그는 매우 많기 때문에 외워서 사용하는 것이 아니라 필요할 때마다 검색해서 사용해야 함

애초에 외울 수도 없음

 

css

style 태그 안에 작성

css를 적용하고자하는 태그에 class로 이름을 지정하고 style 태그 안에 .클래스명 {속성: 값} 으로 입력해주면 됨

마찬가지로 속성은 매우 많으므로 마찬가지로 필요할 때마다 검색하면 됨

* {  } 은 전체에 적용하겠다는 뜻

 

배경 적용은 아래의 3개 키워드는 세트로 사용된다고 생각하면됨

적용할 url을 어떤 사이즈로 어디에 위치시킬지 적용함

background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position: center;
background-size: cover;

구글 폰트 적용


https://fonts.google.com/

해당 사이트에 접속해서 원하는 폰트를 선택하고, 우측 상단의 Get font -> Get embed code로 이동하면 원하는 플랫폼에서 쓸 수 있는 코드가 있음

@import를 클릭하고 style 태그에 각각 입력해주면 폰트가 적용됨

특정 css 클래스에 적용할 수도 있고, 전체 css에 적용할 수도 있음

 

login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인 페이지</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

      * {
        font-family: "Noto Sans KR", serif;
        font-optical-sizing: auto;
      }

      .mytitle {
        width: 300px;
        height: 200px;

        color: white;
        text-align: center;

        padding-top: 30px;
        border-radius: 8px;

        background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
        background-position: center;
        background-size: cover;
      }

      .warp {
        width: 300px;
        margin: 50px auto 0px auto;
      }
    </style>
  </head>

  <body>
    <div class="warp">
      <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
      </div>

      <p>ID : <input type="text" /></p>
      <p>PW : <input type="password" /></p>
      <button>로그인하기</button>
    </div>
  </body>
</html>

부트 스트랩 적용

전문적으로 따로 css를 작업하는분이 있지 않으면 대부분의 백엔드 개발자가 css를 적용할 때는 이렇게 직접 적용하지 않고 기존에 잘 작성된 css를 적용함

css를 이쁘게 적용하는 것은 매우 전문적인 영역임

 

부트 스트랩 CDN 적용

title 밑에 아래의 코드를 복사 후 붙여넣기 하면 CSS가 적용됨

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


https://getbootstrap.kr/

CDN이 적용 되었다면 해당 사이트에서 원하는 CSS 버전에서 원하는 기능을 찾아서 붙여넣기만 하면 적용이 됨

나만의 추억앨범 만들어 보기

특정 박스 안에서 정렬을 할때에는 아래 4가지의 속성만 가져다가 쓰면됨

여기에서 직접 변경하면서 적용할 것은 flex-direction인데 column이면 세로로 나열되고, row이면 가로로 나열됨

  .mytitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

 

아래처럼 적용하면 mytitle 클래스 안에있는 button에 css를 적용하겠다라는 뜻임

  .mytitle > button {
    width: 150px;
    height: 50;
    background-color: transparent;
    color: withe;
    border: 1px solid white;
    border-radius: 5px;

    margin-top: 20px;
  }

 

앨범 이미지와 앨범 내용을 표시하기 위해서 부트 스트랩을 활용

이미지는 Card에서 버튼은 Buttons에서, 내용 표시는 Floating labels에서 원하는 것을 가져다가 붙혀넣고, 내용만 살짝 바꿔주면 적용됨

원하는 개수만큼 붙여넣기하고 전체로 css를 적용하기 위해 각 부트스트랩 코드들은 div로 묶어서 class를 지정하고 적용해주면 끝남

 

자주 사용하는 CSS는 여기서 사용하는 속성들을 주로 사용하기 때문에 해당 속성들의 특징을 알고 있으면 도움이 됨

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>나만의 추억 앨범</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

      * {
        font-family: "Noto Sans KR", serif;
        font-optical-sizing: auto;
      }

      .mytitle {
        height: 250px;
        color: white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: url("https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
        background-position: center;
        background-size: cover;
      }

      .mytitle > button {
        width: 150px;
        height: 50;
        background-color: transparent;
        color: white;
        border: 1px solid white;
        border-radius: 5px;

        margin-top: 20px;
      }

      .mycards {
        width: 1200px;
        margin: 30px auto 0px auto;
      }

      .mypostingbox {
        width: 500px;
        margin: 30px auto 0px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px blue;
        border-radius: 5px;
      }

      .mybtn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .mybtn > button {
        margin-right: 5px;
      }

    </style>
  </head>
  <body>
    <div class="mytitle">
      <h1>나만의 추억앨범</h1>
      <button>추억 저장하기</button>
    </div>

    <div class="mypostingbox">
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">앨범 이미지</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">앨범 제목</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">앨범 내용</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="name@example.com"
        />
        <label for="floatingInput">앨범 날짜</label>
      </div>

      <div class="mybtn">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
      </div>
    </div>

    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card h-100">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">앨범 제목</h5>
              <p class="card-text">앨범 내용</p>
            </div>
            <div class="card-footer">
              <small class="text-body-secondary">앨범 날짜</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

2주차

넷플릿스 카피, 스파르타 플레스 만들기

위에서 배웠던 내용을 그대로 복습

 

css 입력 시 단 한개밖에 없는 html 태그에 바로 적용할 경우 class 없이 html 태그를 바로 입력해도 됨

예를 들어 body의 경우 html에서 단 한개밖에 없으므로 태그 자체에 css를 적용할 수 있는데 . 없이 body { ... } 이렇게 입력하면 됨

 

부트 스트랩의 Card, Buttons, Floating labels, input groupm, headers, jumbotron을 적절히 활용하여 페이지를 완성

header, jumbotron은 코드가 없는데, 개발자 도구로 진입하여 원하는 블럭을 선택하고 해당 코드를 전체 복사해서 가져오면됨

 

css를 어떻게 바꿔야할지 모르겠을 경우에는 내가 띄운 웹 화면의 개발자도구로 들어가서 원하는 영역을 선택하고 style에 들어가서 먼저 적용해보고 코드에 적용하면 조금 더 수월하게 적용할 수 있음

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>스파르타플릭스</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

      * {
        font-family: "Noto Sans KR", serif;
        font-optical-sizing: auto;
      }

      .main {
        color: white;

        background-image: url("https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg");
        background-position: center;
        background-size: cover;
      }

      body {
        background-color: black;
      }

      .mycards {
        width: 1200px;
        margin: 20px auto 2px auto;
      }

      .mypostingbox {
        width: 500px;
        margin: 20px auto 2px auto;

        border: 1px solid white;
        padding: 20px;
        border-radius: 5px;
      }

      .form-floating > input {
        background-color: transparent;
        color: white;
      }

      .form-floating > label {
        color: white;
      }

      .input-group > label {
        background-color: transparent;
        color: white;
      }

      .mypostingbox > button {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <header class="p-3 text-bg-dark">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <svg
              class="bi me-2"
              width="40"
              height="32"
              role="img"
              aria-label="Bootstrap"
            >
              <use xlink:href="#bootstrap"></use>
            </svg>
          </a>

          <ul
            class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
          >
            <li>
              <a href="#" class="nav-link px-2 text-danger">spartaflix</a>
            </li>
            <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
            <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
            <li>
              <a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a>
            </li>
          </ul>

          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
            <input
              type="search"
              class="form-control form-control-dark text-bg-dark"
              placeholder="Search..."
              aria-label="Search"
            />
          </form>

          <div class="text-end">
            <button type="button" class="btn btn-outline-light me-2">
              Login
            </button>
            <button type="button" class="btn btn-danger">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <div class="main">
      <div class="p-5 mb-4 bg-body-tertiary rounded-3">
        <div class="container-fluid py-5">
          <h1 class="display-5 fw-bold">킹덤</h1>
          <p class="col-md-8 fs-4">
            병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한
            역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직
            세자뿐이다.
          </p>
          <button type="button" class="btn btn-outline-light">
            영화 기록하기
          </button>
          <button type="button" class="btn btn-outline-light">상세정보</button>
        </div>
      </div>
    </div>

    <div class="mypostingbox">
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="영화 이미지 주소"
        />
        <label for="floatingInput">영화 이미지 주소</label>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="영화 제목"
        />
        <label for="floatingInput">영화 제목</label>
      </div>
      <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
          <option selected>별점 선택</option>
          <option value="1">⭐</option>
          <option value="2">⭐⭐</option>
          <option value="3">⭐⭐⭐</option>
          <option value="4">⭐⭐⭐⭐</option>
          <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
      </div>
      <div class="form-floating mb-3">
        <input
          type="email"
          class="form-control"
          id="floatingInput"
          placeholder="추천 이유"
        />
        <label for="floatingInput">추천 이유</label>
      </div>
      <button type="button" class="btn btn-danger">기록하기</button>
    </div>

    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img
              src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            />
            <div class="card-body">
              <h5 class="card-title">영화 제목</h5>
              <p class="card-text">⭐⭐⭐</p>
              <p class="card-text">영화 코멘트</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Javascript

브라우저가 JavaScript를 주로 사용하게 된 이유는 역사적으로 JavaScript가 웹 브라우저에서 실행되는 스크립트 언어로 사실상 표준이 되었기 때문임

웹 페이지의 동적인 기능을 구현하기 위해 JavaScript가 개발되었음

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

 

Javascript 기초 문법

변수선언

let a = 2;
a = 'Bob' // 문자열은 작은 따옴표로 감싸줌

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

 

let 으로 변수를 선언

사친연산, 그리고 문장려 더하기가 기본적으로 가능함

 

console.log로 개발자 도구의 콘솔에서 내용을 확인할 수 있음

문자열은 작은따옴표(')로 감싸서 입력

코드 끝에 ;(세미콜론)은 없어도 됨

 

자료형

 

리스트: 순서를 지켜서 가지고 있는 형태

딕셔너리: 키(key)-밸류(value) 값의 묶음

// 리스트
let a = ['사과', '배', '수박'];
console.log(a[0]);  // 사과
console.log(a[2]);  // 수박
console.log(a.length); // 길이 출력
console.log(a);       // 길이와 전체 요소 출력


// 딕셔너리
let person = {'name':'영수', 'age':27, 'height':180}
console.log(person['name'])   // 영수 출력
console.log(person['height'])  // 180 출력

let name = person['name'] // 딕셔너리에서 영수를 변수 name에 저장
let age = person['age']   // 딕셔너리에서 27을 변수 age에 저장
console.log(name, age)

 

조건문

if (조건) {
	// 조건에 맞다면~
} else {
	// ~가 아니라면~
}

 

반복문

let ages = [15, 20, 31, 3, 64, 1, 23, 6, 15]

ages.forEach((a) => {
  console.log(a)
})

forEach를 통해 리스트의 요소를 하나씩 반복해서 꺼낼 수 있음

 

조건문 + 반복문

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
  if (a > 20) {
    console.log('성인입니다')
  } else {
    console.log('청소년입니다')
  }
})

JavaScript 활용문법(DOM)

함수 만들기

function hey() {
  alert("안녕하세요!");
}
<button onclick="hey()" type="button" class="btn btn-danger">기록하기</button>

함수를 입력하고 html button 태그에 oncliek="hey()"로 함수를 적용하면 버튼을 클릭할 때 자바스크립트와 연동이되면서 출력됨

alert(값 or 변수): 값, 변수의 값을 별도의 창으로 띄움

JQuery

Javascript로 길고 복잡하게 써야하는 것을 jQuery 라이브러리고 보다 직관적으로 쓸 수 있음

라이브러리는 import 해서 사용해야하기 때문에 아래의 코드를 <head>에 입력하면 됨

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

h1 태그로 킹덤이라는 글씨에 JQuery 적용하기 위해 id=title을 추가

<h1 id="title" class="display-5 fw-bold">킹덤</h1>

 

아래 처럼 jQuery를 입력하고 기록하기를 누르면 킹덤이 쥬라기월드로 변경됨

(위에서 기록하기의 버튼을 누르면 hey() 함수가 동작하도록 설정하였음)

function hey() {
    $('#title').text('쥬라기월드');
}

 

JQuery 연습하기1

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1"></div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2"></div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3"></div>
        </div>
    </body>
</html>

 

결과 확인하기! 버튼에 checkResult() 함수가 사용하도록 되어있는데 이부분을 JQuery로 함수를 만들어서 id가 q1, q2, q3인 태그에 값을 입력하도록 코드를 작성

<script>
    function checkResult() {
        let a = ["사과", "배", "감", "귤"];
        $("#q1").text(a[0]); // 사과 출력

        let b = { name: "영수", age: 30 };
        $("#q2").text(b["name"]); // 영수 출력

        let c = [
            { name: "영수", age: 30 },
            { name: "철수", age: 35 },
        ];

        $("#q3").text(c[1]['name']);    // 철수 출력
    }
</script>

 

JQuery 연습하기2

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
    function checkResult() {

    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>


마찬가지로 결과 확인하기 버튼에 checkResult() 함수가 사용되도록 되어있음

id='q1'인 div태그 안에 p태그로 사과, 귤, 감이 있는데 모두 지우고, 리스트 안에있는 사과가 나오도록 함수를 작성

 

`(백틱)을 사용하면 html 태그를 입력할 수 있고, 그 사이에 ${ } 을 사용하면 리스트의 값을 직접 출력할 수 있음

<script>
    function checkResult() {
        let fruits = ['사과','배','감','귤','수박']

        $('#q1').empty()

        let temp = `<p>${fruits[0]}</p>`
        $('#q1').append(temp)
    }
</script>

 

리스트에 있는 값을 forEach문을 사용하여 하나씩 전부 꺼내서 출력할 수도 있음

<script>
    function checkResult() {
        let fruits = ['사과','배','감','귤','수박']

        $('#q1').empty()

        fruits.forEach((a) => {
            let temp = `<p>${a}</p>`
            $('#q1').append(temp)
        })
    }
</script>

 

이번에는 리스트-딕셔너리 자료형을 가지고 id='q2'인 div태그의 값을 모두 지우고 반복문으로 하나씩 꺼내서 이름과 나이를 출력

출력시 기존의 양식처럼 OO은 XX살입니다 로 출력

function checkResult() {

    let people = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
    ];

    people.forEach((a) => {
        let temp = `<p>${a['name']}는 ${a['age']}살입니다.</p>`;
        $("#q2").append(temp);
    });
}
728x90

'내일배움캠프_spring6기 > 온보딩, 1주차 - 왕초보 웹개발 수강' 카테고리의 다른 글

[왕초보 웹개발]4주차, 5주차  (1) 2025.02.19
[왕초보 웹개발] 웹개발 종합반 3주차  (0) 2025.02.18
깃 특강, 필수 리눅스 명령어, 깃 기초 명령어  (0) 2025.02.18
'내일배움캠프_spring6기/온보딩, 1주차 - 왕초보 웹개발 수강' Related Articles more