이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
html에서는 모든것이 요소(element, 이하 엘리먼트)로 되어있다. 다른 말로는 태그이다.
엄밀히 말하면 둘은 약간 다른 뜻인데 객체와 클래스를 혼용해서 쓰는것 마냥 사실상 동의어 처럼 쓰인다.
문제는 여러분들이 이 요소들을 정확하게 알아야한다는 것이다.
html, body, head, meta등의 엘리먼트등을 제외하면 모든 엘리먼트는 딱 두가지로 나뉘게 된다.
블록 엘리먼트 vs 인라인 엘리먼트
차이를 알기전에 각각에 어떤게 속하는지 알아보도록 하자.
블록 엘리먼트 : 무언가를 담는 그릇
HTML5표시가 있는 것은 HTML5이후로 추가된 것으로 4에서는 사용할 수 없음을 의미한다.
이 태그 들은 잘보면 다 무언가를 품기위해서 존재하는 태그라는 것을 알 수 있다.
인라인 엘리먼트 : 데이터를 제공하는 요소
이 태그 들은 사실 어떤것은 block태그 같은 느낌이 드는데 사실 자주 쓰이는 것은 구별 가능하므로 몇번 보다보면 쉬이 구별할 수 있다.
아니면 기록해두고 검색해서 필요할 때마다 찾는 방법도 있다.
둘을 왜 구분하는데?
그냥 태그를 쓰면돼지 굳이 왜 구분하는지 의문이 들 수 있다.
사실 필자도 옛날에는 별생각 없이 썼었다.
하지만 둘은 사실 어마어마한 차이가 있다.
블록 엘리먼트의 특징
1. 다른 블록 엘리먼트와 인라인 엘리먼트 모두를 적재가능하다.
2. 일반적으로 블록엘리먼트는 새로운 줄에서 시작한다.(줄바꿈이 일어난다.)
3. 크기를 사용자가 지정할 수 있다.
4. vertical-align과 text-align이 작동하지 않는다.
인라인 엘리먼트의 특징
1. 다른 인라인 엘리먼트는 적재가 가능하지만 다른 블록엘리먼트는 적재할 수 없다.
2. 일반적으로 인라인엘리먼트는 전 엘리먼트 바로옆에 붙어서 시작한다.(줄바꿈이 일어나지 않는다.)
3. 일반적으로 사용자가 크기를 멋대로 지정할 수 없다. 자연히 정해지는 크기를 그대로 사용한다.(width, height불가.)
4. vertical-algin과 text-algin이 모두 작동한다.
모두 주옥같은 이야기이다. 이를 알아야 나중에 display를 이해할 수 있다.
먼저 div를 둘 호출 하는 예제를 보도록 하자.
둘은 옆으로 나란히 붙지 못하고 뒤에 호출한 녀석은 아래로 내려갔다.
그 이유는 앞의 mydiv1뒤에 붙은 mydiv2가 블록 엘리먼트이기 때문이다.
See the Pen inline-inline by Teajung Kim (@kukaro) on CodePen.
반대로 인라인태그는 이렇게 줄바꿈이 되지 않고 연달아서 붙게 된다.
이렇게 블록 엘리먼트와 인라인 엘리먼트를 알아보았다.
css가 마음대로 적용안될것이다. 특히 인라인의 경우는 뭐 내리고 싶으면 br태그 쓰면되는데 블록 엘리먼트는 짜증날 뿐이다.
물론 방법이 다 있다, 이를 다음 섹션에서 알려드리도록 하겠다.