“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
블록 레벨 요소(Block-level Element)
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.
블록 요소는 하나의 박스라고 생각하면 됩니다.
블록 레벨 요소의 태그들:
- 제목 <h1>~<h6>:
1. HTML 문서에서 제목 (heading)을 정의할 때 사용하는 태그.
2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다.
3. 스크린 리터(음석낭독프로그램)에서는 제목의 수준으로 바로 이동할 수 있기 때문에 번호순으로 정의하는 것이 좋다. - 문단 <p>:
1. HTML 문서에서 단락 (paragraph)을 정의할 때 사용하는 태그.
2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다.
3. 텍스트의 행을 바꾸려면 <br>태그를 사용한다.
인라인 요소(Inline Element)
인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않고, 가로로 정렬이 됩니다.
인라인 요소는 텍스트라고 생각하면 됩니다.
인라인 레벨 요소의 태그들:
- 링크<a>:
1. 다른 HTML 문서의 이동(외부링크)이나 동일한 HTML 문서 내에서 이동(내부링크), 이메일 주소에 링크를 지정할 수 있다.
2. href 속성은 링크릐 목적지를 지정할 수 있다.
3. 이전 버전에서는 블록 레벨 요소를 포함할 수 없었지만, HTML5에서는 블록 레벨 요소도 포함할 수 있게 되었다.
다만, <input>,<button>, 다른 link(<a>)등의 요소들은 포함할 수 없다.
4. <a>태그 속성 중 target 속성은 링크된 HTML 문서를 어떤 방식으로 브라우저에 보여줄 것인 가에 대한 속성이다.
target 속성 값에는 _self, _blank, _parent, _top 이 있는데 이 중 _blank를 가장 많이 사용한다.
_blank는 링크된 웹 문서를 브라우저에서 새 탭(창)으로 보여준다.
- 이미지<img>:
1. HTML 문서에 이미지를 삽입할 때 사용하는 태그
2. <img> 태그의 필수 속성인 src 속성은 불러올 이미지의 경로를 지정한다.
경로는 <a> 태그에서 설명한 절대 경로와 상대 경로의 개념이 똑같이 적용된다.
3. <img> 태그는 인라인 요소이며 종료 태그</img>가 없는 빈 요소이다.
<img> 태그에서 잊지 말아야 하는 것은 alt 속성을 필수적으로 정의해 주어야 한다는 것이다.
그 이유는 두 가지이다.
3-1. 스크린 리더에서 <img> 태그로 접근했을 때 alt 속성의 텍스트를 음성으로 읽어줌으로써 이미지에 대한 정보를 전달할 수 있다.
3-2. 외부적인 환경으로 이미지를 불러올 수 없는 상황이 발생했을 때 이미지 대신 alt 속성의 텍스트가 출력되어 이미지의 내용을 전달할 수 있다. - <em>:
강조하고 싶은 텍스트를 정의하기 위한 태그, 기울임체로 표시된다. - <strong>:
중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시된다. - <mark>:
주의 깊게 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시된다. - <b>:
의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시한다. - <small>:
주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은 글씨로 표시된다. - <sub>:
아래첨자 텍스트를 정의하기 위한 태그. - <sup>:
위첨자 텍스트를 정의하기 위한 태그.
블록 레벨 요소와 인라인 요소의 차이점
1. 블록 레벨 요소는 줄 바꿈이 일어나지만, 인라인 레벨 요소는 줄 바꿈이 일어나지 않습니다.
2. 블록 레벨 요소는 문자와 인라인 요소를 자식 요소로 포함할 수 있지만, 인라인 요소는 문자와 인라인 요소를 자식 요소로 포함할 수 없습니다.
3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 없는 요소가 있지만, 인라인 레벨 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.
