뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, [ㄷ] 디스플레이 display property | 코딩가나다 | 빔캠프
서원석님의 학습노트

디스플레이 display property | 코딩가나다 | 빔캠프

#전체
#개발자
#프론트엔드
#inline
#퍼블리셔
#veamcamp
#display
#css
#html
#레이아웃
#box model
#inline-block
#container box
#빔캠프
#css display
#block
#퍼블리싱
#css3
07:42display: inline은 너비와 높이를 가질 수 없습니다.
09:10display: inline은 margin은 가질 수 있지만 양옆으로만 적용됩니다.
09:59display: inline은 padding이 적용되지만 시각적으로만 반영이 되고 위치적으론 아무런 영향을 주지 않습니다.
10:35display: inline은 border를 가질 수 있지만 시각적으로만 반영이 됩니다. 그리고 개행의 순간엔 border가 적용되지 않습니다.
11:41display: block으로 바꾸는 순간 width, height, margin, padding, border가 적용된만큼 시각적인 반영 뿐만 아니라 위치적으로도 반영이 됩니다.(다른 요소와의 위치에서)
12:57display: none을 적용하면 화면에서 보이지 않게 됩니다. *공간을 차지 않게 숨겼다고 볼 수 있습니다. *실제로 없어진건 아닙니다.
13:26img의 display 속성을 알아봅니다. *정답: inline *크롬 개발자 도구에서 inline의 display를 확인하는 방법 > computed에서 display 조회합니다
13:57display: inline은 너비와 높이를 가질 수 있습니다.
14:21img는 왜 display: inline이라고 되어있을까요? *block은 어떤 것을 담는 요소인데 img 태그는 닫는 태그가 없고 담을 수 없기 때문에 block으로 표현되지 않는 것입니다. *특수 케이스로써 inline이라고 명시되어있지만 inline-block처럼 다뤄진다고 생각합시다.
✔ 학습 완료

이런 러닝패스는 어때요?

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기