HTML CSS

💡 학습 목표Flexbox를 사용하여 수평 및 수직 정렬을 구현할 수 있다.Flexbox를 활용해 네비게이션 바를 구성할 수 있다.Flexbox를 이용해 카드 레이아웃을 구성할 수 있다.   홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 카드 4 카드 내용 4 카드 5 카드 내용 5 카드 6 카드 내용 6

💡 학습 목표Flex 아이템의 속성을 이해하고 사용할 수 있다.Flexbox 레이아웃에서 각 아이템의 순서, 크기 및 정렬을 제어할 수 있다.order, flex-grow, flex-shrink, flex-basis, flex, align-self 속성의 사용 목적과 상황을 파악할 수 있다.  Flex 아이템 속성 사용 목적order: 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용합니다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있습니다.flex-grow: Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용합니다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차지해야 할 때 ..

💡 학습 목표Flexbox 레이아웃에서 교차축은 주 축(main axis)에 수직인 축이다. 교차축 정렬을 위해 두 가지 주요 속성은 align-items와 align-content 이다. 교차축 정렬이란?Flexbox 레이아웃에서 교차축(cross axis)은 주 축(main axis)에 수직인 축을 의미합니다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법입니다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 됩니다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용합니다. 1. align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따..

💡 학습 목표justify-content 속성을 이해하고 언제 사용할 수 있는지 알아보자.justify-content 속성이란justify-content 속성은 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의합니다. flex-start: 아이템들을 주 축의 시작 부분에 정렬합니다 (기본값).flex-end: 아이템들을 주 축의 끝 부분에 정렬합니다.center: 아이템들을 주 축의 가운데에 정렬합니다.space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킵니다.space-around: 아이템들 주위에 고르게 여백을 분포시킵니다. 아이템 간의 여백은 동일하지만, 첫 번째 아이템과 마..

💡 학습 목표flex-wrap 속성과 값에 대해서 알아 보자.  flex-wrap 속성이란?display: flex; 속성을 사용하여 Flexbox 레이아웃을 구성할 때, 부모 요소를 Flex 컨테이너로 설정하고, 그 자식 요소들을 Flex 아이템으로 취급하는 개념을 학습하였습니다. 이번에는 주요 속성 중 하나인 flex-wrap 속성에 대해서 알아봅시다.flex-wrap 속성이란 Flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지를 결정합니다. flex-wrap 속성에는 아래와 같은 값을 사용할 수 있습니다.nowrap : 기본값으로, 모든 아이템을 한 줄에 배치합니다. 아이템들이 컨테이너의 너비를 넘어서도 한 줄에 계속 배치됩니다.wrap : 아이템들..

💡 학습 목표주 축(main axis)과 교차 축(cross axis)flex-direction: row, row-reverse, column, column-reverse FlexBox의 두 개의 축flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 됩니다. 주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있습니다. flex-direction의 기본값은 row입니다.주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향입니다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direct..

💡 학습 목표Flexbox란 무엇인가?Flex 컨테이너와 Flex 아이템 웹 페이지의 요소들을 유연하게 배치하려면 먼저 CSS 레이아웃 방식에 대한 이해가 필요합니다.그중에서 먼저 HTML박스 모델과 블록 및 인라인 요소 또는 인라인블록 속성의 개념을 이해하는것이 선행되어야 웹 페이지 레이아웃을 자유롭게 다룰 수 있습니다. 박스 모델이란?HTML 박스모델은 웹 페이지의 모든 요소를 사각형 박스로 취급하는 개념입니다. 이 박스는 여러개의 레이어로 구성되며, 각 레이어는 요소의 크기와 간격을 정의되거나 정의할 수 있습니다.콘텐츠(Content): 텍스트나 이미지 등 실제 내용이 들어가는 부분이다.패딩(Padding): 콘텐츠와 테두리 사이의 여백이다. 패딩은 콘텐츠 주위에 투명한 공간을 추가한다.테두리(B..

html5doc Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 요안도라 소개 요안도라는 게스트 하우스(Guset House) 형식의 농어촌 민박입니다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas accusantium ad laboriosam impedit autem nihil atque molestias vero placeat, ratione voluptate quasi, obcaecati quis repellat nostrum deserunt quo excepturi illo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas accusan..

box-sizing box-sizing = "content-box" box-sizing = "border-box" float float_1 바쁜 3,4학년을 위한 빠른 분수 3,4학년이 꼭 알아야 할 분수를 한 권에 모았어요! 한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. float_2 박스1 박스2 박스3 박스4 float_3 박스1 박스2 박스3 박스4 absolute fixed fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관없이 좌표로 위치를 결정하지만, 기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. (이하생략) fixed 값을 사용하는 요소 역시 absolute ..