Power 개발 연구소

안녕하세요!오늘은 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자식 요소들이 한 줄에 다 안 들어갈 때 줄바..