지 구 여 행

Grid item 속성 Grid item에서 사용 가능한 속성 정리 열/행 크기 설정 grid item의 위치를 지정해줄 수 있습니다. span 은 grid item이 차지할 칸(cell)의 수를 의미하며, grid item위치를 지정할 수 있습니다. grid-row-start grid-row-end grid-row : 행 시작위치 / 행 끝위치, 행 시작위치 / span # grid-column-start grid-column-end grid-column : 열 시작위치 / 열 끝위치, 행 시작위치 / span # grid-area : grid-row 와 grid-column 의 단축 속성, 또는 그리드 영역 이름 설정 그리드 선 그리드 선(grid lines)은 양수나 음수로 지정할 수 있고, 그리드..

Grid container 속성 Grid container에서 사용 가능한 속성 정리 그리드 트랙 그리드 트랙(Grid Track)은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. grid-template-rows 와 grid-template-columns 속성으로 그리드 트랙(행(rows)과 열(columns))을 정의할 수 있습니다. 값을 정의하지 않을 경우 grid item의 크기는 font-size에 비례합니다. px, em, %, fr(fraction, 공간비율)등의 단위를 사용합니다. repeat() , minmax() , fit-content() 함수도 사용할 수 있습니다. grid-template-rows grid-template-columns grid-template-areas : ..

Grid Layout 그리드 레이아웃이란 그리드 레이아웃(Grid Layout)이란 열과 행을 이용하여 인터페이스 요소들을 배치하는 2차원 레이아웃 모델입니다. (참고: Flexbox는 1차원 레이아웃 모델) Grid Layout은 기본적으로 그리드 컨테이너(grid container)와 컨테이너내에 배치되는 요소인 그리드 아이템(item)으로 이루어져있습니다. 외부 엘리먼트(부모 요소)에 display: grid; 또는 display: inline-grid;를 선언함으로써 grid container를 만들 수 있습니다. 내부 엘리먼트(자식 요소)는 자동적으로 grid item이 됩니다. display: grid; : Block 특성의 grid container를 정의 display: inline-gri..

Flex item 속성 Flex item에서 사용 가능한 속성 정리 flex-basis : 항상 main axis를 기준으로 flex item의 초기 너비값을 결정 일반적으로는 width와 같은 기능을 하지만 flex-direction: column; 인 상태에서는 main axis가 수직축으로 변경되면서 flex-basis 값은 높이(height)로 정의된다는 차이점이 있습니다. width와 flex-basis 두 속성 모두 값을 지정할 경우 flex-basis 속성값이 우선순위를 갖게 됩니다. 만약 content item의 실제 너비값이 flex-basis 로 설정한 너비값보다 클 경우, 설정한 값과는 상관없이 content item의 실제 너비값에 따라 렌더링됩니다. 하지만 content item의..

Flex container 속성 Flex container에서 사용 가능한 속성 정리 display: flex; : 부모 요소에 설정하여 새로운 플렉스 서식 환경을 구성 flex-direction : flex item들이 정렬되는 축 방향 변경 row (default value) row-reverse column column-reverse flex-wrap : flex item들의 총 넓이가 flex container의 넓이보다 클 때, flex item들을 다음 줄에 이어서 정렬 nowrap (default value) wrap wrap-reverse flex-flow : flex-direction , flex-wrap 를 한번에 정의 항상 위 순서가 지켜져야 정상적으로 표현됩니다. flex-flow:..

Flexbox Flexbox란 Flexbox, 또는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다. (참고: CSS Grid Layout는 2차원 레이아웃 모델) Flexbox는 기본적으로 플렉스 컨테이너(flex container)와 컨테이너의 컨텐츠인 플렉스 아이템(flex item)으로 이루어져있습니다. 여러 개의 내부 엘리먼트(자식 요소)를 담고 있는 외부 엘리먼트(부모 요소)에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트는 자동으로 flex item이 됩니다. 이때 외부 엘리먼트는 직접적으로 붙어있는 부모 요소(direct pare..

태그의 background에 image 삽입 1. 기본 형태 : background-image: url("이미지경로") 2-1. 이미지경로가 웹일 경우 예. background-image: url("https://images.pexels.com/photos/7008379/pexels-photo-7008379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") 2-2. 이미지경로가 (내 컴퓨터 폴더 내) 파일일 경우 예. background-image: url("img/1.png"); IMPORTANT ※ 배경화면으로 지정할 이미지파일 또는 이미지파일이 저장된 폴더는 반드시 css 폴더내에 위치해야 한다. 하나의 image로 배경화면에 꽉차게 출력 body { he..