블럭 요소는 왜 화면 배치를 위해, 인라인 요소는 왜 텍스트를 꾸미기 위해 사용되는건지에 대해 이해를 구합니다
234
작성한 질문수 12
• 수업 내용 중에,
블럭 요소는 화면 배치를 위해, 인라인 요소는 텍스트를 꾸미기 위해 사용된다고 하셨는데,
인라인 요소가 어떤 이유? 어떤 배경? 어떤 원리로 텍스트를 꾸미기 위해 사용된다는건지 설명 부탁드리겠습니다 ㅠㅠ
답변 1
0
1. 인라인 요소는 너비와 높이를 조절할 수 없습니다.
반면, 블럭 요소는 너비와 높이 조정이 편리하죠. 따라서 블럭 요소는 레이아웃(화면 배치)에 유리합니다.
2. 블럭 요소와 인라인 요소는 너비와 높이의 기준이 다릅니다.
블럭 요소의 너비는 한 행을 모두 차기하는 반면, 인라인 요소의 가로길이는 컨텐츠의 길이만큼만을 차지합니다. 또 블럭 요소의 높이는 margin과 padding에 의해 결정되지만, 텍스트의 높이는 line-height 속성에 의해 결정됩니다.
이러한 이유로 인라인 요소인 텍스트는 span과 같은 인라인 요소로 감싸 꾸며주는게 일반입니다. 텍스트를 블럭 요소로 꾸미는 경우 기존 레이아웃이 깨지기 때문입니다.
<p>텍스트는 <span style="color: red">인라인 요소</span>로 감싸 꾸며줘야 합니다. 텍스트 자체가 인라인 요소이기 때문입니다.</p>
<p>텍스트를 <div style="color: red">블럭 요소</div>로 꾸미게 되면 기존 레이아웃이 깨지게 됩니다.</p>part3. spy 쪽 / part3,part4 강의자료
0
29
2
최종 코드
0
36
2
Open AI 결제
0
39
2
figma 파일을 받을 수가 없어요
0
47
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
34
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
41
2
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
53
1
구글 서치콘솔 도메인 소유권 확인 실패
0
34
2
antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?
0
56
1
다음 강의 얼른 올려주세요
0
43
2
일반 강의와 차이점?
1
49
1
중요하진 않지만 설명하신부분에서 안된부분..
0
33
1
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
65
2
stopPropagation()에 대해서 질문 있습니다.
0
49
2
뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문
0
41
2
노션에 20.Contact가 없어요
0
47
2
검색엔진 차단 noindex
0
51
2
구글 페이지 개선하기 학습 중, 아이콘이 생성 안됩니다
0
214
1
블럭 인라인 강의 중 다른점 질문
0
242
1
점보트론
0
584
1
강의 듣던중 갑자기 발생했습니다 ㅠㅠㅠ
0
241
1
질문
0
297
1
"셀렉터 기본"강의 듣던 중 질문입니다.
0
295
1
홈페이지의 메인화면 레이아웃을 잡는다면...
0
313
1