5-1. HTML - 영역 관련 태그

영역 관련 태그에는 block 형식과 inline형식이 있다.

 

• block 형식
  • 공간을 수직 분할 한다. == 수직선을 분할한다 == 가로로 분할한다.
  • 크기를 지정하는 css 속성인 width, height를 사용할 수 있다.
  • 사용 가능 : p/pre(문단나누기), h1~h6(제목 영역 나누기), hr(수평선 넣어 화면 나누기), div(영역 나누기)

 

• inline 형식
  • 공간을 수평 분할 한다 == 수평선을 분할한다 == 세로로 분할한다.
  • 크기를 지정하는 css 속성인 width, height를 사용할 수 없다.
  • 사용 가능 :  strong/b(영역 내 글자 굵게), em/i(영역 내 글자 기울이기), mark(글자에 노란 배경), span(한 줄 내 열 나누기)

 

• block / inline의 차이점 1 : 줄바꿈(영역 분할 방식)
  • block형식 태그는 한 줄을 모두 차지하기 때문에 뒤에 작성되는 내용은 다음 줄에 출력이 됨.
  • inline형식 태그는 한 줄 내에서 작성된 내용 만큼의 열을 차지하기 때문에 줄을 바꾸지 않고 이어서 출력됨.

수직분할 관련 작성 코드 화면	웹에서 출력된 화면
수평분할 관련 작성 코드 화면	웹에서 출력된 화면

inline형식의 HTML 문서에서 엔터를 입력해서 작성하는 경우 출력되는 화면에서 한 칸 띄어쓰기 된 형태로 출력된다. 
붙여서 출력하고 싶으면 엔터, 띄어쓰기 없이 태그를 작성하면 된다.

 

• block / inline 을 이용한 화면 설계

코드 작성 화면	웹에서 출력된 화면

테이블을 쓰지 않고 div로 수직 분할을 하고 div안에 span으로 수평 분할을 해서 화면 설계를 하기도 한다.