728x90
반응형

문제 1

두 숫자의 합이 리턴되는 sum 함수를 만드시오.

<script>
    document.write("10+20="+sum(10,20));
    function sum(num1, num2){
        return parseInt(num1)+parseInt(num2);
    }
</script>

 

 

 

 

문제 2

숫자 두 개를 입력받아 두 숫자의 합이 리턴되는 sum 함수를 만드시오.

<script>
    var num1 = prompt("숫자1");
    var num2 = prompt("숫자2");
    var numSum = sum(num1, num2);
    document.write(num1+"+"+num2+"="+numSum);
    function sum(num1, num2){
        return parseInt(num1)+parseInt(num2);
    }
</script>

 

 

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

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

[JavaScript] 배열 내용을 테이블로 출력 (32일차)  (0) 2023.06.29
[JavaScript] 텍스트 사라지게 만들기 (31일차)  (0) 2023.06.28
[JavaScript] 테이블 백그라운드 색상 변경 (31일차)  (0) 2023.06.28
[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
728x90
반응형

문제 1

구구단을 출력하되, 프롬포트에 입력받은 단만 백그라운드 컬러를 칠하는 코드를 작성하시오.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, tr, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
            font-size: 12px;
            text-align: center;
        }
        caption {
            font-size: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    var colo = prompt("색칠할 단을 입력해주세요");
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    for(var i=2;i<10;i++){
        document.write("<tr>");
        for(var j=1;j<=9;j++){
            if(i == colo){
                document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
            } else{
                document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

▶ 출력 결과

 

 

 

 

 

문제 2

해당 화면을 출력하는 코드를 작성하시오.

 

 

▶ 코드

<script>
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    var count=9;
    for(var i=1;i<10;i++){
        document.write("<tr>");
        for(var j=1;j<=9;j++){
            if(j == count){
                document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
                count--;
            } else{
                document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

 

 

 

 

문제 3

해당 화면을 출력하는 코드를 작성하시오.

 

 

 

▶ 코드

<script>
    document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
    var count1 = 1;
    var count2 = 9;
    for (var i = 1; i < 10; i++) {
        document.write("<tr>");
        for (var j = 1; j <= 9; j++) {
            if (j == count1) {
                if(count1 == count2)
                    document.write("<td style = 'background-color: yellowgreen;''>" + i + "*" + j + "=" + (i * j) + "</td>");
                else
                    document.write("<td style = 'background-color: #ccc;''>" + i + "*" + j + "=" + (i * j) + "</td>");
            } else if (j == count2) {
                document.write("<td style = 'background-color: tomato;''>" + i + "*" + j + "=" + (i * j) + "</td>");
                
            } else {
                document.write("<td>" + i + "*" + j + "=" + (i * j) + "</td>");
            }
        }
        count1++;
        count2--;
        document.write("</tr>");
    }
    document.write("</tread></table></div>");
</script>

 

 

 

※ 단 수가 바뀌어도 모양의 변화가 없다.

 

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

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

[JavaScript] 텍스트 사라지게 만들기 (31일차)  (0) 2023.06.28
[JavaScript] 자바스크립트 sum 함수 만들기 (31일차)  (0) 2023.06.28
[JavaScript] time 실습 (31일차)  (0) 2023.06.28
[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
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

+ Recent posts

티스토리툴바