2. HTML5 태그 성격 2가지.
HTML 태그 성격엔 대표적으로 2가지가 있다.
바로 block과 Inline 이라는 성격이다.
아직 태그를 하나도 언급하지 않았고 정리되지는 않았지만, 위 성격을 가진 태그들이 각 각 있다는 것을 먼저 공부해도 상관없을 것 같다.
위 성격을 바꿀 수 없는 것은 아니다. 상황에 따라 바꿀 수 있다.
1. Block
Block은 단어의 느낌처럼 뭔가 차곡차곡 쌓아올릴 것 같은 장난감 블럭 같은 느낌과, 도로가 나뉘는 구역을 표현 하는 느낌이 있다.
위 단어의 느낌처럼, 위 성격을 가진 태그는 작성시 연속적으로 표현되지 않는다.
다시 말하면 block 성격의 태그는 마치 우리가 Enter 키를 치는 것과 같은 효과가 있다. 줄바꿈이 있다는 이야기다.
상상이 되는가? 상상이 되지 않는다면 그냥 이런게 있구나 라고 알고 넘어가면 될 것 같다.
그래도 알고 싶으신 분을 위해 간단히 설명하면, <div> 라는 섹션을 정의하는 태그가 있다.
지난 번 정리한 기본구조 중 <body> </body>태그 안에 아래 태그를 집어 넣으면
<div style="background-color:yellow">yellow</div><div style="background-color:blue">blue</div>
2. Inline
줄바꿔 태그를 작성해도 위와 같이 줄바꿈 없이 표현됨을 알 수 있다.
3. 성격을 바꾸는 방법.
태그의 성격은 HTML 기본 구조 중 <head> </head> 태그 안에서 바꿀 수 있고, CSS에 적용시켜 바꿀 수도 있다.
CSS는 아직 언급하지 않았으므로, HTML에서 성격 바꾸는 법을 설명하도록 하겠다.
위 언급한 것 처럼 <head></head> 태그 안에 적용시킨다.
<style>
a {display : block; }
div {display : inline; }
</style>
위 소스를 해석하자면 <style> 태그 안에 a 태그는 { 보여줘 : 블럭으로; } div 태그는 { 보여줘 : 라인안으로; } </style>
라는 뜻이 된다.
이렇게 태그의 성격을 바꿀 수 있다.
그러나 페이지 레이아웃을 짜다보면 같은 태그를 쓰더라도 어느 부분은 block 으로, 어느 부분은 inline 성격으로 사용하고 싶은 순간이 온다. 물론 가능하다. 그러나 그 설명은 잠시 미뤄두도록 하겠다.
오늘은 그냥 태그에도 성격이 있다 라는 것을 정리 한 것이다.