Untitled

필수1 1. a -> padding 속성은 요소의 내부 여백을 담당한다.
        c -> background-color나 background 둘다 배경색을 지정을 담당한다..

필수2 1. 인라인 방식의 문제는 직접 태그를 찾아서 그 태그의 속성과 값을 넣어야 하므로 만약 그 태그의 수가 많을때 일일히 작성해야 하므로
        시간이 많이 걸린다.
     2. CSS만 따로 작성하기 때문에 선택자가 필요하고 CSS 코드가 HTML의 <style></style> 안에 포함되어 있다.
        하지만 문제는 또다른 html문서에는 적용할수 없다. 똑같은 내용을 사용하고 싶다면 복사해서 사용해야한다.

필수3
.parent {
  font-size: 15px;
}
.title {
  color: red;
}

필수4
<!DOCTYPE html>
<html>
<head>
    <style>
        h1
        {
            background-color: lightblue;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>제목 입니다</h1>
    <p>'제목 입니다' 에 왼쪽 margin 20px 을 적용해주세요.</p>
</body>
</html>

필수5
<!DOCTYPE html>
<html>
<head>
    <style>
        h1
        {
            background-color: green;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>제목 입니다</h1>
    <p>'제목 입니다' 에 상하좌우 모든 방향으로 margin 20px 을 적용해주세요.</p>
</body>
</html>

심화1
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: violet;
        }
        .box2nd{
            padding-bottom: 25px;
            padding-left: 40px;
            padding-right: 40px;
            width: 0px;
            height: 0px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div>박스 1번</div>
    <div class="box2nd">박스 2번</div>
</body>

심화2
<!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>