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처럼 다뤄진다고 생각합시다.

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

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

서원석

의 학습노트

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

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기