[HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야?

1. 블럭, 블럭?

 

 우린 결국 HTML에 문서를 작성하는 것이다.

 그리고 블럭은 마우스로 드래그를 했을 때 글자들에 표시가 되는 것을 말한다.

 이렇게!    (지금은 글자색과 배경으로 만들었다).

 

 HTML에서의 블럭도 마찬가지다.

 하지만 이것은 일반 문서가 아니기 때문에 내가 블럭을 주고 싶은 부분을 미리 구획해놓는 작업들이 필요하다.

 그리고 CSS에서 작업을 할 때 블럭 단위로 작업을 할 수 있다.

 그래서 블럭을 만들고, 블럭에게 이름을 준 뒤 그 이름으로 작업을 한다.

 (HTML 문서의 레이아웃을 잡는 것으로 이해해도 된다)

 

 HTML에서는 여는 태그와 닫는 태그가 존재하는 명령어들은 모두 블럭으로 묶어서 처리할 수 있다.

 그리고 블럭 요소는 자신이 감싸는 내용과는 상관없이 자신의 영역을 가지고 있다.

 물론 CSS로 이후 작업을 하지 않는 한 블럭을 잡아도 출력될 때 달라지는 부분은 없다.

 (그래서 아직 필자는 CSS를 배우지 않았지만 코드를 따와서 사용하려 한다.)

 

 이 블럭은 '블럭 요소'와 '인라인 요소'로 구성되어있다.

 

 

2. 블럭 요소

 

 사실 블럭 요소는 계속해서 쓰고 있었다.

 제목을 쓸 때도, 안에 요소들을 구현해낼 때도 블럭의 개념으로 구분해둔다.

 

 이렇게 블럭 요소를 구현할 때 가장 흔하게 쓰는 요소가 바로 <div> ;division 이다.

 

 아래의 코드를 봐보자.

        <h3>1. 블럭 요소 block</h3>
        Text1
        Text2
        Text3
        <hr>

        <div>Text1</div>
        <div>Text2</div>
        <div>Text3</div>

 

 이 코드를 보면 2-4행은 그냥 텍스트가 쓰여져 있고, 7-9행은 <div>에 텍스트가 블럭으로 구분되어져있다.

 출력 결과는 어떨까?

 2-4행은 한 줄로 표기되지만 7-9행은 각각 다른 블록이기 때문에 한 줄에 하나씩 쓰여진다.

 

 블럭 요소는 위에서 말했다시피 정말 다양한 요소들이 있기 때문에 모두 다 이곳에 기록하는 것은 어려움이 있다.

 결국 경험해보고 많이 사용해보는 것이 왕도일 것이다.

 그럼에도 자주 사용하는 것들을 적어보자면 블록 인용구( <blockquote> ) 와 <pre> 이다.

 블록 인용구는 글자의 자간등이 어느 정도 떨어져있는 상태로 문자가 적혀지게 되고 <pre> 는 그 안에 있는 문장들을 스페이스나 엔터(줄바꿈)까지 모두 반영하여 글자를 출력해준다.

 

 

3. 인라인 요소

 

 인라인 요소는 자신이 감싸는 내용과 밀접하여 내용의 크기가 자신의 크기가 되는 요소이다.

 블럭 요소가 레이 아웃에 초점이 맞춰져있다면 인라인 요소들은 텍스트를 나타내는 데 장점이 있다.

 아래와 같은 요소들이 인라인 요소들이다.

 

 <strong>진하게</strong>
 <u>밑줄</u>
 <i>기울임</i>
 <a>링크</a>
 <span>솔데스크</span>
 <textarea cols="10" rows="3"></textarea>

 

 

4. block요소와 inline 요소의 크기

 

 웹의 3요소가 있다. 

 구조, 표현, 동작.

 여기서 구조는 HTML이, 표현은 CSS가 한다.

 그래서 구조에 맞는 표현, 그리고 표현을 하기 위한 구조가 필요하기에 두 가지는 늘 연동 되어야 한다.

 

 block요소와 inline요소는 속성이 다르기 때문에 같은 글자가 써있다고 하더라도 차지하는 영역이 다르다.

 이것을 바탕으로 우리는 웹의 구조를 조정하고, 표현해내는 것이다.

 

 block은 말 그대로 하나의 블록 전체를 크기로 가져간다.

 inline은 한 텍스트의 크기만큼을 자신의 크기로 가져간다.

 아래의 그림을 보면 더 잘 이해될 것이다.

글자 수가 길어서 가로로 길게 색이 칠해진 것이 아니라 색칠된 만큼의 영역이 한 요소가 차지하고 있는 크기이다.

 

 

 이번 장에서는 블럭 요소와 인라인 요소를 작업하려면 HTML + CSS 가 꼭 필요하다는 것만 개념으로 잡으면 된다.