css
-
display flexcss 2023. 6. 16. 17:59
flex의 기본 구조 flex container : 부모 요소로 flex의 영향을 받는 전체 영역 flex item : 자식 요소로 flex의 속성에 따라 각각의 아이템들이 배치되는 것 container에 적용하는 속성 display display: flex; : flex 아이템들이 가로로 배치되고 자신이 가진 내용물의 width 만큼 공간을 차지함 : height는 컨테이너의 높이만큼 알아서 늘어남 display: inline-flex; : inline-block처럼 동작함 : 아이템 배치와 관련있다기 보다 컨테이너와 관련 있으며 컨테이너가 주변 요소들과 어떻게 어우러질지 결정함 flex-direction 배치 방향 설정 flex-direction: row; : 아이템들이 가로 방향으로 배치 flex-..
-
counter-reset, counter-incrementcss 2023. 6. 16. 17:27
counter-reset과 counter-increment란? : css를 이용하여 특정 요소에 숫자를 생성하며 자동으로 번호를 매기는 속성 counter-reset : 번호를 붙이려는 부모 요소에 counter-reset으로 이름과 시작값을 설정 : 요소 { counter-reset : 카운터 이름 시작값 } : 요소 { counter-reset : initial } 초기화 : 요소 { counter-reset : none } 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) : 시작값 숫자를 지정하지 않으면 기본값은 0 counter-increment : 번호가 붙을 요소에 설정한 값을 증가시키는 역할 : 요소 { conter-increment: 카운터 이름 증가할 숫자 } : 요소 { cou..