Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ------- 필수-1 -------
- a. padding 속성은 요소 외부의 여백을 조정할 때 사용한다.
- padding은 내부의 여백 margin은 외부의 여백을 조정합니다.
- c. 배경색을 지정할 때 background-color 속성으로 오해하는 경우가 있는데,
- 배경색은 background 속성으로 지정해야 한다.
- 두개 다 배경색을 지정할 수 있고, background 속성의 경우 다른 것도 조정할 수 있습니다.
- ------- 필수-2 -------
- 1번 : 코드가 반복될 시 하나하나 다 수정해야하는 불편이 있습니다.
- 2번 : 코드를 알아보기 힘들고, 수정하기 어렵습니다.
- ------- 필수-3 -------
- .title {
- font-size : 15px;
- color : red;
- }
- .contant{
- font-size : 15px;
- }
- ------- 필수-4 -------
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- h1
- {
- margin-left : 20px;
- background-color: lightblue;
- }
- </style>
- </head>
- <body>
- <h1>제목 입니다</h1>
- <p>'제목 입니다' 에 왼쪽 margin 20px 을 적용해주세요.</p>
- </body>
- </html>
- ------- 필수-5 -------
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- h1
- {
- margin : 20px;
- background-color: green;
- }
- </style>
- </head>
- <body>
- <h1>제목 입니다</h1>
- <p>'제목 입니다' 에 상하좌우 모든 방향으로 margin 20px 을 적용해주세요.</p>
- </body>
- </html>
- ------- 심화-1 -------
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .box1 {
- width: 300px;
- height: 300px;
- background: violet;
- }
- .box2 {
- padding : 0px 40px 25px 40px;
- background: blue;
- }
- </style>
- </head>
- <body>
- <div class="box1">박스 1번</div>
- <div class="box2">박스 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 {
- padding : 20px;
- float:left;
- }
- </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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement