728x90 반응형 개발/CSS3 [css] 옛날 크롬 브라우저에서 grid를 사용 못하는 경우 아주 옛날 크롬 버전을 사용하는 곳의 프로젝트를 하게 됐는데 grid가 안먹히더라..!!!!당황하지 않고 많은 방법을 찾았다. 0.프로젝트에서 사용한 방법 : 잘 사용했습니다...test { display: flex; flex-wrap: wrap;}. test > * { /* grid 클래스의 직계 자식 모든 요소 */ width: calc(100% / 6); box-sizing: border-box;} 아래는 검색했을 때 다른 방법이라네요. 1. flex를 사용하는 방법.grid-container { display: flex; /* flex 컨테이너로 설정 */ flex-wrap: wrap; /* 아이템이 넘칠 경우 다음 줄로 넘어가도록 설정 */ } .. 2025. 1. 9. float 태그 정렬 float에 대한 정의는 아래 사진과 같다.간단하게 태그를 정렬하는 기능이다. 그 동안은 text-align 혹은 position absolute/ right:0 이런 식으로 사용했어서..이번에 css 작업하다가 처음으로 알게 된 기능이다. 맨 오른쪽으로나 아래로 붙일때 주로 absolute를 사용했는데, 이미지 작업이나 (반응형)복잡한 퍼블리싱 작업에서는 확실히 문제가 생겼다. 뭐든 간단하게 짜는게 좋은 것인데... css는 봐도봐도봐도 새로운게 나온다 ㅠㅠ 계속 공부하자.. & clear 속성도 함께 사용할 수 있다.clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법.:after 형식으로 가상엘리먼트를 만들어서 사용하는게 좋습니다. 참고. 2024. 12. 27. css position, z-index, nth-child positionstatic : 기본값relative : 자기기준 (부모영역 안의 자신의 영역부터. padding영역 포함)absolute : 부모요소 기준 (부모영역 시작점에서 기준으로)fixed : 뷰포트 기준 (최단, 스크롤해도 그 위치에 고정됨)ex) 모바일 메뉴에서 스크롤 해도 따라다니는 버튼을 만들때 사용sticky : 스티키 스크롤 (익스플로어, 하이브라우저에서는 작동 X) z-indx수치가 클수록 앞쪽으로 표현된다.-부모레이어 속성에 position 속성이 설정이 되어야만 사용 가능.ex) 주로 상단 메뉴바에서 hover, click했을때 main내용보다 위로 올라가야하니까 sub-title들이 나오는 레이어에서 z-index 999 크게 넣어버림. nth-child d.. 2024. 12. 26. 이전 1 다음 728x90 반응형
