블럭 요소는 왜 화면 배치를 위해, 인라인 요소는 왜 텍스트를 꾸미기 위해 사용되는건지에 대해 이해를 구합니다
266
12 asked
• 수업 내용 중에,
블럭 요소는 화면 배치를 위해, 인라인 요소는 텍스트를 꾸미기 위해 사용된다고 하셨는데,
인라인 요소가 어떤 이유? 어떤 배경? 어떤 원리로 텍스트를 꾸미기 위해 사용된다는건지 설명 부탁드리겠습니다 ㅠㅠ
Answer 1
0
1. 인라인 요소는 너비와 높이를 조절할 수 없습니다.
반면, 블럭 요소는 너비와 높이 조정이 편리하죠. 따라서 블럭 요소는 레이아웃(화면 배치)에 유리합니다.
2. 블럭 요소와 인라인 요소는 너비와 높이의 기준이 다릅니다.
블럭 요소의 너비는 한 행을 모두 차기하는 반면, 인라인 요소의 가로길이는 컨텐츠의 길이만큼만을 차지합니다. 또 블럭 요소의 높이는 margin과 padding에 의해 결정되지만, 텍스트의 높이는 line-height 속성에 의해 결정됩니다.
이러한 이유로 인라인 요소인 텍스트는 span과 같은 인라인 요소로 감싸 꾸며주는게 일반입니다. 텍스트를 블럭 요소로 꾸미는 경우 기존 레이아웃이 깨지기 때문입니다.
<p>텍스트는 <span style="color: red">인라인 요소</span>로 감싸 꾸며줘야 합니다. 텍스트 자체가 인라인 요소이기 때문입니다.</p>
<p>텍스트를 <div style="color: red">블럭 요소</div>로 꾸미게 되면 기존 레이아웃이 깨지게 됩니다.</p>연애인 사주는 그냥 넣어도 상관없나요?
0
12
0
14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.
0
15
0
인프당 무당 캐릭터 뽑는 프롬프트
0
20
0
10월 15일 삭제예정 강의 문의
0
38
1
강의가 중복됐어요
0
52
0
결제가 이루어지는 방식에 대한 문의
0
58
1
강의제목에 10/15일 삭제라고 나와있는데,
0
48
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
57
2
1강 동영상 재생 오류
1
67
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
42
1
Composition단계에서 `Layer`는 누가 만드는지
0
44
1
Strict Mode 예시 질문!
0
58
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
63
2
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
89
4
설명이 잘못된거같습니다.
1
78
2
31강 학습자료에 프롬프트가 엉뚱한것이 있어요
1
66
1
bitnami 설치
0
39
0
구글 페이지 개선하기 학습 중, 아이콘이 생성 안됩니다
0
242
1
블럭 인라인 강의 중 다른점 질문
0
280
1
점보트론
0
613
1
강의 듣던중 갑자기 발생했습니다 ㅠㅠㅠ
0
254
1
질문
0
312
1
"셀렉터 기본"강의 듣던 중 질문입니다.
0
321
1
홈페이지의 메인화면 레이아웃을 잡는다면...
0
336
1