Untitled

[필수-1]
a -> padding 속성은 요소 내부의 여백을 조정하는 속성이고 margin 속성이 요소 외부의 여백을 조정하는 속성이다.
c -> 배경색은 background-color, background 속성 모두로 지정할 수 있다.

[필수-2]
1. 스타일을 적용해야 할 코드가 수백수천개로 수가 많을 경우 인라인 방식으로 일일이 입력하는 것은 비효율적이다.
2. 정보의 범위를 포함하는 head에 <style></style>태그로 CSS를 작성하게 되면
해당 선택자의 모든 CONTENT에 동일하게 적용된다. HTML문서가 너무 길어지고 선택자에 적용된  찾아서 보기 불편하다는 문제점..?

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


[필수-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;
        }
        .box2{
            padding-bottom: 25px;
            padding-left: 40px;
            padding-left:40px;
            background: blue;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box1">박스 1번</div>
    <div class="box2">박스 2번</div>
</body>


[심화-2]
article {
    margin: 20px;
]
를 사용해서 여백을 주는 것이 좋을 것 같다. padding으로 하게 된다면 영역은 그대로 유지된 상태에서 안쪽 여백이 생기고
margin을 사용한다면 외부의 여백이 생겨 content 자체가 경계선으로부터 떨어지기 때문에.....