Power 개발 연구소

안녕하세요!오늘은 웹 레이아웃을 구성할 때 자주 사용되는 정렬 방식 중 하나인 grid에 대해 알아보려고 합니다.grid는 행과 열을 동시에 다룰 수 있는 레이아웃 시스템으로, 깔끔하고 효율적인 페이지 구성을 가능하게 합니다.이번 글에서는 grid의 기본 개념부터 살펴보겠습니다. Grid란??CSS의 grid는 행과 열을 함께 제어할 수 있는 레이아웃 시스템입니다.마치 바둑판처럼 2차원으로 요소를 정렬할 수 있고, 복잡한 레이아웃도 간단하고 직관적으로 구성할 수 있습니다.이 덕분에 반응형 디자인이나 페이지 전체 구조 설계에 특히 유용합니다.다음으로grid에서 자주 쓰이는 속성에 대해 알아보겠습니다. CSS Grid 자주 쓰이는 속성속성명설명display: grid;요소를 Grid 컨테이너로 지정하..

안녕하세요!오늘은 Media Query(미디어 쿼리)와 반응형 웹에 대해 이해하고,이를 실제로 어떻게 활용할 수 있는지 알아보도록 하겠습니다.먼저 Media Query(미디어 쿼리)가 무언인지 알아보겠습니다. Media Query(미디어 쿼리)란?Media Query(미디어 쿼리)는 CSS에서다양한 디바이스(화면 크기, 해상도, 방향 등)에 따라스타일을 다르게 적용할 수 있게 해주는 기능 입니다. Media Query(미디어 쿼리)기본 문법@media (조건) { /* 조건이 맞을 때 적용할 스타일 */} 위 코드처럼 @media 뒤에 조건을 작성하고, 해당 조건을 만족할 때 적용할 스타일 코드를 중괄호 {} 안에 넣으면 됩니다.이렇게 하면 화면이 그 조건에 충족할 경우, 지정한 스타일이 자동으로 ..

오늘은 display: flex;속성에 대해 알아보겠습니다.flex속성은 css에 display 속성 중 하나로써 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법입니다.이런 flex속성은 요소들을 유연하고 균형 잡힌 배치를 가능하게 도와줍니다. 1.flex속성 주요 속성우리가 display: flex;속성을 사용하였을 때 쓸 수 있는 속성들입니다.flex-direction주 축(메인 축)의 방향을 설정합니다. (row, column 등)justify-content주 축(가로)을 따라 자식 요소들을 정렬합니다. (가운데 정렬, 간격 분배 등)align-items서브 축(세로)을 따라 자식 요소들을 정렬합니다. (위, 가운데, 아래 정렬 등)flex-wrap자식 요소들이 한 줄에 다 안 들어갈 때 줄바..