CSS

순서 관계 없지만 position/size 는 맞춰주어야 한다.flex-grow : 0 | flex-shrink : 1 | flex-basis : 0

Grid 연습하기 - 그리드 가든(https://cssgridgarden.com/Flexbox는 1차원 레이아웃 시스템인 반면, Grid는 2차원 레이아웃 시스템이다. 열과 행을 모두 같은 수준으로 제어, 커스터마이징 가능하다.

perspective는 관점이라는 뜻으로만 알고 있었는데, 원근법이라는 뜻이 있었다. 관점과 연관이 있는 뜻인 것 같아 알아두는 데 무리는 없을 것 같다:)CSS의 perspective 속성은 부모 요소에 적용 시 자식 요소를 해당 거리만큼 떨어져서 보는 효과를 준다.

픽셀 수백 개가 모여 전체 글꼴을 구성한다.일반 문서 작업에 유용하다.점과 점 사이의 곡선으로 이미지를 구성하여 크기를 변경해도 깨지지 않는다. 고해상도 출력 작업에 유용하다.OTF, TTF는 모두 벡터 글꼴이다.참고 블로그https://blog.naver.c

요소의 배경이 어디까지 차지할 지를 설정한다. background-image의 시작점을 지정한다.기본값 : padding-box참고) background-position: left top; 을 적용하여 테스트 함.background-clip과 달리 시작 위치만 정해주

border-origin border 참고 블로그 https://light9639.tistory.com/entry/border%EC%97%90-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EC%A0%81%EC%9A%A9%ED

CSS Diner https://flukeout.github.io/ 인접 형제 셀렉터 A + B 셀렉터A의 하는 셀렉터B 요소를 선택합니다.

위와 같이 span 태그는 inline 태그로, width height가 적용되지 않는다.부모가 display:flex; 속성을 가지면 inline태그도 마치 block 태그처럼 width, height을 가지는 모습을 볼 수 있다.