레이아웃 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 다음
