블럭 요소는 왜 화면 배치를 위해, 인라인 요소는 왜 텍스트를 꾸미기 위해 사용되는건지에 대해 이해를 구합니다
252
작성한 질문수 12
• 수업 내용 중에,
블럭 요소는 화면 배치를 위해, 인라인 요소는 텍스트를 꾸미기 위해 사용된다고 하셨는데,
인라인 요소가 어떤 이유? 어떤 배경? 어떤 원리로 텍스트를 꾸미기 위해 사용된다는건지 설명 부탁드리겠습니다 ㅠㅠ
답변 1
0
1. 인라인 요소는 너비와 높이를 조절할 수 없습니다.
반면, 블럭 요소는 너비와 높이 조정이 편리하죠. 따라서 블럭 요소는 레이아웃(화면 배치)에 유리합니다.
2. 블럭 요소와 인라인 요소는 너비와 높이의 기준이 다릅니다.
블럭 요소의 너비는 한 행을 모두 차기하는 반면, 인라인 요소의 가로길이는 컨텐츠의 길이만큼만을 차지합니다. 또 블럭 요소의 높이는 margin과 padding에 의해 결정되지만, 텍스트의 높이는 line-height 속성에 의해 결정됩니다.
이러한 이유로 인라인 요소인 텍스트는 span과 같은 인라인 요소로 감싸 꾸며주는게 일반입니다. 텍스트를 블럭 요소로 꾸미는 경우 기존 레이아웃이 깨지기 때문입니다.
<p>텍스트는 <span style="color: red">인라인 요소</span>로 감싸 꾸며줘야 합니다. 텍스트 자체가 인라인 요소이기 때문입니다.</p>
<p>텍스트를 <div style="color: red">블럭 요소</div>로 꾸미게 되면 기존 레이아웃이 깨지게 됩니다.</p>bitnami 설치
0
7
0
강의 소스 코드는 어디서 볼수 있나여?
1
20
1
자료집 관련
0
13
2
13. (App 2) 기본기 훈련 에서
0
23
1
17강 강의에 목데이터 첨부파일이 없습니다.
2
27
2
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
26
1
11차시 Antigravity IDE 설치 후
0
24
1
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
29
1
5,6,7,8 내용이 없어요
0
29
1
푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?
0
32
1
장치 의존성과 CSR
0
35
1
순수 함수 / 순수 컴포넌트
0
24
1
css box-sizing 관련 질문
0
35
2
여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?
0
28
1
node.js 설치 (LTS버전)
0
30
1
Cursor & Antigravity 소개 및 설치
0
35
2
뉴스페이퍼 테마 관련
0
35
1
구글 페이지 개선하기 학습 중, 아이콘이 생성 안됩니다
0
230
1
블럭 인라인 강의 중 다른점 질문
0
266
1
점보트론
0
607
1
강의 듣던중 갑자기 발생했습니다 ㅠㅠㅠ
0
250
1
질문
0
305
1
"셀렉터 기본"강의 듣던 중 질문입니다.
0
314
1
홈페이지의 메인화면 레이아웃을 잡는다면...
0
331
1