[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 42회차 미션

7 * 6 = 6주차 🎉

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 42일차입니다!

오늘은 13번째 커리큘럼을 마무리했어요. 벌써 미션을 시작한 지도 한 달 반이 지났네요. 🥳

예전에 실무할 때 display: inline-block 의 기능을 제대로 모르고 막 썼던 게 생각나네요. 이제부터 제대로 알고 써야죠.

 

오늘은 08. display / 09. overflow / 10. opacity 를 학습했습니다.

---

 

display

◾ 요소의 박스 타입(유형)을 설정 ➡ 요소가 화면에 보여지는 형태 설정 (블록, 인라인 여부 등)

◾ 속성 값 ⬇

 

값	의미	기본값
block	블록 요소 (<div> 등)	.
inline	인라인 요소 (<span 등>)	.
inline-block	인라인-블록 요소 (<input> 등)	.
기타	table, table-cell, flex 등	.
none	요소의 박스 타입이 없음 (요소가 사라짐)	.

 

✨ 박스 안 요소(글자) 중앙 정렬: display: flex; align-items: center; justify-content: center;

 

overflow

◾ 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때, 넘친 내용의 보여짐을 제어

◾ 속성 값 ⬇

 

값	의미	기본값
visible	넘친 부분 그대로 보여줌	visible
hidden	넘친 부분 잘라내고 보이지 않게 함	.
scroll	넘친 부분을 잘라내고 스크롤바(상하/좌우) 강제로 사용하여 넘친 내용을 볼 수 있도록 함	.
auto	넘친 부분이 있을 경우에만 잘라내고 스크롤바를 (자동으로) 사용하여 넘친 내용을 볼 수 있도록 함	.

 

opacity

◾ 요소의 투명도 지정

◾ 속성 값: 숫자 ➡ 0(투명)~1(불투명)까지 숫자로 투명도 조절

◽ opacity: 0.5는 opacity: .5로도 쓸 수 있음

◽ opacity: 0 이라고 요소가 사라지는 게 아님 (화면에서 안 보일 뿐)

 

---

강의 링크: https://bit.ly/3m0t8GM