728x90
반응형

문제

  1.  prompt를 이용해서 이름(홍길동)과 태어난 년, 월을 입력 받아서 현재 년도와 월을 구해서 나이를 구하시오.
  2. "홍길동님은 태어난지 00년 00개월 지나셨습니다." 출력
  3. document.write 로 출력하시오. (파란색, 폰트크기 20px)

 

 

 

 

코드

<script>
    var birth = prompt("이름 태어난 년도 태어난 월 입력","홍길동 1990 1").split(" ");

    var time = new Date();
    var year = time.getFullYear()-birth[1];
    var month = (time.getMonth()+1) - birth[2];
    if(month < 0){
        month+=12;
        year--;
    }

    document.write("현재 : "+time.getFullYear()+"년 "+(time.getMonth()+1)+"월<br>");
    document.write(birth[0]+"님은 태어난지 "+year+"년 "+ month+"개월 지나셨습니다.");
</script>
  • 현재의 월보다 더 나중에 태어난 경우, month는 음수의 값이 나온다.
  • 12개월이 기준이기 때문에 month에 12을 더해주고, year 값을 하나 빼주면 태어난 년과 월을 구할 수 있다.

 

 

 

 

출력 결과

▶ 현재의 월보다 앞의 월에 태어난 경우

 

 

 

▶ 현재의 월보다 뒤에 월에 태어난 경우

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] 자바스크립트 sum 함수 만들기 (31일차)  (0) 2023.06.28
[JavaScript] 테이블 백그라운드 색상 변경 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27

728x90
반응형

문제

주어진 코드를 이용하여 창의 넓이에 따라 사진의 갯수를 다르게 출력하시오.

 

▶ 변경 전 화면

 

 

▶ 변경 후 화면

 

 

 

 

코드

    #wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  • auto-fit을 이용하여 화면에 이미지 카드를 가득 채운다.

 

 

 

 

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>상품 갤러리 만들기</title>
  <style>
    * {
      box-sizing: border-box;      
    }
    body {
      background-color:#eee;
      font-size:16px;     
    }
    #wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .card {
      background-color:#fff;
      box-shadow:0px 1px 5px #222;
    }
    .card > header {
      font-size:1.5rem;
      padding:0.5rem;
    }
    .card > p {
      padding:0.5rem;
      line-height:1.6em;
    }
    img {
      max-width:100%;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="../imagesCup/cup-1.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="../imagesCup/cup-2.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="../imagesCup/cup-3.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div> 
    
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="../imagesCup/cup-4.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>     

    <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="../imagesCup/cup-5.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="../imagesCup/cup-6.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="../imagesCup/cup-7.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div> 
      
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="../imagesCup/cup-8.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>        
  </div>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > HTML&CSS' 카테고리의 다른 글

[CSS] (30일차)  (0) 2023.06.27
[CSS] (29일차)  (0) 2023.06.26
[CSS] 3일차 (28일차)  (0) 2023.06.23
[CSS] 2일차 (27일차)  (0) 2023.06.22
[CSS] CSS 스타일 속성 (26일차)  (0) 2023.06.21
728x90
반응형

문제

숫자와 배수를 입력받아 배수의 개수를 출력하시오.

 

 

▶ 코드

<script>
    var num1 = prompt("숫자를 입력하세요");
    var num2 = prompt("배수를 입력하세요");
    checkNumber(num1, num2);
    function checkNumber(num1, num2){
        var count=0;
        for(var i=1;i<=num1;i++){
            if(i%num2==0){
                count++;
            }
        }
        document.write(num1+"에서 "+num2+"의 배수는 "+count+"개 입니다.");
    }
</script>
    checkNumber(num1, num2);
    function checkNumber(num1, num2){
        var num3 = num1/num2;
        document.write(num1+"에서 "+num2+"의 배수는 "+parseInt(num3)+"개 입니다.");;
    }
  • 숫자를 배수로 나누고, 몫만 이용하는 방법으로도 가능하다.

 

 

 

▶ 출력 결과

 

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] 테이블 백그라운드 색상 변경 (31일차)  (0) 2023.06.28
[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26
728x90
반응형

문제 1

그리드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout</title>
  <style>
    #wrapper{
      width:700px;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(3, 100px);
    }
    .box{
      padding:15px;
      color:#fff;
      font-weight:bold;
      text-align:center;
    }   
    .box1 {
      background-color:#3689ff;
      grid-column: 1/4;
      /* 1부터 4까지 */
    }
    .box2 {
      background-color:#00cf12;
      grid-column-start: 1;
      grid-row: 2/4;
    }
    .box3 {
      background-color:#ff9019;
      grid-column: 2/4;
    }
    .box4 {
      background-color:#ffd000;
      grid-column-start: 3;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</html>

 

 

 

 

 

 

문제 2

그리드를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout</title>
  <style>
    #wrapper{
      width:700px;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(3, 100px);
    }
    .box{
      padding:15px;
      color:#fff;
      font-weight:bold;
      text-align:center;
    }   
    .box1 {
      background-color:#3689ff;
      grid-column: 1/3;
    }
    .box2 {
      background-color:#00cf12;
      grid-column-start: 1;
      grid-row: 2/4;
    }
    .box3 {
      background-color:#ff9019;
      grid-column: 3/4;
    }
    .box4 {
      background-color:#ffd000;
      grid-column-start: 3;
      grid-row: 2/4;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</html>

 

 

 

 

 

문제 3

그리드의 area를 이용하여 해당 화면을 출력하는 코드를 작성하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout</title>
  <style>
    #wrapper{
      width:700px;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(3, 100px);
      grid-template-areas: 
        "box1 box1 box1"
        "box2 box3 box3"
        "box2 . box4"
      ;
      /* "box1 box1 box1"
      명시적으로 박스 위치를 나타낼 수 있다. */
    }
    .box{
      padding:15px;
      color:#fff;
      font-weight:bold;
      text-align:center;
    }   
    .box1 {
      background-color:#3689ff;
      grid-area: box1;
      /* 클래스의 이름이 아닌 grid-area: 의 이름을 사용한다. */
    }
    .box2 {
      background-color:#00cf12;
      grid-area: box2;
    }
    .box3 {
      background-color:#ff9019;
      grid-area: box3;
    }
    .box4 {
      background-color:#ffd000;
      grid-area: box4;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</html>

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'HRD_훈련 > 실습' 카테고리의 다른 글

[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26
[CSS] 선택자 실습 (29일차)  (0) 2023.06.26

+ Recent posts

티스토리툴바