미디어쿼리2 [css]Flex아이템 li 요소 4개씩 한 줄에 배치하기 웹 개발 시 리스트(ul, li) 요소를 사용해 메뉴나 갤러리 등을 구성할 때,Flexbox를 이용하면 손쉽게 원하는 레이아웃을 만들 수 있습니다.이번 글에서는 ul 안의 li 요소를 4개씩 한 줄에 배치하는 방법을 알아보겠습니다. 1. 기본 Flexbox 설정ul.news { display: flex; padding: 0; margin: 0; list-style: none;}이렇게 하면 li 요소들이 가로로 일렬로 배치됩니다. 2. li 요소 4개씩 한 줄에 배치하기(모바일에서는 2개씩 배치) li 요소를 4개씩 한 줄에 배치하려면, 각 li 요소의 너비를 25%로 설정합니다.이는 한 줄을 네 등분해서 li 요소들이 균등하게 배치되도록 하기 위함입니다.ul.news li { .. 2024. 8. 26. [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6. 이전 1 다음 728x90 반응형
