HTML - Display

HTML - 블록 레벨(Block Level) 요소와 인라인(Inline) 요소와

1. 블록요소

• DIV, H1, P
• 사용 가능한 최대 가로, 너비를 사용한다.
• 크기를 지정할 수 있다.
• width : 100%, height : 0%가 디폴트이다.
• 출력물이 수직으로 쌓인다.(자동으로 개행)
• margin, padding을 위, 아래, 좌, 우 모두 사용 가능하다.
• Layout을 잡는 용도로 많이 사용된다.
• display: block;   =>  디폴트이다.

2. 인라인 요소

• SPAN, IMG
• 필요한 만큼의 너비를 사용한다.
• 크기를 사용자가 지정할 수 없다. (출력하는 문자열을 감싸는 만큼의 영역을 가진다.)
• width : 0, height : 0이 디폴트이다.
• 출력물이 수평으로 쌓인다. (개행이 X)
• margin, padding을 좌, 우 모두 사용 가능하다. (위, 아래 사용 X)
• Text 출력 용도로 많이 사용된다.
• display: inline;    =>  디폴트이다.

3. display : 인라인 요소 사용을 지정한다.

• display: block;
  ㄴ 블록 요소로 지정. (크기 지정이 가능하다.)
• display: inline;
  ㄴ 인라인 요소로 지정한다. (크기 지정이 X)

빨강 : block / 노랑 : inline