코딩하는 복서 🥊

1. flex의 속성은 아래와 같다.container에 적용되는 속성과 item에 적용되는 속성이 다르다.1.1 container 속성1) flex-wrap: 아이템을 감싸서 박스크기는 유지하면서 화면 크기에 따라 배치를 유연하게 함. *default는 nowrap *왼쪽이 nowrap, 오른쪽이 wrap 2) justify-content: 중심축 기준에서 컨테이너 안에 ITEM들 '정렬'을 어케할거냐? *flex-end 는 아이템 순서는 유지하면서 reverse (끝나는 부분에 붙어서 정렬) *space-around 는 item에 가상의 테두리를 둘러서 그 간격만큼 떨어짐(첫 간격과 마지막 간격은 중간 간격보다 작음) *space-evenly 는 item을 컨테이너 크기에 맞게 일정한 간격 유지하며 떨..

0. 들어가며 프론트 엔드를 구조적으로 보면 여러 개의 박스로 이루어져 있는데 이 박스를 CSS에서 어떻게 자리배치 할 수 있는지 알아본다. 1. display 대상이 블록(blcok) 속성을 따를 것이냐 인라인(inline) 속성을 따를 것이냐 e.g. 디스플레이 바꿔주면 박스도 줄바꾸지 않고 한줄에서 나오게 할 수 있음 ※ 디스플레이 변경 방법 셀렉터 안에 display: 원하는 상태 넣어주면 됨 1) block - 대상이 block element 속성을 따름 - 한 줄에 하나 2) inline - 대상이 inline 속성을 따름 - 한 줄에 여러개 (너비가 허용하는 한) 3) inline-block - 대상이 inline 처럼 한 줄에 나오는데 block일때 처럼 박스 형태는 유지 함. 4) fle..

0. 들어가며 : CSS는 무엇의 약자? 1) Cascading Style Sheet : 연속적으로 종속(상속)되는 스타일 시트 *캐스캐이딩은 폭포처럼 한칸 한칸 내려오는 것을 표현하는 말임. 2) 작성시, 띄어쓰기에 유의하자 자바스크립트처럼 알아서 안해준다. 3)동일한 대상에 겹치는 스타일링이 있다면 더 좁은 범위로 지정된 것을 따름. 1. Cascading ▶ 종류 1) Author style : 개발자가 작성하는 스타일 (e.g. css 파일) 2) User style : 사용자가 지정하는 스타일 (e.g. 브라우저 다크모드) 3) Browser: 브라우저상에서 기본적으로 지정된 스타일 ▶ 우선순위 Author > User > Browser e.g. 개발자가 지정안했어? 유저 찾아봐, 유저에 지정안..