Frontend/HTML&CSS5 [HTML & CSS] CSS Grid minmax로 내부 요소 비율 유지하기 (feat. text 말줄임표 처리) 문제 발생 CSS Grid를 사용한 반응형 페이지에서 내부 요소의 width가 길어지면 grid의 비율이 깨지는 현상이 발생했습니다..lectureCardWrapper { display: grid; gap: var(--margin-size-lg); grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto;}@media screen and (max-width: 880px) { .lectureCardWrapper { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }}@media screen and (max-width: 530px) { .lectur.. 2024. 6. 23. [styled-components] Grid로 반응형 구현 Introduction Styled-components 를 이용하여 Grid로 반응형을 구현하는 법을 알아보려 한다. 1. theme에 break point 설정 desktop, tablet, mobile에 대한 break point를 정하고 theme에 다음과 같이 설정해준다. // PC: 1024px ~ // tablet: 768px ~ 1023.9px // mobile: ~ 767.9px const theme = { media: { desktop: '@media screen and (min-device-width: 1024px)', tablet: '@media screen and (min-device-width: 768px) and (max-device-width: 1023.9px)', mobile.. 2024. 1. 5. [html & css] 드래그 방지 -webkit- : 크롬, 사파리 -moz- : 파이어폭스 -ms- : 익스플로러 -o- : 오페라 /* 드래그 방지 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 2023. 2. 19. [HTML/CSS] flex 사용 시 가운데 정렬 기본 상태 //html 안녕하세요! hello! //css #outer_wrapper{ display: flex; } #inner_wrapper{ border: solid 1px black; } 1. flex-direction: column일 경우 align-items: center 사용 //css #outer_wrapper{ display: flex; flex-direction: column; align-items: center; } #inner_wrapper{ border: solid 1px black; } 2. flex-direction: row일 경우 justify-content:center 사용 //css #outer_wrapper{ display: flex; flex-direction: row.. 2022. 12. 7. [HTML/CSS] 네이버 메뉴바 문제1 창 줄어들 시 부족한 칸을 못 견디고 글자가 줄 바꿈됨 ☞ white-space: nowrap 사용 문제2 창 크기에 맞게 margin 할당하지 못함 ☞ white-space: 0 auto 사용(좌우 정렬) cf) 상하 정렬 시 white-space: auto 0 사용 2022. 11. 10. 이전 1 다음
