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
728x90
반응형

문제 1

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

  • 두 개의 창을 화면에 띄우시오.
  • 창의 크기가 768px ~ 1400px 사이일 때 창이 잘리지 않고 출력되어야 한다.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>창띄우기</title>
    <style>
        body {
            background-color: steelblue;
            text-align: center;
        }
        .box1 {
            width: 400px;
            height: 200px;
            background-color: white;
            margin: 10px 20px auto;
            display: inline-block;
        }
        @media screen and (max-width: 768px) and (min-width: 1400px) {
            .box1 {
                width: 400px;
                height: 200px;
                background-color: white;
                margin: 10px 20px auto;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="box1"></div>
        <div class="box1"></div>
    </div>
</body>
</html>

 

 

 

 

 

문제 2

  • 창의 왼쪽에는 사진, 오른쪽에는 텍스트를 출력하시오.
  • 창의 크기가 768px이하일 때 세로로 창이 출력되며, 창의 윗 부분에는 사진 아래쪽에는 텍스트를 출력하시오.

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>그림띄우기</title>
  <link rel="stylesheet" href="mq3_2_style.css">
</head>
<body>
  <div id="container">
    <div class="card">
      <img src="../img/sos.jpg"></img>
      <div class="words">SOS</div>            
    </div>
    <div class="card">
      <img src="../img/mudo2.jpg">
      <div class="words">어려워요..</div>            
    </div>            
  </div>
</body>
</html>
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
    background:steelblue;
}
#container {
    width:1140px;
    margin:50px auto;
}    
.card {
    float:left; 
    width:550px;
    height:250px;
    margin:10px;
    border:1px solid #0f0f0f33;
    background-color:#ffffff; 
    text-align: center;
}
img {
    float: left;
    width: 50%;
    height: 100%;
}
.words {
    margin-top: 100px;
}
@media screen and (min-width:768px) and (max-width:1400px) {
    #container {
        width:570px;        
        margin:50px auto;
    }
    .card { 
        float:left; 
        width:550px;
        height:250px;
        margin:10px;
        border:1px solid #0f0f0f33;
        background-color:#ffffff; 
        text-align: center;
    }
    img {
        float: left;
        width: 50%;
        height: 100%;
    }
    .words {
        margin-top: 100px;
    }
}
@media screen and (max-width:768px) {
    #container {
        width:250px;        
        margin:50px auto;
        margin-left: 150px;
        text-align: center;
    }
    .card { 
        float:left; 
        width:250px;
        height:400px;
        margin:10px;
        border:1px solid #0f0f0f33;
        background-color:#ffffff; 
        text-align: center;
    }
    img {
        float: left;
        width: 100%;
        height: 50%;
    }
    .words {
        margin-top: 300px;
        width: auto;
        text-align:center;   
    }
}

 

 

▶ 출력 결과

 

 

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

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

[JavaScript] 배수의 개수 구하기 (31일차)  (0) 2023.06.28
[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26
[CSS] 선택자 실습 (29일차)  (0) 2023.06.26
[CSS] 컬러 실습 (29일차)  (0) 2023.06.26
728x90
반응형

문제

  1. 버튼을 클릭하면 프롬포트 창을 나타난다.
  2. 프롬포트 창에 구구단의 단을 입력하면 해당 구구단이 출력하도록 코드를 작성하라.

 

 

프롬포트 창에 4단을 입력했을 때의 모습

 

 

 

 

코드

<!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>
        .gu {
            padding: 30px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button class="gu" onclick="clickGugudan()">구구단</button>
</body>
</html>
<script>
    function clickGugudan() {
        var name = prompt("구구단을 입력하세요");
        document.write("<h2><"+name+"단></h2>");
        document.write("<table style = 'border: 1px solid #ccc; border-collapse: collapse;'><tbody><tr>");
        for (var i=1;i<=9;i++){
            document.write("<td style = 'border: 1px solid #ccc; border-collapse: collapse; padding:10px;'>" + name + "*" + i + "=" + name * i + "</td>");
        }
        document.write("</tr></tbody></table>");
        
    }
</script>

 

 

 

 

<!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;
        }
    </style>
</head>
<body>
</body>
</html>
<script>
    var name = prompt("구구단 몇 단?");
    document.write("<table><tbody><tr>");
    for(var i=1;i<10;i++){
        document.write("<td>"+name+"*"+i+"="+name*i+"</td>");
    }
    document.write("</tr></tbody></table>");
</script>
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

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

[CSS] grid 실습 (30일차)  (0) 2023.06.27
[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
[CSS] 선택자 실습 (29일차)  (0) 2023.06.26
[CSS] 컬러 실습 (29일차)  (0) 2023.06.26
[CSS] Background 문제 (28일차)  (0) 2023.06.24
728x90
반응형

문제 1

  1. 가상 클래스를 사용하여 첫 번째 이미지를 선택한다.
  2. 첫 번째 이미지 스타일은 테두리 색상을 빨간색, 두께를 2px로 지정한다.

 

 

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>  
  <style>
    img {
      margin-right:50px;
      border:1px solid #ccc;
      box-shadow: 2px 2px 5px #ccc;
    }
    img:nth-child(1) {
      border:2px solid red;
    }
  </style>
</head>
<body>
  <img src="../img/1.jpg" alt="">
  <img src="../img/2.jpg" alt="">
  <img src="../img/3.jpg" alt="">
</body>
</html>

 

 

 

 

 

문제 2

  1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.
  2. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색은 검은색, 글자색은 흰색으로 변경한다.
  3. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경은 빨간색으로, 글자색을 흰색으로 변경한다.

 

 

▶ 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 2</title>  
  <style>
    .top-menu {
      margin:50px auto;
      padding:0;
      list-style:none;
      width:606px;
      height:35px;
      box-shadow:0 3px 4px #8b8b8b;
      background-color:#dadada;
    }
    .top-menu li {
      float:left;
      border:1px solid #929292;
      border-right: none;
    }
    .top-menu li a:link{
      color:black;
      text-decoration:none;
      text-align:center;
      display:inline-block;
      width:100px;
      height:35px;
      line-height: 35px;
    }
    .top-menu li a:visited {
      color:black;
    }
    li:last-child {
      list-style-type: none;
    }
    .top-menu li a:hover {
      background-color: black;
      color: white;
    }
    .top-menu li:last-child a:hover {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
      <li><a href="#">메뉴5</a></li>
      <li><a href="#">메뉴6</a></li>
    </ul>
   </nav>
</body>
</html>

 

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

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

[CSS] 미디어 쿼리 실습 (30일차)  (0) 2023.06.27
[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26
[CSS] 컬러 실습 (29일차)  (0) 2023.06.26
[CSS] Background 문제 (28일차)  (0) 2023.06.24
[CSS] 스크립트 onclick 실습 (28일차)  (0) 2023.06.23
728x90
반응형

문제

  1. container의 자식 p태그의 글자 색 빨간색 
  2. p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경 
  3. p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경
  4. p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경
  5. container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경

 

<body>
    <div id="container">
        <h1>HTML/CSS/JAVASCRIPT</h1>
        <p>HTML 태그는 쉽다.</p>
        <p>미디어쿼리는 중요하다.</p>
        <div class="p_color">
            <p>CSS는 어렵다.</p>
            <div class="div_color">
                <p>오라클은 재있다.</p>
                <h2>JQuery는 꿀잼이다.</h2>
                <span>JSP는 노잼이다.</span>
            </div>
            <p>JAVASCRIPT는 더 어렵다.</p>
        </div>
        <div class="div_color">
            <p>자바는 쉬웠다.</p>
        </div>
    </div>
</body>

 

 

 

 

코드

    <style>
        /* container의 자식 p태그의 글자 색 빨간색  */
        #container > p {
            color: red;
        }
        /* p_color 클래스의 하위 모든 p태그 백그라운드 회색으로 변경  */
        .p_color p {
            background-color: #ccc;
        }
        /* p_color 클래스와 같은 레벨(형제 요소)에 있는 div_color 클래스에 있는 p태그의 글자색을 파란색으로 변경 */
        .p_color ~ .div_color p {
            color: blue;
        }
        /* p_color 클래스의 자식요소에 있는 div_color 클래스의 모든 요소의 글자색을 초록색으로 변경 */
        .p_color > .div_color {
            color: green;
        }
        /* container 클래스의 모든 하위 p태그의 테두리를 1px, solid, black 로 변경 */
        #container p {
            border: 1px solid black;
        }
    </style>

 

 

 

 

출력 결과

 

 

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

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

[CSS] 프롬포트 실습 (29일차)  (0) 2023.06.26
[CSS] 선택자 실습 (29일차)  (0) 2023.06.26
[CSS] Background 문제 (28일차)  (0) 2023.06.24
[CSS] 스크립트 onclick 실습 (28일차)  (0) 2023.06.23
[CSS] Postion 실습 (27일)  (0) 2023.06.22

+ Recent posts

티스토리툴바