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

@EBvi

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

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

왜냐면 중요한 걸 여러 번 반복해서 말해주는 것처럼 좋은 게

없더라고요

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

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

이제 시작합니다 :)

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

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

계신가요?

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

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

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

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

합니다

block-level, inline element

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

불운하게도 한글로 된 문서는 잘못된 정보를 담고 있는 경우

가 많습니다

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

은데

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

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

한글이든 영어든 권위있는 문서의 제대로 된 정의를 찾아서

읽어보세요

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

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

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

이게 뭔 말인가요 ㅋㅋㅋ

이 정의 외에조금 덧붙여서 이야기하자면

다음과 같습니다

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

또한 block-level 요소들이 시작될 때는 기본적으로 반드시

개행됩니다

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

기억하셨나요?

block-level 요소들은 여러가지를 담을 수 있고 기본적으로 개

행된다는 점을요

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

잘 아실 겁니다

<div>는 <p>, <img> 뿐만 아니라 <div>도 담을 수 있고, 별도의

style을 적용하지 않으면 개행되죠

다음은 inline 요소입니다

Inline elements are elements that are found in the text of

the HTML document.

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

애매하죠잉

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

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

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

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

너무 기니까 조금만 가져옵니다

나머지는 여러분이 직접 찾아서 읽어보세요

Inline-level elements are those elements of the source document that

do not form new blocks of content

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

이 점은 정말 중요합니다

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

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

흔히 inline 요소는 width, height 속성을 지정할 수 없다

고들 합니다

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

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

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

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

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

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

이제 아셨겠죠?

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

자, 다시 돌아가봅시다

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

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

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

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

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

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

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

결론부터 이야기하자면

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

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

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

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

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

슬프지만 이렇게 해도w3의 validator는 잘못되었

다고 경고합니다

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

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

validator라고 완벽할까요?

desc엔 inline과 block-level만 다루고 있지, <a>를 직접 다룬

건 없습니다

validator는 그저 권고하고 있는 거지 display:block을 주면

된 것이 아닌가?

~라는 시점이 있고

validator를 맞추기 위해

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

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

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

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

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

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

있다면

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

조금만 더 해보죠

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

헷갈리셨나요?

block-level 요소입니다

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

<p>는 다른 block-level 요소와는 다른 독특한 특징을 갖고

있습니다

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

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

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

점점 혼란스러워지죠

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

까요

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

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

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

표준을 왜 지켜야 하는지에 대해 구구절절 늘어놓을 생각은

없습니다만

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

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

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

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

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

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

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

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

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

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

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

점점 헷갈리죠?

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

지금이라도 늦지 않았어요

빨리 w3.org로 달려가세요

아, 정답을 말해야죠

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

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

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

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

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

float, clear

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

A float is a box that is shifted to the left or right on the

current line.

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

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

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

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

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

계속해서 더 자세히 봅시다

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

http://www.complexspiral.com/publications/containing-floats/

여기가 왜 이렇게 틀어지죠?

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

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

잘 알려진대로

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

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

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

저걸 좀 이야기해봅시다

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

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

이렇게 삽입되도록요

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

예를 들어볼까요

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

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

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

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

한 가지 의문점이 생기죠?

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

아직 float된 박스에 대한 이해가 부족하면 그렇게 생각하실

수 있지만

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

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

문단을 더 추가해봅시다

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

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

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

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

이런 일은 float의 특성을 이해하지 못했을 경우 정말 빈번하

게 발생합니다

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

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

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

면을 따라 붙지 않도록 하려면그렇게 붙지 말라고 알려줘야

합니다

드디어 clear가 등장합니다

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

문단을 더 추가해도

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

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

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

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

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

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

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

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

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

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

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

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

정리

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

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

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

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

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

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

references from• http://www.w3.org/TR/CSS2/

visuren.html#floats

• http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

• http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct

• http://stackoverflow.com/questions/3303008/block-level-elements-in-a-tag-validation-vs-usability

• http://www.ibm.com/developerworks/kr/library/wa-css/

• http://css.maxdesign.com.au/floatutorial/introduction.htm

• http://www.complexspiral.com/publications/containing-floats/

• http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

감사합니다