잘 알고 있습니까? html + css <#1>

1,399 views
1,340 views

Published on

Published in: Education
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,399
On SlideShare
0
From Embeds
0
Number of Embeds
702
Actions
Shares
0
Downloads
17
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

잘 알고 있습니까? html + css <#1>

  1. 1. 잘 알고 있습니까?HTML + CSS <#1> @EBvi
  2. 2. 이 문서는 초급 퍼블리셔를 위해 작성되었습니다
  3. 3. 다소 반복적으로 이야기하는 형식으로 구성되었는데
  4. 4. 왜냐면 중요한 걸 여러 번 반복해서 말해주는 것처럼 좋은 게 없더라고요
  5. 5. 페이지 수는 많지만 각 페이지 의 학습 강도는 높지 않으니
  6. 6. 너무 걱정하지 말고 편안하게 봐주셨으면 합니다
  7. 7. 이제 시작합니다 :)
  8. 8. 여러분은 HTML과 CSS를어디까지 이해하고 있습니까?
  9. 9. 그런 거 너무 쉬워서 공부할 필요가 없다고 생각하고 계신가요?
  10. 10. HTML이나 CSS는 비전공자들도 쉽게 익히고 사용할 수 있도 록 고안된 언어이긴 합니다
  11. 11. 그래서 그런지 간과하고 넘어가는 부분이 꽤 있는 것 같더군요
  12. 12. 하지만 생각보다 스펙이 꽤 방 대하고 어렵습니다
  13. 13. 우선 이것만큼은 꼭 알아야 한다는 것만이라도 다루어보려고 합니다
  14. 14. block-level, inline element
  15. 15. 시작하기 전에 한 가지 미리 언 급하고 싶은 점이 있는데요
  16. 16. 불운하게도 한글로 된 문서는잘못된 정보를 담고 있는 경우 가 많습니다
  17. 17. 제대로 된 정보에 접근하려면권위있는 문서를 보는 것이 좋 은데
  18. 18. 이러한 문서는 대개 영어로 제 작이 되어 있습니다
  19. 19. 여러분이 제대로 된 정의를 알고 싶다면 한글로 된 문서만으 로는 부족할 수 있습니다
  20. 20. 한글이든 영어든 권위있는 문서의 제대로 된 정의를 찾아서 읽어보세요
  21. 21. 제대로 된 정의를 모르기 때문에 수많은 잘못이 일어납니다
  22. 22. 잔소리는 이쯤 해두고 이제 정 의부터 살펴봅시다
  23. 23. Block-level elements areelements that create blocks or large groupings of text
  24. 24. 이게 뭔 말인가요 ㅋㅋㅋ
  25. 25. 이 정의 외에조금 덧붙여서 이야기하자면 다음과 같습니다
  26. 26. block-level 요소들은 text,inline 요소, block-level 요소들 을 포함할 수 있습니다
  27. 27. 또한 block-level 요소들이 시작될 때는 기본적으로 반드시 개행됩니다
  28. 28. 몇 가지 더 정의가 있지만 일단 은 이 정도면 충분합니다
  29. 29. 기억하셨나요?
  30. 30. block-level 요소들은 여러가지를 담을 수 있고 기본적으로 개 행된다는 점을요
  31. 31. block-level의 대표적인element로는 <div>가 있죠
  32. 32. 잘 아실 겁니다
  33. 33. <div>는 <p>, <img> 뿐만 아니라 <div>도 담을 수 있고, 별도의style을 적용하지 않으면 개행되죠
  34. 34. 다음은 inline 요소입니다
  35. 35. Inline elements are elements that are found in the text of the HTML document.
  36. 36. text에서 찾다... 이게 무슨 말 인지 아시겠나요?
  37. 37. 애매하죠잉
  38. 38. 애매한 정의는많은 혼란을 낳게 합니다
  39. 39. 이러한 애매한 개념이 널리 퍼져 있는데
  40. 40. 정확한 정의를 모른다면계속 혼란상태에 있게 되겠죠
  41. 41. 자세한 정의는 w3에서 볼 수 있습니다만
  42. 42. 너무 기니까 조금만 가져옵니다 나머지는 여러분이 직접 찾아서 읽어보세요
  43. 43. Inline-level elements are thoseelements of the source document that do not form new blocks of content
  44. 44. inline 요소는 block을 포함하지 않는 형태의 요소라고 합니다
  45. 45. 이 점은 정말 중요합니다
  46. 46. 포함하지 않는 것이 왜 중요한지는 조금 있다가 다시 다루죠
  47. 47. 이 외에도수많은 이슈들이 있는데
  48. 48. 흔히 inline 요소는 width,height 속성을 지정할 수 없다 고들 합니다
  49. 49. 정말인가요?확실한가요?
  50. 50. 네, 맞습니다잠시 헷갈린 분들은 반성하세요
  51. 51. 하지만 IE에서는inline이라고 해도 높 이가 지정됩니다
  52. 52. 이건 비표준으로 렌더링하고 있는 것이기 때문에
  53. 53. 표준에 맞춰 코딩하실 여러분은 IE의 비표준이 아니라
  54. 54. 제대로 된 정의(=표준)에 맞춰 코딩하셔야 합니다
  55. 55. 이제 아셨겠죠?
  56. 56. inline에는 width, height를 지 정할 수 없어요
  57. 57. 자, 다시 돌아가봅시다
  58. 58. 처음 정의를 통해 inline에는block-level 요소를 포함할 수 없다는 걸 알았습니다
  59. 59. 즉 <span> 안에 <div>를 넣지 말라는 말이죠
  60. 60. inline 요소 안에 block-level 요 소를 넣을 수 없으니까요
  61. 61. 하지만 이 이슈는 단순한 개념 만의 문제가 아닙니다
  62. 62. 여러분이 정말 많이 쓰는<a>는 inline 요소입니다
  63. 63. <a> 안에 <div>를 넣을 수 있느냐 없느냐는 지금도 계속 화제가 되는 큰 논란거리입니다
  64. 64. 여러분은 어떻게 생각하시나요?
  65. 65. 결론부터 이야기하자면
  66. 66. html5 규격에서는<a> 안에 block-level 요소를 포함할 수 있게 되었습니다
  67. 67. 하지만 향후 몇 년간 여러분이코딩할 html4.01 규격에서는
  68. 68. 여전히 <a> 안에 block-level요소를 넣는 것은 죄악입니다
  69. 69. 이렇게 생각할 수도 있습니다
  70. 70. 그럼 <a>에 display:block을 주면 해결되는 거 아냐?
  71. 71. 슬프지만 이렇게 해도w3의 validator는 잘못되었 다고 경고합니다
  72. 72. 그래서 나온두 가지 타협안이 있죠
  73. 73. 하나는 그냥 validator를 무시하는 겁니다
  74. 74. validator라고 완벽할까요?
  75. 75. desc엔 inline과 block-level만다루고 있지, <a>를 직접 다룬 건 없습니다
  76. 76. validator는 그저 권고하고 있는 거지 display:block을 주면 된 것이 아닌가?
  77. 77. ~라는 시점이 있고
  78. 78. validator를 맞추기 위해
  79. 79. <div> 대신에 <span>을 쓰는 방법이 있습니다
  80. 80. 이렇게 코딩하면 validator를 무사히 통과하게 됩니다
  81. 81. 하지만어느 것이 옳은지 그른지는
  82. 82. 여러분의 철학에 따라서 정할 수 밖에 없습니다
  83. 83. 코딩하다 보면 이러한 개념의 문제를 수도 없이 만나게 됩니다
  84. 84. 여러분이 고민하지 않고 그냥렌더링 되는 대로 코딩만 하고 있다면
  85. 85. 좋은 퍼블리셔가되기 어렵습니다
  86. 86. 조금만 더 해보죠
  87. 87. <p>는 block-level 요소입니까? 아니면 inline 요소입니까?
  88. 88. 헷갈리셨나요?
  89. 89. block-level 요소입니다
  90. 90. 이런 이야길 하려는 건 아니고
  91. 91. <p>는 다른 block-level 요소와는 다른 독특한 특징을 갖고 있습니다
  92. 92. <p>는 block-level 요소임에도 불구하고
  93. 93. 오직 inline 요소만을 포함할 수 있습니다
  94. 94. The P element represents aparagraph. It cannot contain block- level elements (including P itself).
  95. 95. 점점 혼란스러워지죠
  96. 96. 모든 block-level 요소가 동일한 규칙을 갖고 있는 건 아니니 까요
  97. 97. 이제 아시겠죠? <p> 안에<div>를 쓰면 안됩니다
  98. 98. 물론 써도 잘만 렌더링 됩니다
  99. 99. 렌더링 된다는 건 여러분이 잘 하고 있다는 뜻이 아닙니다
  100. 100. 표준을 왜 지켜야 하는지에 대해 구구절절 늘어놓을 생각은 없습니다만
  101. 101. 여러분이돈을 받고 일하는 프로라면
  102. 102. 이러한 이슈에 대해 잘 알고 있 어야 합니다
  103. 103. 또한 <p>는 문단(paragraph) 을 표현하는 마크업입니다
  104. 104. <p>는 이상하리만치 오해가 많은 태그 중 하나입니다
  105. 105. <p>를 마치 레이아웃의 하나 처럼 표현하는 분도 있는데
  106. 106. 그런 건 <div>를 사용하세요
  107. 107. 표현과 콘텐츠는분리되어야 합니다
  108. 108. <p>는 표현하기 위해 사용하 는 마크업이 아니에요
  109. 109. 콘텐츠를 담는 마크업입니다
  110. 110. 하는 김에 하나만 더 해볼까요?
  111. 111. <li>는 block-level을 포함할수 있을까요? 아니면 inline만 을 포함할 수 있을까요?
  112. 112. 점점 헷갈리죠?
  113. 113. 만약 여러분이 이런 문제에 답 이 잘 떠오르지 않는다면
  114. 114. 지금이라도 늦지 않았어요
  115. 115. 빨리 w3.org로 달려가세요
  116. 116. 아, 정답을 말해야죠
  117. 117. <li>는 block-level 요소이므로 모두 포함할 수 있습니다
  118. 118. 이것 말고도 정말 많이 있습니다
  119. 119. 그래서 아무리 공부해도 잘 안 외워지고 잊어버리곤 해요
  120. 120. 하지만 정말 자주 쓰이는 건데
  121. 121. 이 정도는 알고 있어야 하지 않을까요?
  122. 122. float, clear
  123. 123. 그럼 바로 float의 정의부터 시작해봅시다
  124. 124. A float is a box that is shifted to the left or right on the current line.
  125. 125. box를 왼쪽이나 오른쪽으로 이동시키는 것
  126. 126. The most interesting characteristic of a float(or "floated" or "floating" box) is that contentmay flow along its side (or be prohibited from doing so by the ‘clear’ property).
  127. 127. floated box는 그 측면(side)에 붙어 흐르게(flow) 된다
  128. 128. 여기까지는다 아는 내용일 겁니다
  129. 129. float이 어려운 건정의가 아니라 동작 방식이 어렵기 때문입니다
  130. 130. 계속해서 더 자세히 봅시다
  131. 131. 초보 퍼블리셔는 대개 문서 내에서부유 요소가 놓이는 위치를 정확히 이해하지 못해 혼란을 겪습니다
  132. 132. 여기가 왜 이렇게 틀어지죠?http://www.complexspiral.com/publications/containing-floats/
  133. 133. 이렇게 틀어지는 레이아웃을 종종 보셨을 겁니다
  134. 134. 해결하는 방법을 아시는 분도 있고 아닌 분도 계실텐데
  135. 135. 잘 알려진대로
  136. 136. 부모에게 float을 주는 방법이 있고
  137. 137. 다음 요소가 clear를가지고 있으면 해결됩니다
  138. 138. 하지만 왜 부유 박스는 저렇게 동작할까요?
  139. 139. 저걸 좀 이야기해봅시다
  140. 140. float은 Netscafe 1.1에 구현되고 HTML 2.0에 정의되었습니다
  141. 141. <table>을 쓰지 않고신문 기사의 레이아웃을 표현하기 위해서요
  142. 142. 이렇게 삽입되도록요
  143. 143. 문장의 흐름을 방해하지 않고레이아웃 한 편에 붙어 있죠
  144. 144. 예를 들어볼까요
  145. 145. float의 특성을 설명하기 위해사용되는 정말 유명한 예제죠
  146. 146. <img>에 float:left를 주었습니다
  147. 147. 그런데 영역이 이미지까지 감싸질 않네요?
  148. 148. 지금 보신 것이 float된 박스의 특성입니다
  149. 149. 한 가지 의문점이 생기죠?
  150. 150. 이렇게 영역 전체를 감싸야 하는 게 아닌가?
  151. 151. 아직 float된 박스에 대한 이해가 부족하면 그렇게 생각하실 수 있지만
  152. 152. 이렇게 구현된 건 다 이유가 있 기 때문입니다
  153. 153. float된 박스가 다음 문단을 방 해하면 안되기 때문이죠
  154. 154. 문단을 더 추가해봅시다
  155. 155. 문단이 계속되더라도 흐름이 방해되지 않아요
  156. 156. 이제 왜 그렇게 구현되었는지 이해가 가시나요?
  157. 157. 그럼 이제 이미지를하나 더 추가해볼까요?
  158. 158. 우왓! 끔찍한 일이 일어났군요
  159. 159. 이런 일은 float의 특성을 이해하지 못했을 경우 정말 빈번하 게 발생합니다
  160. 160. 하지만 조금만 생각해보세요
  161. 161. 이렇게 보여지는 것이 최선입니다
  162. 162. 지정한 방향과그리고 그 면에 붙기 때문이에요
  163. 163. 면을 따라 붙지 않도록 하려면그렇게 붙지 말라고 알려줘야 합니다
  164. 164. 드디어 clear가 등장합니다
  165. 165. 여기에 clear:left를 주었습니다
  166. 166. 문단을 더 추가해도
  167. 167. 오오! 예상한 대로 동작하네요!
  168. 168. 이제 여러분은 일반적인 흐름 (normal flow)에서
  169. 169. float을 잘 다룰 수 있게 되었습니다
  170. 170. float에 대해서는 할 이야기가 정말 많은데
  171. 171. 하나만 더 이야기하고 마칠까 합니다
  172. 172. float된 요소에는 width를 지정 하는 편이 좋습니다
  173. 173. 지정하지 않으면 암시적으로하위 요소로부터 계산되는데
  174. 174. 이럴 경우 결과를예측하기 어렵게 됩니다
  175. 175. 각각의 <DIV>에 float:left만을 주었습니다
  176. 176. 이 예에서 알 수 있듯이 여러분은 각각의 요소로부터 결과를 예측하기 어렵습니다
  177. 177. 여러분이 튼튼한 레이아웃을 구성하려면
  178. 178. 명시적으로 width를 알려주세요
  179. 179. 정리
  180. 180. 되도록 권위있는 문서를 보고 올바른 정의를 숙지하세요
  181. 181. 애매하고 잘못된 정의는 혼란을 가중시킵니다
  182. 182. inline 요소에는 width, height 를 지정할 수 없습니다
  183. 183. inline 요소는 block-level 요소 를 포함할 수 없습니다
  184. 184. <p>는 오직 inline 요소만을 포 함할 수 있습니다
  185. 185. float의 흐름을 깨려면 clear를 사용하세요
  186. 186. references from• http://www.w3.org/TR/CSS2/ • http://www.ibm.com/developerworks/ visuren.html#floats kr/library/wa-css/• http:// • http://css.maxdesign.com.au/ www.webdesignfromscratch.com/ floatutorial/introduction.htm html-css/css-block-and-inline/ • http://www.complexspiral.com/• http://stackoverflow.com/questions/ publications/containing-floats/ 1827965/is-putting-a-div-inside-an- anchor-ever-correct • http://coding.smashingmagazine.com/ 2009/10/19/the-mystery-of-css-float-• http://stackoverflow.com/questions/ property/ 3303008/block-level-elements-in-a- tag-validation-vs-usability
  187. 187. 감사합니다

×