학습내용

flexbox의 item을 꽉 차게 배치시키기

1. flex-basis는 auto가 기본값이다. auto는 해당 item width값을 사용한다.
   그래서 item이 두 개 + fit 하고 싶다면
   width: 50% 주듯이 flex-basis:50%을 주면 된다.
   width: 50%;
flex-basis: 50%;

2. item이 3개 이상 + fit 하고 싶다면 flex 축약형을 쓴다.
   flex: flex-grow, flex-shrink, flex-basis
   flex: 1 1 0;

list-style

1. list-style-image : url로 이미지를 넣을 수 있고, 그라데이션 도형을 넣을 수도 있다.
   list-style-image: linear-gradient(to left bottom, red, blue);
2. list-style-position : sets the position of the ::marker relative to a list item. (outline, inline)
3. list-style-type : sets the marker (such as a disc, character, or custom counter style) of a list item element.
   list-style-type: "\1F44D"; // thumbs up sign

넘치는 글 한 줄로 생략

.content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

학습후기

네모 반듯한 박스들로 실습하다가 하늘을 보면 불규칙한 패턴의 구름이 보여서 환기가 된다.