이번 장에서는 디스플레이 (Display)와 블록(Block), 인라인(Inline)에 대해 알아보겠습니다.
◈ 디스플레이 (Display)
-> 요소를 블록으로 처리할지 인라인으로 처리할지,
자식(내부) 요소를 어떻게 배치할지 결정하는 레이아웃 설정 속성 값
디스플레이가 어떤 것인지 감이 안 오시죠?
일단, 블록과 인라인에 대해 먼저 설명하고 차근차근 알아보겠습니다 :)
◈ 블록 (Block)
-> 화면의 가로 넓이만큼의 길이를 가진 직사각형 형태의 속성
항상 새로운 줄에서 시작됩니다.
블록 속성을 가지는 요소 옆에는 다른 요소가 올 수 없습니다.
◈ 인라인 (Inline)
-> 해당 요소의 내용만큼의 넓이를 가진 속성
새로운 줄에서 시작되지 않습니다.
인라인 속성을 가지는 요소 옆에는 다른 요소가 올 수 있습니다.
혹시 기억나시나요?
저희가 블록과 인라인을 다루는 건 이번이 처음이 아니랍니다!
기억이 안 나시는 분들은 이 글의 끝 부분을 보시면 기억이 나실 겁니다 ㅎㅎ
↓ 이 글입니다 ↓
< html 공부 > 3장. HTML의 태그 (1) - 텍스트
이번 장에서는 HTML의 태그에 대해 알아보겠습니다! 저번 시간에 다양한 종류의 태그 그리고 그 기능에 대해서 배웠었죠? 이번 시간에는 태그 그중에서, 안에 들어가는 태그에 대해 배워보도록
introducing-turtle.tistory.com
거두절미하고 이제 디스플레이부터 다시 차근차근 알아보겠습니다!
디스플레이는 정의되어 있는 바처럼, 요소를 어떻게 배치할지 지정해주는 속성입니다.
외부 유형을 설정하는 방법은 block, inline 그리고 run-in이라는 방법이 있는데,
저희는 그중 block과 inline에 대해서만 알아보겠습니다.
디스플레이를 이용해 block과 inline을 지정해주는 방법은 다음과 같습니다!
디스플레이 지정 방식 : {
display : block (or inline);
}
이제, 블록과 인라인에 대해 알아볼 텐데, 먼저 블록에 대해 알아보겠습니다.
위에 정의한 대로 블록은 화면의 가로넓이를 가지는 직사각형의 형태로 옆에 어떠한 요소도 올 수 없습니다.
말로만 들으니 무슨 말인지 감이 안 오시죠?
제가 직접 보여드리겠습니다!
See the Pen bGBYPvP by JaeyongLee (@jaeyonglee960212) on CodePen.
이제 이해가 가시죠?
블록은 말 그대로 옆에 아무것도 올 수 없는 속성입니다!
인라인은 그 반대입니다!
See the Pen QWGOXVw by JaeyongLee (@jaeyonglee960212) on CodePen.
이제 인라인과 블록의 차이점을 아시겠죠?
인라인은 한 줄에 여러 개가 올 수 있고, 블록은 한 줄에 여러 개가 올 수 없습니다.
그리고 인라인은 중요한 특징이 하나 더 있는데,
그것은 바로 높이와 넓이를 지정해줄 수 없다는 것입니다!
인라인 요소들은 그 컨텐츠의 크기만큼 넓이를 가진답니다!
절대 높이와 넓이를 지정해줄 수 없습니다!
이 점 주의해주세요!!!
이번 장에서는 디스플레이와 블록, 인라인 속성에 대해 알아봤습니다.
진짜 배우면 배울수록 신기한 학문 아닌가요?
이번 장은 여기서 마치고
다음 장에서는 디스플레이의 내부 속성 FLEX에 관해 다루도록 하겠습니다.
그럼 다음 장에서 뵙겠습니다! 안녀어어어엉~~~~~
'css' 카테고리의 다른 글
| < css 공부 > 8장. Margin (0) | 2021.03.15 |
|---|---|
| <css 공부> 7장. 디스플레이 - FLEX (0) | 2021.03.14 |
| <css 공부> 5장. 클래스와 아이디 (0) | 2021.02.22 |
| <css 공부> 4장. 선택자 (Selector) (0) | 2021.02.19 |
| <css 공부> 3장. 색깔 입히기 (0) | 2021.02.16 |