1. 잘 알고 있습니까?
HTML + CSS <#1>
@EBvi

2. 이 문서는 초급 퍼블리셔를
위해 작성되었습니다

3. 다소 반복적으로 이야기하는
형식으로 구성되었는데

4. 왜냐면 중요한 걸 여러 번 반복
해서 말해주는 것처럼 좋은 게
없더라고요

5. 페이지 수는 많지만 각 페이지
의 학습 강도는 높지 않으니

6. 너무 걱정하지 말고 편안하게
봐주셨으면 합니다

7. 이제 시작합니다 :)

8. 여러분은 HTML과 CSS를
어디까지 이해하고 있습니까?

9. 그런 거 너무 쉬워서 공부할
필요가 없다고 생각하고
계신가요?

10. HTML이나 CSS는 비전공자들
도 쉽게 익히고 사용할 수 있도
록 고안된 언어이긴 합니다

11. 그래서 그런지 간과하고 넘어가
는 부분이 꽤 있는 것 같더군요

12. 하지만 생각보다 스펙이 꽤 방
대하고 어렵습니다

13. 우선 이것만큼은 꼭 알아야 한
다는 것만이라도 다루어보려고
합니다

14. block-level, inline element

15. 시작하기 전에 한 가지 미리 언
급하고 싶은 점이 있는데요

16. 불운하게도 한글로 된 문서는
잘못된 정보를 담고 있는 경우
가 많습니다

17. 제대로 된 정보에 접근하려면
권위있는 문서를 보는 것이 좋
은데

18. 이러한 문서는 대개 영어로 제
작이 되어 있습니다

19. 여러분이 제대로 된 정의를 알
고 싶다면 한글로 된 문서만으
로는 부족할 수 있습니다

20. 한글이든 영어든 권위있는 문
서의 제대로 된 정의를 찾아서
읽어보세요

21. 제대로 된 정의를 모르기 때문
에 수많은 잘못이 일어납니다

22. 잔소리는 이쯤 해두고 이제 정
의부터 살펴봅시다

23. Block-level elements are
elements that create blocks
or large groupings of text

24. 이게 뭔 말인가요 ㅋㅋㅋ

25. 이 정의 외에
조금 덧붙여서 이야기하자면
다음과 같습니다

26. block-level 요소들은 text,
inline 요소, block-level 요소들
을 포함할 수 있습니다

27. 또한 block-level 요소들이 시
작될 때는 기본적으로 반드시
개행됩니다

28. 몇 가지 더 정의가 있지만 일단
은 이 정도면 충분합니다

29. 기억하셨나요?

30. block-level 요소들은 여러가지
를 담을 수 있고 기본적으로 개
행된다는 점을요

31. block-level의 대표적인
element로는 <div>가 있죠

32. 잘 아실 겁니다

33. <div>는 <p>, <img> 뿐만 아니라
<div>도 담을 수 있고, 별도의
style을 적용하지 않으면 개행되죠

34. 다음은 inline 요소입니다

35. Inline elements are elements
that are found in the text of
the HTML document.

36. text에서 찾다... 이게 무슨 말
인지 아시겠나요?

37. 애매하죠잉

38. 애매한 정의는
많은 혼란을 낳게 합니다

39. 이러한 애매한 개념이
널리 퍼져 있는데

40. 정확한 정의를 모른다면
계속 혼란상태에 있게 되겠죠

41. 자세한 정의는 w3에서 볼 수
있습니다만

42. 너무 기니까 조금만 가져옵니다
나머지는 여러분이 직접 찾아서 읽어보세요

43. Inline-level elements are those
elements of the source document that
do not form new blocks of content

44. inline 요소는 block을 포함하지
않는 형태의 요소라고 합니다

45. 이 점은 정말 중요합니다

46. 포함하지 않는 것이 왜 중요한
지는 조금 있다가 다시 다루죠

47. 이 외에도
수많은 이슈들이 있는데

48. 흔히 inline 요소는 width,
height 속성을 지정할 수 없다
고들 합니다

49. 정말인가요?
확실한가요?

50. 네, 맞습니다
잠시 헷갈린 분들은 반성하세요

51. 하지만 IE에서는
inline이라고 해도 높
이가 지정됩니다

52. 이건 비표준으로 렌더링하고
있는 것이기 때문에

53. 표준에 맞춰 코딩하실 여러분은
IE의 비표준이 아니라

54. 제대로 된 정의(=표준)에 맞춰
코딩하셔야 합니다

55. 이제 아셨겠죠?

56. inline에는 width, height를 지
정할 수 없어요

57. 자, 다시 돌아가봅시다

58. 처음 정의를 통해 inline에는
block-level 요소를 포함할 수
없다는 걸 알았습니다

59. 즉 <span> 안에 <div>를 넣지
말라는 말이죠

60. inline 요소 안에 block-level 요
소를 넣을 수 없으니까요

61. 하지만 이 이슈는 단순한 개념
만의 문제가 아닙니다

62. 여러분이 정말 많이 쓰는
<a>는 inline 요소입니다

63. <a> 안에 <div>를 넣을 수 있
느냐 없느냐는 지금도 계속 화
제가 되는 큰 논란거리입니다

64. 여러분은 어떻게 생각하시나요?

65. 결론부터 이야기하자면

66. html5 규격에서는
<a> 안에 block-level 요소를
포함할 수 있게 되었습니다

67. 하지만 향후 몇 년간 여러분이
코딩할 html4.01 규격에서는

68. 여전히 <a> 안에 block-level
요소를 넣는 것은 죄악입니다

69. 이렇게 생각할 수도 있습니다

70. 그럼 <a>에 display:block을
주면 해결되는 거 아냐?

72. 슬프지만 이렇게 해도
w3의 validator는 잘못되었
다고 경고합니다

73. 그래서 나온
두 가지 타협안이 있죠

74. 하나는 그냥 validator를
무시하는 겁니다

75. validator라고 완벽할까요?

76. desc엔 inline과 block-level만
다루고 있지, <a>를 직접 다룬
건 없습니다

77. validator는 그저 권고하고 있
는 거지 display:block을 주면
된 것이 아닌가?

78. ~라는 시점이 있고

79. validator를 맞추기 위해

80. <div> 대신에 <span>을 쓰는
방법이 있습니다

82. 이렇게 코딩하면 validator를
무사히 통과하게 됩니다

83. 하지만
어느 것이 옳은지 그른지는

84. 여러분의 철학에 따라서 정할
수 밖에 없습니다

85. 코딩하다 보면 이러한 개념의 문
제를 수도 없이 만나게 됩니다

86. 여러분이 고민하지 않고 그냥
렌더링 되는 대로 코딩만 하고
있다면

87. 좋은 퍼블리셔가
되기 어렵습니다

88. 조금만 더 해보죠

89. <p>는 block-level 요소입니까?
아니면 inline 요소입니까?

90. 헷갈리셨나요?

91. block-level 요소입니다

92. 이런 이야길 하려는 건 아니고

93. <p>는 다른 block-level 요소
와는 다른 독특한 특징을 갖고
있습니다

94. <p>는 block-level 요소임에도
불구하고

95. 오직 inline 요소만을 포함할 수
있습니다

96. The P element represents a
paragraph. It cannot contain block-
level elements (including P itself).

97. 점점 혼란스러워지죠

98. 모든 block-level 요소가 동일
한 규칙을 갖고 있는 건 아니니
까요

99. 이제 아시겠죠? <p> 안에
<div>를 쓰면 안됩니다

100. 물론 써도 잘만 렌더링 됩니다

101. 렌더링 된다는 건 여러분이 잘
하고 있다는 뜻이 아닙니다

102. 표준을 왜 지켜야 하는지에 대
해 구구절절 늘어놓을 생각은
없습니다만

103. 여러분이
돈을 받고 일하는 프로라면

104. 이러한 이슈에 대해 잘 알고 있
어야 합니다

105. 또한 <p>는 문단(paragraph)
을 표현하는 마크업입니다

106. <p>는 이상하리만치 오해가
많은 태그 중 하나입니다

107. <p>를 마치 레이아웃의 하나
처럼 표현하는 분도 있는데

108. 그런 건 <div>를 사용하세요

109. 표현과 콘텐츠는
분리되어야 합니다

110. <p>는 표현하기 위해 사용하
는 마크업이 아니에요

111. 콘텐츠를 담는 마크업입니다

112. 하는 김에 하나만 더 해볼까요?

113. <li>는 block-level을 포함할
수 있을까요? 아니면 inline만
을 포함할 수 있을까요?

114. 점점 헷갈리죠?

115. 만약 여러분이 이런 문제에 답
이 잘 떠오르지 않는다면

116. 지금이라도 늦지 않았어요

117. 빨리 w3.org로 달려가세요

118. 아, 정답을 말해야죠

119. <li>는 block-level 요소이므로
모두 포함할 수 있습니다

120. 이것 말고도 정말 많이 있습니다

121. 그래서 아무리 공부해도 잘 안
외워지고 잊어버리곤 해요

122. 하지만 정말 자주 쓰이는 건데

123. 이 정도는 알고 있어야
하지 않을까요?

124. float, clear

125. 그럼 바로 float의 정의부터
시작해봅시다

126. A float is a box that is shifted
to the left or right on the
current line.

127. box를 왼쪽이나 오른쪽으로
이동시키는 것

128. The most interesting characteristic of a float
(or "floated" or "floating" box) is that content
may flow along its side (or be prohibited from
doing so by the ‘clear’ property).

129. floated box는 그 측면(side)에
붙어 흐르게(flow) 된다

130. 여기까지는
다 아는 내용일 겁니다

131. float이 어려운 건
정의가 아니라 동작 방식이
어렵기 때문입니다

132. 계속해서 더 자세히 봅시다

133. 초보 퍼블리셔는 대개 문서 내에서
부유 요소가 놓이는 위치를 정확히
이해하지 못해 혼란을 겪습니다

134. 여기가 왜 이렇게 틀어지죠?
http://www.complexspiral.com/publications/containing-floats/

135. 이렇게 틀어지는 레이아웃을
종종 보셨을 겁니다

136. 해결하는 방법을 아시는 분도
있고 아닌 분도 계실텐데

137. 잘 알려진대로

138. 부모에게 float을 주는
방법이 있고

139. 다음 요소가 clear를
가지고 있으면 해결됩니다

140. 하지만 왜 부유 박스는 저렇게
동작할까요?

141. 저걸 좀 이야기해봅시다

142. float은 Netscafe 1.1에 구현되
고 HTML 2.0에 정의되었습니다

143. <table>을 쓰지 않고
신문 기사의 레이아웃을
표현하기 위해서요

144. 이렇게 삽입되도록요

145. 문장의 흐름을 방해하지 않고
레이아웃 한 편에 붙어 있죠

146. 예를 들어볼까요

147. float의 특성을 설명하기 위해
사용되는 정말 유명한 예제죠

148. <img>에 float:left를 주었습니다

149. 그런데 영역이 이미지까지 감싸질 않네요?

150. 지금 보신 것이 float된 박스의
특성입니다

151. 한 가지 의문점이 생기죠?

152. 이렇게 영역 전체를 감싸야 하는 게 아닌가?

153. 아직 float된 박스에 대한 이해
가 부족하면 그렇게 생각하실
수 있지만

154. 이렇게 구현된 건 다 이유가 있
기 때문입니다

155. float된 박스가 다음 문단을 방
해하면 안되기 때문이죠

156. 문단을 더 추가해봅시다

157. 문단이 계속되더라도 흐름이 방해되지 않아요

158. 이제 왜 그렇게 구현되었는지
이해가 가시나요?

159. 그럼 이제 이미지를
하나 더 추가해볼까요?

160. 우왓! 끔찍한 일이 일어났군요

161. 이런 일은 float의 특성을 이해
하지 못했을 경우 정말 빈번하
게 발생합니다

162. 하지만 조금만 생각해보세요

163. 이렇게 보여지는 것이
최선입니다

164. 지정한 방향과
그리고 그 면에 붙기 때문이에요

165. 면을 따라 붙지 않도록 하려면
그렇게 붙지 말라고 알려줘야
합니다

166. 드디어 clear가 등장합니다

167. 여기에 clear:left를 주었습니다

168. 문단을 더 추가해도

169. 오오! 예상한 대로 동작하네요!

170. 이제 여러분은 일반적인 흐름
(normal flow)에서

171. float을 잘 다룰 수 있게
되었습니다

172. float에 대해서는 할 이야기가
정말 많은데

173. 하나만 더 이야기하고
마칠까 합니다

174. float된 요소에는 width를 지정
하는 편이 좋습니다

175. 지정하지 않으면 암시적으로
하위 요소로부터 계산되는데

176. 이럴 경우 결과를
예측하기 어렵게 됩니다

177. 각각의 <DIV>에 float:left만을 주었습니다

178. 이 예에서 알 수 있듯이 여러분
은 각각의 요소로부터 결과를
예측하기 어렵습니다

179. 여러분이 튼튼한 레이아웃을
구성하려면

180. 명시적으로 width를 알려주세요

181. 정리

182. 되도록 권위있는 문서를 보고
올바른 정의를 숙지하세요

183. 애매하고 잘못된 정의는
혼란을 가중시킵니다

184. inline 요소에는 width, height
를 지정할 수 없습니다

185. inline 요소는 block-level 요소
를 포함할 수 없습니다

186. <p>는 오직 inline 요소만을 포
함할 수 있습니다

187. float의 흐름을 깨려면 clear를
사용하세요

188. 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

189. 감사합니다