레이아웃 05번 레이아웃05 가로 또는 세로로 분할된 화면은 eCommerce 상점 및 모델 에이전시와 같이 남성과 여성, 성인과 어린이를 위한 콘텐츠 등 서비스를 분할하는 웹 사이트에 자주 사용됩니다. 화면 분할을 콘텐츠를 최소한으로 유지해 컨텐츠로 시야를 분산시키지 않아야 합니다. float과 flex, grid 이용한 기본형 레이아웃 float은 'flotat: left;'을 사용했을 때 깨진 부분에 'clear: both;' 나 부모 박스에 'overflow: hidden'를 사용하며, flex는 부모 태그에 display: flex;를 붙여, 'flex-wrap'를 사용한다. grid는 'display: grid'와 같이 부모 요소에 꼭 들어가야할 속성은 grid-template-areas grid-templa.. 2022. 7. 29. 레이아웃 04번 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container를 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container는 내용을 포함하고 채우거나, 중앙 정렬하는 데에 사용합니다. 컨테이너는 중첩될 수 있지만 보통은 중첩이 필요하지 않습니다. 컨테이너만 설정했기에 float, flex, grid가 딱히 지정되어 있지 않았으며 반응형으로는 그저 미디어 쿼리에, 컨테이너에서 %를 설정해주면 됩니다. * { margin: 0; padding: 0; } #header { height: 10.. 2022. 7. 29. 레이아웃 03번 레이아웃03 유튜브같은 카드 레이아웃은 계층적이지 않은 수많은 콘텐츠를 보여주는 웹 사이트에 좋다. 뉴스, 블로그, 포트폴리오, 비디오 등의 여러 콘텐츠를 체계적이고 간단한 방식으로 표시해야 하는 웹 사이트에 자주 사용됩니다. float과 flex, grid 이용한 기본형 레이아웃 float은 'flotat: left;'을 사용했을 때 깨진 부분에 'clear: both;' 나 부모 박스에 'overflow: hidden'를 사용하며, flex는 부모 태그에 display: flex;를 붙여, 'flex-wrap'를 사용한다. grid는 'display: grid'와 같이 부모 요소에 꼭 들어가야할 속성은 grid-template-areas grid-template-columns (가로 길이 지정), g.. 2022. 7. 29. 레이아웃 02번 레이아웃02 이러한 페이지 레이아웃은 웹페이지의 계층 구조를 쉽게 파악할 수 있다는 장점이다. 중요한 글 또는 최근 글을 쉽게 파악할 수 있으며, 페이지를 스캔하고 다른 컨텐츠에 집중할 수도 있습니다. float과 flex, grid 이용한 기본형 레이아웃 float은 'flotat: left;'을 사용했을 때 깨진 부분에 'clear: both;' 나 부모 박스에 'overflow: hidden'를 사용하며, flex는 부모 태그에 display: flex;를 붙여, 'flex-wrap'를 사용한다. grid는 'display: grid'와 같이 부모 요소에 꼭 들어가야할 속성은 grid-template-areas grid-template-columns (가로 길이 지정), grid-template-r.. 2022. 7. 29. 레이아웃 01번 레이아웃01 이 레이아웃은 모든 리소스가 웹사이트에서 한 열에 들어갑니다. 하나의 열만 있으면 되며, 사용자는 아래로 스크롤하여 계속해서 더 많은 콘텐츠를 볼 수 있습니다. 대표적으로 페이스북, 인스타그램, 트위터와 같은 소셜 미디어 플랫폼에 널리 사용되고 있습니다. float과 flex, grid 이용한 기본형 레이아웃 float은 'flotat: left;'을 사용했을 때 깨진 부분에 'clear: both;' 나 부모 박스에 'overflow: hidden'를 사용하며, flex는 부모 태그에 display: flex;를 붙여, 'flex-wrap'를 사용한다. grid는 'display: grid'와 같이 부모 요소에 꼭 들어가야할 속성은 grid-template-areas grid-templat.. 2022. 7. 29. 이전 1 다음
