블럭 요소는 왜 화면 배치를 위해, 인라인 요소는 왜 텍스트를 꾸미기 위해 사용되는건지에 대해 이해를 구합니다
231
작성한 질문수 12
• 수업 내용 중에,
블럭 요소는 화면 배치를 위해, 인라인 요소는 텍스트를 꾸미기 위해 사용된다고 하셨는데,
인라인 요소가 어떤 이유? 어떤 배경? 어떤 원리로 텍스트를 꾸미기 위해 사용된다는건지 설명 부탁드리겠습니다 ㅠㅠ
답변 1
0
1. 인라인 요소는 너비와 높이를 조절할 수 없습니다.
반면, 블럭 요소는 너비와 높이 조정이 편리하죠. 따라서 블럭 요소는 레이아웃(화면 배치)에 유리합니다.
2. 블럭 요소와 인라인 요소는 너비와 높이의 기준이 다릅니다.
블럭 요소의 너비는 한 행을 모두 차기하는 반면, 인라인 요소의 가로길이는 컨텐츠의 길이만큼만을 차지합니다. 또 블럭 요소의 높이는 margin과 padding에 의해 결정되지만, 텍스트의 높이는 line-height 속성에 의해 결정됩니다.
이러한 이유로 인라인 요소인 텍스트는 span과 같은 인라인 요소로 감싸 꾸며주는게 일반입니다. 텍스트를 블럭 요소로 꾸미는 경우 기존 레이아웃이 깨지기 때문입니다.
<p>텍스트는 <span style="color: red">인라인 요소</span>로 감싸 꾸며줘야 합니다. 텍스트 자체가 인라인 요소이기 때문입니다.</p>
<p>텍스트를 <div style="color: red">블럭 요소</div>로 꾸미게 되면 기존 레이아웃이 깨지게 됩니다.</p>Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
8
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
7
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
12
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
32
2
claude plugin 방법 자세히 부탁드려요
0
37
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
30
2
최근 코테, 과제 테스트 트렌드
0
51
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
34
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
36
2
Gemini로 진행가능 여부 궁금합니다.
0
56
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
24
2
프롬프트 11 진행 완료
0
38
2
파트3 수급 부분
0
38
2
claude cowork에서 작업하는거와 차이는?
0
33
2
background vs background-color
0
22
1
figma variable 반응형 디자인 결과물 공란
0
57
2
렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.
0
43
2
구글 페이지 개선하기 학습 중, 아이콘이 생성 안됩니다
0
206
1
블럭 인라인 강의 중 다른점 질문
0
228
1
점보트론
0
576
1
강의 듣던중 갑자기 발생했습니다 ㅠㅠㅠ
0
238
1
질문
0
292
1
"셀렉터 기본"강의 듣던 중 질문입니다.
0
289
1
홈페이지의 메인화면 레이아웃을 잡는다면...
0
311
1