반응형 flexbox4 [웹 디자인] 21일차: 모던 레이아웃 기법 모던 레이아웃 기법이란?모던 레이아웃 기법은 CSS의 최신 기능들을 활용하여 웹 페이지의 레이아웃을 더욱 유연하고 강력하게 만드는 방법입니다. Flexbox와 Grid 레이아웃은 대표적인 모던 레이아웃 기법으로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다.Flexbox와 Grid 결합 사용Flexbox와 Grid를 함께 사용하여 더 복잡하고 유연한 레이아웃을 만들 수 있습니다. 예제: 헤더, 메인 콘텐츠, 사이드바, 푸터가 있는 레이아웃HTML: Header Sidebar Content FooterCSS:.container { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; hei.. 2024. 8. 21. [웹 디자인] 13일차: 플렉스박스(Flexbox) 플렉스박스(Flexbox)란?플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있도록 도와줍니다. Flexbox를 사용하면 컨테이너 내부의 아이템들을 수평 또는 수직 방향으로 배치하고 정렬할 수 있습니다. 플렉스 컨테이너와 플렉스 아이템이라는 두 가지 주요 개념으로 구성됩니다.플렉스 컨테이너 설정display: flex: 요소를 플렉스 컨테이너로 설정합니다.display: inline-flex: 인라인 플렉스 컨테이너로 설정합니다.예제:.container { display: flex;} 아이템 1 아이템 2 아이템 3플렉스 컨테이너 속성flex-direction플렉스 아이템의 주축 방향을 설정합니다.row: 가로 방향 (기본값)row-reverse: 가로 방향 .. 2024. 8. 13. [웹 디자인] 12일차: CSS 레이아웃 기초 CSS 레이아웃이란?CSS 레이아웃은 웹 페이지의 요소들을 배치하고 정렬하는 방법을 정의합니다. 효과적인 레이아웃은 웹 페이지의 가독성과 사용자 경험을 향상시킵니다. CSS에는 다양한 레이아웃 기법이 있으며, 이를 통해 복잡한 웹 페이지 레이아웃을 구현할 수 있습니다.CSS 레이아웃 기법Display 속성display: 요소의 표시 방식을 지정합니다.block: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 전체 너비를 차지합니다.inline: 인라인 레벨 요소로, 새로운 줄에서 시작하지 않으며 콘텐츠의 너비만큼 차지합니다.inline-block: 인라인 레벨 요소처럼 동작하지만, 블록 레벨 요소처럼 크기를 지정할 수 있습니다.none: 요소를 화면에 표시하지 않습니다.예제:.block-element .. 2024. 8. 12. [Project] Porfolio Page - (2) HTML, CSS Index 1. HTML: 뼈대 잡기 2. HTML 예제 3. CSS: 꾸미기 4. CSS Layout 5. CSS Flex Box 6. CSS Grid 7. CSS 예제 8. CSS 새기능(2022) Reference 1. HTML: 뼈대 잡기 HTML - HTML은 웹 페이지 표시를 위해 개발된 마크업 언어 - 마크업 업어: 태그를 이용한 구조적 언어 - HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타냄 - 링크, 인용, 그외의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 - 웹을 이루는 가장 기본적인 구조 - 웹의 구조와 의미를 표현 - W3C에서 표준화 - 브라우저 호환성에 따라 사용 가능한 tag가 다름. (HTML 구성 요소) - !DOCTYPE: 지원되는 파일 .. 2024. 2. 11. 이전 1 다음 반응형
