본문 바로가기
HTML

블록 구조 / 인라인 구조

by 코터틀 2022. 8. 20.
반응형

블록 구조 / 인라인 구조


1. 블록 구조

블록 구조는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.

<body>
    <h1>블록 구조</h1>
    <h2>블록 구조 성질</h2>
    <p>줄 바꿈이 생깁니다.</p>
</body>
결과 확인하기

2. 인라인 구조

인라인 구조는 줄 바꿈 특성이 없습니다.

<body>
    <strong>인라인 구조</strong>
    <span>인라인 구조는 한 줄로 출력됩니다.</span>
</body>
결과 확인하기
인라인 요소 인라인 요소는 한 줄로 출력됩니다.

블록 구조와 인라인 구조의 특성

마크업을 할 때 문법적 오류를 방지하기 위해 구조의 특성에 대한 이해가 필요합니다.

구조 유형 특징
블록 구조 1. 줄 바꿈이 일어납니다.
2. 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
3. 블록 요소를 자식 요소로 포함 할 수 있는 요소와 없는 요소가 있습니다.
인라인 구조 1. 줄 바꿈이 일어나지 않습니다.
2. 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
3. 블록 요소를 자식 요소로 포함할 수 없습니다.
구조 유형 태그
블록 구조 div, p, h1~h6, ul, li, ol, table, form, section, footer...
인라인 구조 span, a, em, i, strong, b, del, ins, sub, sup, textarea...
반응형

'HTML' 카테고리의 다른 글

구조 관련 요소  (4) 2022.08.15
W3C / 웹 접근성 / 웹 호환성  (9) 2022.08.08

댓글


광고 준비중입니다.