Untitled

### [필수 문제1] CSS 속성(객관식)
아래의 설명 중 올바르지 않은 것을 모두 골라 주시고 그 이유에 대해 간략하게 설명해주세요.
```
a. padding 속성은 요소 외부의 여백을 조정할 때 사용한다. (X)
(이유: padding은 border 내부, margin은 border 외부를 조정한다.)

b. 글씨 색상은 font-color 속성으로 오해하는 경우가 있는데, 글씨 색상은 color속성을 사용하여 값을
지정한다.
c. 배경색을 지정할 때 background-color 속성으로 오해하는 경우가 있는데, 배경색은 background 속성으로 지정해야 한다. (X)
(이유: background / background-color 아무거나 써도 적용된다)

d. margin 속성으로 해당 요소의 상, 하, 좌, 우 여백을 모두 설정할 수 있다.
```
***

### [필수 문제2] CSS 선언 방식(서술형)
2-1. 인라인 방식으로 HTML 태그에 직접 스타일을 적용했을 때 어떤 문제가 있는지 설명해주세요.
```
A: 인라인 방식으로 스타일을 적용할 시 똑같은 태그에 동일한 스타일을 적용하는데 있어서 비효율적이다.
```

2-2. HTML 내장 방식으로 CSS를 선언했을 때 어떤 문제가 있는지 설명해주세요.
```
A: 내장방식으로 스타일을 적용한다면 여러 개의 html파일에 동일한 css를 적용 시킬 때 계속해서 코드를 입력해줘야 하므로 비효율적이다.
```

### [필수 문제3] CSS실습
아래의 코드를 참조하여 parent 클래스 자식 요소에 글씨 크기를 15픽셀로 지정해주시고 title 클래스에는 글씨 색상을 빨간색으로 지정하는 코드를 작성해주세요.

A:
```
.title{
    font-size: 15px;
    color: red;
}

.content{
    font-size: 15px;
}
```
***

### [필수 문제4] CSS margin (실습)
1. VS Code 에 새로운 HTML 파일을 만들어 주세요. margin.html
2. 아래 코드를 복사/붙여넣기 하시고 ‘제목 입니다’ 에 왼쪽 margin 값 20px를 적용해주세요.
A:
```
<!DOCTYPE html>
<html>
<head>
    <style>
        h1
        {
            background-color: lightblue;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>제목 입니다</h1>
    <p>'제목 입니다' 에 왼쪽 margin 20px 을 적용해주세요.</p>
</body>
</html>
```
***

### [필수 문제5] CSS margin(실습)
1. VS Code 에 새로운 HTML 파일을 만들어 주세요. margin.html
2. 아래 코드를 복사/붙여넣기 하시고 ‘제목 입니다’ 에 상하좌우 모든 방향으로 margin 값 20px 를 적용해주세요.
A:
```
<!DOCTYPE html>
<html>
<head>
    <style>
        h1
        {
            background-color: green;
            margin: 20px;

        }
    </style>
</head>
<body>
    <h1>제목 입니다</h1>
    <p>'제목 입니다' 에 상하좌우 모든 방향으로 margin 20px 을 적용해주세요.</p>
</body>
</html>
```
***

### [심화 문제1] CSS padding (실습)
1. VS Code 에 새로운 HTML 파일을 만들어 주세요. 그리고 아래 코드를 복사 후 붙여넣기 해주세요. (예 : padding.html)
a. 박스 2번만 아래쪽은 25px, 왼쪽과 오른쪽 padding 은 40px를 적용해주세요.
b. 박스 2번만 width, height 값은 없애고, 배경 색상은 blue 로 바꿔주세요.
A:
```
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: violet;
        }
        .box{
            padding-bottom: 25px;
            padding-left: 40px;
            padding-right: 40px;
            background: blue;
            width: auto;
            height: auto;

        }
    </style>
</head>
<body>
    <div class="box1">박스 1번</div>
    <div class="box2">박스 2번</div>
</body>
</html>
```
***

### [심화 문제2] 간단한 레이아웃을 가진 웹 페이지 (실습)
지금 `<article>`이라는 태그 안에 있는 글이 왼쪽이 너무 붙어있습니다.
여백을 주기 위해 margin 또는 padding을 사용하여 상하좌우 20px만큼 띄워주세요.
A:
```
<!DOCTYPE html>
<html>
<head>
  <style>
    header{
      border-bottom:1px solid gray;
    }
    nav {
      border-right:1px solid gray;
      width:200px;
      height:600px;
      float:left;
    }
    nav ol {
      list-style:none;
    }
    article {
      float:left;
      margin: 20px;
    }

  </style>
</head>
<body>
  <header>
    <h1>CSS 연습</h1>
  </header>
  <nav>
    <ol>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ol>
  </nav>
  <article>
    <h2>CSS</h2>
    CSS 란?
    <ul>
      <li>HTML 이라는 뼈대에 살을 입혀주는 기능</li>
      <li>HTML 과는 다른 형태의 문법을 갖고 있습니다.</li>
    </ul>
  </article>
</body>
</html>
```