KDT_Megabyte School 핀테크 서비스 프론트엔드 과정 2기
## 220405 Day09 Today I Learned
- Width
- Margin
- Linear-gradient
- float
- Lorem Ipsum
Width
- default value : auto
- block width : 최대한 늘릴려고 시도
- inline width : 최대한 줄이려고 시도
- min-width : 최솟값 지정. 값 이하로는 줄어들지않는다.
Margin
Margin-collapsing(마진 중첩 현상)
- 특정 상황에서 마진값이 사라지는 현상
- 부모-자식, 형제 사이에서 적용
- 부모 - 자식 (위-위, 아래-아래)
- 부모 margin-top, 자식 margin-top 만날시(겹칠시) 마진중첩
- 부모 margin-bottom, 자식 margin-bottom 만날시(겹칠시) 마진중첩
- 이전 형제 - 다른 형제 (위-아래)
- 형제1 margin-top, 형제2 margin-bottom 만날시(겹칠시) 마진중첩
- 좌우 값에서는 마진 중첩이 일어나지않는다.
- 패딩값을 지정하여 맞닿은 여백 없애면 중첩이 일어나지않는다.
Border
- 요소의 테두리 속성을 설정
- 두께, 선종류, 선색상을 설정할 수 있다.
- 선색상 지정하지않을 시에는 글자색깔을 상속받는다.
- border : 1px solid pink
Ellipsis(생략)
- white-space : nowrap (특정 영역을 넘어선 텍스트를 가로로 정렬해준다)
- overflow : hidden
- text-overflow : ellipsis (넘어선 텍스트를 ... 표시)
- (생략 말줄임 표시를 할 때 세트로 많이 사용한다)
Lorem Ipsum
- 실제적인 문장 내용이 채워지기 전에 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트
- lorem Ipsum ( n ) : n 개의 단어를 자동으로 생성해준다.
- loremipsum(5) : Lorem ipsum dolor sit amet
- loremipsum(8) : Lorem ipsum dolor sit amet consectetur adipisicing elit
Linear-gradient
- HTML요소에 그라데이션을 적용해준다.
- 그라데이션의 각도, 색깔을 설정할 수 있다.
- background-color : linear-gradinet ({n}deg, color1, color2)
- background-img 로 설정해도 적용이 가능하다.
- = linear-gradient는 색상이 아닌 이미지이다.
