Advertisement
Guest User

Untitled

a guest
Aug 18th, 2019
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.54 KB | None | 0 0
  1. ------- 필수-1 -------
  2. a. padding 속성은 요소 외부의 여백을 조정할 때 사용한다.
  3. padding은 내부의 여백 margin은 외부의 여백을 조정합니다.
  4. c. 배경색을 지정할 때 background-color 속성으로 오해하는 경우가 있는데,
  5. 배경색은 background 속성으로 지정해야 한다.
  6. 두개 다 배경색을 지정할 수 있고, background 속성의 경우 다른 것도 조정할 수 있습니다.
  7.  
  8. ------- 필수-2 -------
  9. 1번 : 코드가 반복될 시 하나하나 다 수정해야하는 불편이 있습니다.
  10.  
  11. 2번 : 코드를 알아보기 힘들고, 수정하기 어렵습니다.
  12.  
  13. ------- 필수-3 -------
  14. .title {
  15. font-size : 15px;
  16. color : red;
  17. }
  18.  
  19. .contant{
  20. font-size : 15px;
  21. }
  22. ------- 필수-4 -------
  23. <!DOCTYPE html>
  24. <html>
  25. <head>
  26. <style>
  27. h1
  28. {
  29. margin-left : 20px;
  30. background-color: lightblue;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <h1>제목 입니다</h1>
  36. <p>'제목 입니다' 에 왼쪽 margin 20px 을 적용해주세요.</p>
  37. </body>
  38. </html>
  39.  
  40. ------- 필수-5 -------
  41. <!DOCTYPE html>
  42. <html>
  43. <head>
  44. <style>
  45. h1
  46. {
  47. margin : 20px;
  48. background-color: green;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <h1>제목 입니다</h1>
  54. <p>'제목 입니다' 에 상하좌우 모든 방향으로 margin 20px 을 적용해주세요.</p>
  55. </body>
  56. </html>
  57.  
  58. ------- 심화-1 -------
  59. <!DOCTYPE html>
  60. <html>
  61. <head>
  62. <style>
  63. .box1 {
  64. width: 300px;
  65. height: 300px;
  66. background: violet;
  67. }
  68.  
  69. .box2 {
  70. padding : 0px 40px 25px 40px;
  71. background: blue;
  72. }
  73.  
  74. </style>
  75. </head>
  76. <body>
  77. <div class="box1">박스 1번</div>
  78. <div class="box2">박스 2번</div>
  79. </body>
  80.  
  81. ------- 심화-2 -------
  82. <!DOCTYPE html>
  83. <html>
  84. <head>
  85. <style>
  86. header{
  87. border-bottom:1px solid gray;
  88. }
  89. nav {
  90. border-right:1px solid gray;
  91. width:200px;
  92. height:600px;
  93. float:left;
  94. }
  95. nav ol {
  96. list-style:none;
  97. }
  98. article {
  99. padding : 20px;
  100. float:left;
  101. }
  102. </style>
  103. </head>
  104. <body>
  105. <header>
  106. <h1>CSS 연습</h1>
  107. </header>
  108. <nav>
  109. <ol>
  110. <li><a href="#">HTML</a></li>
  111. <li><a href="#">CSS</a></li>
  112. <li><a href="#">JavaScript</a></li>
  113. </ol>
  114. </nav>
  115. <article>
  116. <h2>CSS</h2>
  117. CSS 란?
  118. <ul>
  119. <li>HTML 이라는 뼈대에 살을 입혀주는 기능</li>
  120. <li>HTML 과는 다른 형태의 문법을 갖고 있습니다.</li>
  121. </ul>
  122. </article>
  123. </body>
  124. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement