EverGiver

CSS 그리드 레이아웃에서 사용하는 용어 그리드 항목을 배치할 때 가로 열(줄)과 세로 행(칼럼)을 모두 사용 CSS 그리드 레이아웃 항목을 배치하는 속성 그리드 컨테이너를 지정하는 display 속성 종류 설명 grid 컨테이너 안의 항목을 블록 레벨 요소로 배치 inline-grid 컨테이너 안의 항목을 인라인 레벨 요소로 칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성 - grid-template-columns 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 칼럼의 크기와 개수를 지정 (몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정) - grid-template-rows 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 줄의 크기..

1. 플렉스 컨터이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소 2. 플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 그림에서 1~6까지 작은 박스들이 모두 해당한다. 3. 주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향. (기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치한다. 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 한다.) 4. 교차축(cross axis) : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치한다. (플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 교차축 끝점'이라고 한다.) 플렉스 박스 항목을 배치하는 속성 종류 설명 ju..

그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 그리드 레이아웃의 특성 - 시각적으로 안정된 디자인을 만들 수 있다. - 업데이트가 편한 웹 디자인을 구성할 수 있다. - 요소를 자유롭게 배치할 수 있다. 그리드 레이아웃을 만드는 방법 플렉서블 박스 레이아웃 (flexible box layout) - 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것 - 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. - 수평 방향이나 수직 방향 중에서 한쪽으로 주축으로 정하고 박스를 배치한다. - ex) 주축을 수평으로 정하면 박..

미디어 쿼리 알아보기 미디어 쿼리(media queries) - CSS 모듈 - 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법 - 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다. 미디어 쿼리 구문 미디어 쿼리 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 준다. @media [only ¦ not] 미디어 유형 [and 조건] * [and 조건]​ - only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다. - not : not 다음에 지정하는 미디어 유형을 제외한다. (not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용한다.) - and : 조건을 여러 개 연결해서 추가할 수 있다. 태그 사이..

반응형 웹 디자인이란 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현한다. 모바일 기기를 위한 뷰포트 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하기 뷰포트는 태그를 이용해 태그 사이에 작성한다. ​​ ​ width=device-width - 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 한다. initial-scale=1 - 보이는 화면의 zoom up 정도를 1배율로 한다는 것이다. ▷이 값을 키우면 보여지는 화면이 좀 더 크게 보인다. ▷ 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷하다. (스마트폰에서만 효과가 있다) maximum-scale - 확대할 수 있는 최대 비율 minimum-scale ..