[필기정리] Day37 - CSS 문제 및 해답

Web/CSS

2020. 7. 31. 15:25

Q1. width와 height 속성 적용하기

    div 태그로 만든 박스의 너비와 높이가 100px로 지정.

    그리고 배경 색상은 red로 하고, 그 박스 하나를 화면에 나타내자.

 

A.

<!DOCTYPE html>
<html>
	<head> 
      <title>CoderBear's CSS Practice</title> 
      <style> 
          div { 
              width: 100px; height: 100px; 
              background-color: red; 

              border: 20px solid black; 
              margin: 10px; padding: 30px; 
          } 
      </style> 
  </head> 
  <body> 
      <div>
      </div>
  </body>
</html>

Q2. margin과 padding 속성 적용하기

     margin 속성에 10px을 적용하고 padding 속성에 30px을 적용,

     보더는 20px에 선타입은 solid 색상은 black으로 한다. 

 

A. 

<!DOCTYPE html>
<html>
	<head>
      <title>CoderBear's CSS Practice</title>
      <style>
          div {
              width: 100px; height: 100px;
              background-color: red;

              border: 20px solid black;
              margin: 10px; padding: 30px;
          }
      </style>
  </head>
  <body>
      <div>
      </div>
  </body>
</html>

Q2 해답 이미지

 

// Q3 ~ Q10번까지 순차적인 단계대로 풀어볼 것!

 

Q3. 아래와 같이 UI로 구현하시오.

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

</body>

</html>

 

Q4. 아래와 같이 UI로 구현하시오.

// 아래의 note 내용은 힌트!

 

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            padding: 8px;
            background-color: #dddddd;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
    <p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

 

Q5. 아래와 같이 UI로 구현하시오.

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #dddddd;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            padding: 8px;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <p>A background color is added to the list instead of each link to create a full-width background color.</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

 

 

Q6. 아래와 같이 UI로 구현하시오.

    마우스를 올리면 메뉴 색상이 변경되게 한다.

A. 

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }
    </style>
</head>

<body>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

</body>

</html>

 

 

Q7. 아래와 같이 UI로 구현하시오.

     현재 있는 메뉴를 home이라고 가정하고 색상을 다르게 하기

     

    [hint] 클래스 하나를 새로 만들어서 선택된 내용이 active 일 때 실행되도록 할 것

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }
    </style>
</head>

<body>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

</body>

</html>

 

Q8. 아래와 같이 UI로 구현하시오.

A. 

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float:right"><a class="active" href="#about">About</a></li>
    </ul>

</body>

</html>

 

Q9. 아래와 같이 UI를 구현하시오.

     [hint] border-right를 사용할 것

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
            border-right: 1px solid #bbb;
        }

        li:last-child {
            border-right: none;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }
    </style>
</head>

<body>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float:right"><a href="#about">About</a></li>
    </ul>

</body>

</html>

 

Q10. 메뉴바가 상단 고정된 상태로 만드시오.

A.

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed;
            top: 0; // bottom: 0; 으로 하면 하단 고정
            width: 100%;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }
    </style>
</head>

<body>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
        <h1>Fixed Top Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the top of the page while scrolling</h2>

        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    </div>

</body>

</html>

 

Q11. 두 번째 p 태그에는 글자크기 100%
       세 번째 p 태그에는 글자크기 150%
       네 번째 p 태그에는 글자크기 200%으로 하시오.

 

A. 

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        p:nth-child(2) {
            font-size: 100%;
        }

        p:nth-child(3) {
            font-size: 150%;
        }

        p:nth-child(4) {
            font-size: 200%;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

</html>

 

Q12. 두 번째 p 태그에는 글자크기 1배
       세 번째 p 태그에는 글자크기 1.5배 
       네 번째 p 태그에는 글자크기 2배로 하시오.

 

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        p:nth-child(2) {
            font-size: 1.0em;
        }

        p:nth-child(3) {
            font-size: 1.5em;
        }

        p:nth-child(4) {
            font-size: 2.0em;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

</html>

 

Q13. 두 번째 p 태그에는 글자크기 16px

       세 번째 p 태그에는 글자크기 24px

       네 번째 p 태그에는 글자크기 32px

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        p:nth-child(2) {
            font-size: 16px;
        }

        p:nth-child(3) {
            font-size: 24px;
        }

        p:nth-child(4) {
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

</html>

 

Q14. h1 태그의 배경색 red

      h2 태그의 배경색 orange

      h1 태그의 배경색 blue

 

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        h1{
            background-color: red;
        }
         h2{
            background-color: orange;
        }
         h3{
            background-color: blue;
        }
    </style>
</head>

<body>
    <h1>red</h1>
    <h2>orange</h2>
    <h3>blue</h3>
</body>

</html>

 

Q15. 어떤 공간에 글자가 있다고 하면, (       )와 (      ) 속성은 글자를 감싸는 영역의 크기를 지정합니다.
       (       ) 속성은 테두리의 두께를 지정.

       (       )은 테두리와 다른 태그와의 간격을 지정하고

       (       )은 테두리와 글자 사이의 간격을 지정하는 속성이다.

 

A. 어떤 공간에 글자가 있다고 하면, ( width )와 ( height ) 속성은 글자를 감싸는 영역의 크기를 지정합니다. 
    ( border ) 속성은 테두리의 두께를 지정.

    ( margin )은 테두리와 다른 태그와의 간격을 지정하고

    ( padding )은 테두리와 글자 사이의 간격을 지정하는 속성이다.

 

Q16. div 태그로 만든 박스의 너비와 높이가 100px로 지정. 

       그리고 배경 색상은 red로 하고, 그 박스 하나를 화면에 나타내자.

 

A. 

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        div{
            width: 100px; height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

 

Q17. div 태그로 만든 박스의 너비와 높이가 100px로 지정. 

       배경 색상은 red로 하고, margin 속성에 10px을 적용하고, padding 속성에 30px을 적용,

       보더는 20px에, 선타입은 solid, 색상은 black으로 해서 그 박스 하나를 화면에 나타내라.

 

A. 

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        div{
            width: 100px; height: 100px;
            background-color: red;
            margin: 10px; padding: 30px; 
            border: 20px solid black;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

 

Q18. box 클래스에 border 두께를 thick으로, 선의 종류는 dashed, 색상은 black으로 적용해

       화면에 나타내라.

 

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        .box{
            border-width: thick;
            border-style: dashed;
            border-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

 

Q19. 다음 코드에서 대상 객체라고 나온 부분을 display 속성을 이용해서 안보이게 하자.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
    </style>
</head>

<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>

</html>

 

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        #box{
            display: none;
        }
    </style>
</head>

<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>

</html>

 

Q20. body 태그에 배경이미지를 BackgroundFront.png와 BackgroundBack.png를 넣고

       BackgroundFront.png 이미지를 앞에 나오도록 하자.

       그리고 너비는 100%로 높이는 250px로 하자.

 

A. 

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        body{
            background-image: url("BackgroundFront.png"), url("BackgroundBack.png");
            
            background-size: 100% 250px;
        }
    </style>
</head>

<body>
</body>

</html>

 

Q21. body 태그에 배경이미지를 BackgroundFront.png와 BackgroundBack.png를 넣고

       BackgroundFront.png 이미지를 앞에 나오도록 하자.

       그리고 첫번째 이미지의 너비는 100%로 하고 두 번째 이미지의 너비는 250px로 하자.

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        body{
            background-image: url("BackgroundFront.png"), url("BackgroundBack.png");
            
            background-size: 100%, 250px;
        }
    </style>
</head>

<body>
</body>

</html>

 

Q22. body 태그에 배경이미지를 BackgroundFront.png와 BackgroundBack.png를 넣고

       BackgroundFront.png 이미지를 앞에 나오도록 하자.

       그리고 배경이미지는 반복이 안되게 하고

       내용이 많을 때 스크롤을 내리면 그림도 같이 올라가도록 하자.

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        body{
            background-image: url("BackgroundFront.png"); url("BackgroundBack.png");
            
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>

<body>
</body>

</html>

 

Q23. body 태그에 배경이미지를 BackgroundFront.png와 BackgroundBack.png를 넣고

       BackgroundFront.png 이미지를 앞에 나오도록 하자.

       그리고 배경이미지는 반복이 안되게 하고 내용이 많을 때 스크롤을 내려도 그림은 고정이 되도록 하자.

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        body{
            background-image: url("BackgroundFront.png"); url("BackgroundBack.png");
            
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
</body>

</html>

 

Q24. body 태그에 배경이미지를 BackgroundFront.png와 BackgroundBack.png를 넣고

       BackgroundFront.png 이미지를 앞에 나오도록 하자.

       그리고 배경이미지는 반복이 안되게 하고 배경이미지가 항상 가운데 위치하게끔하자.

 

A.

<!DOCTYPE html>
<html>

<head>
    <title>coderbear's CSS Practice</title>
    <style>
        body{
            background-image: url("BackgroundFront.png"); url("BackgroundBack.png");
            
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>

<body>
</body>

</html>
728x90
저작자표시

'Web > CSS' 카테고리의 다른 글

[필기정리] Day38 - CSS 문제 및 해답  (0) 2020.08.03
[필기정리] Day38 - CSS 선택자, overflow, position 등  (0) 2020.08.03
[필기정리] Day37 - 색상표현단위, 박스속성 등  (0) 2020.07.31
[필기정리] Day36 - CSS 문제 및 해답  (0) 2020.07.30
[필기정리] Day36 - CSS 선택자(Selector)  (0) 2020.07.30

티스토리툴바