[HTML 공간 분할] 블록과 인라인

공부 참고 : http://tcpschool.com/html/html_space_blockInline

▶ 블록과 인라인

▣ HTML 요소의 타입

- HTML의 모든요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가짐.

- display 속성값의 2가지

1. 블록(block)

2. 인라인(inline)

▣ 블록(block)타입의 요소

- display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며 해당 라인의 모든 너비를 차지.

- 대표요소 : <p>, <div>, <h>, <ul>, <ol>, <form>

    p요소는 display 속성값이 블록인 요소입니다.

- 결과 화면

p요소는 display 속성값이 블록인 요소입니다.

▣ <div> 요소

- <div> 요소는 다른 HTML 요소들을 하나로 묶는데 자주 사용됨.

- 주로 여러 요소들의 스타일을 한번에 적용하기 위해 사용됨.

    
div요소를 이용한 스타일 적용
    
이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
    한 번에 스타일을 적용할 수 있습니다.

- 결과 화면

div요소를 이용한 스타일 적용

이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여 한 번에 스타일을 적용할 수 있습니다.

▣ 인라인(inline) 타입의 요소

- display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않음.

- 요소의 너비도 해당 요소의 내용만큼만 차지.

- 대표요소 : <span>, <a>, <img>

    span태그는 display 속성값이 인라인인 요소입니다.

- 결과 화면

span태그는 display 속성값이 인라인인 요소입니다.

▣ <span> 요소

- <span>요소는 텍스트의 특정 부분을 묶는데 자주 사용됨.

- 텍스트 특정부분에 따로 스타일 적용을 하기위해 사용됨.

이렇게
span요소로 텍스트의 일부분
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.

- 결과 화면

이렇게 span요소로 텍스트의 일부분 만을 따로 묶은 후에 스타일을 적용할 수 있습니다.