TIL - 220622

HTML / CSS (2)

[오늘 공부한 내용]

(1) 폰트 rotate하면 더 선명하게 보임 (매우작게)

(2) display: flex 쓰면 박스 가로 배치가 쉬워짐

.flex-container {
  display : flex;
  justify-content : center;  // 좌우정렬
  align-items : center;  // 상하정렬
  flex-direction : column; // 세로정렬
  flex-wrap : wrap;  // 폭이 넘치는 요소 wrap 처리
}
.box {
  flex-grow : 2;  // 폭이 상대적으로 몇배인지 결정
}

(3) breakpoint: 1200px / 992px / 768px / 576px

(4) one-way 애니메이션 만드는 step
1. 시작스타일 만들기
2. 최종스타일 만들기
3. 언제 최종스타일로 변하는지
4. transition으로 애니메이션

(5) overflow라는 속성은 박스의 폭이나 높이를 초과하는 내부요소를 처리하기 위한 속성
hidden 값을 주면 넘치는 내부요소를 자동으로 잘라 없애줌

(6) SASS 문법
1. 값을 저장해놓고 쓰는 '변수'
2. 셀렉터 대신 쓰는 Nesting
3. 이미 있는 클래스를 확장하는 @extend
4. 코드를 한단어로 축약하는 @mixin
5. @use와 언더바 파일

오늘 만든 것