본문 바로가기

전체보기209

CSS의 grid를 함께 공부해보자 - 2. 이름을 사용한 그리드 배치 이전 글에 그리드의 기본에 대해 적었었다. 이전 글에서는 그리드의 선들의 번호를 통해서 배치를 했다고 하면, 이번에는 그리드의 영역에 이름을 배치하고 아이템을 해당 이름의 영역에 넣는 방식을 적어 볼 예정이다.grid-template-areas:'영역1 영역2 영역3''영역4 영역5 영역6' ;이 방법은 grid-template-columns와 grid-template-rows를 통해 행과 열의 길이를 설정해야 한다.grid-template:'영역1 영역2 영역3' 행1의 높이'영역4 영역5 영역6' 행2의 높이 / 열1의길이 열2의길이 열3의길이;영역을 이름으로 설정하고, 행과 열의 길이까지 한번에 작성하는 방법이다. grid-area: 영역이름; 설정한 이름을 가지고 해당 영역에 넣는 방법은 grid.. 2024. 7. 13.
CSS의 grid를 함께 공부해보자 - 1. 그리드의 기본 그리드(grid)는 수평선과 수직선으로 이루어져 격자형 배치가 가능한 레이아웃이다. 그리드의 경우 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있어 웹 페이지를 생성하는데 용이하다.display: grid | inline-grid ; 그리드 관련 용어grid-container그리드 요소를 포함하고 있는 공간grid-item 그리드 컨테이너 내부에 표시되는 그리드 컨테이너의 자식요소track그리드의 행과 열을 의미한다.cell그리드에서 한 칸을 의미한다.line그리드에서 셀들의 구분 선을 의미한다.number그리드 라인의 각 번호를 의미한다.gap그리드 셀 사이의 간격을 의미한다.grid-area그리드 라인으로 둘러쌓인 영역을 의미한다. 그리드 설정하는 법 (number 사용 방법)grid-template-.. 2024. 7. 13.
CSS에서 수직 위치를 정해보자(z-index) z-index는 요소들의 수직 위치를 정하는 프로퍼티로, z-index를 이용하여 요소들을 겹치게 할 수 있다. z-index의 낮은 값을 가지고 있는 요소 위로 높은 값을 가지고 있는 요소가 쌓인다. z-index는 position이 absolute, relative, fixed, sticky 이거나 flex 혹은 grid에서만 사용이 가능하다. 가장 밑에 있어야 하는 아이템의 경우 z-index: -999; 이런식으로도 사용하기도 한다.  z-index 적용전 1 2 3 z-index 적용후 1 2 3 2024. 7. 13.
CSS의 flex를 함께 공부해보자 - 2. flex-items 앞서서 flex-container에 대한 공부를 했다. 컨테이너 안에 있는 플렉스 아이템들의 크기와 배치를 하는 방법을 알아보자.  아이템 관련 속성flex-basis: 값; 플렉스 아이템의 기본 크기를 설정한다. 기본값은 auto (컨텐츠 크기)로 box-sizing을 따로 지정하지 않으면 컨텐츠 박스 크기에 맞춰서 조정한다. width나 height와 함께 사용 시에 width와 height를 우선시 한다 .flex-grow: 값;기본 값은 0으로, 컨테이너 내부에 남아있는 공간을 다른 아이템들과 비교하여 얼마나 할당 받을지를  설정한다. 모든 아이템들이 같은 flex-grow값을 갖는다면 컨테이너 내에서 동일한 공간을 할당받는다.flex-shrink: 값;기본 값은 1로, 아이템의 감소 폭을 지정한.. 2024. 7. 10.
CSS의 flex를 함께 공부해보자 - 1. flex-container flex는 아이템과 그 아이템들을 묶고 있는 컨테이너로 이루어져 있다. flex는 컨테이너 내에서 아이템 간의 공간 배분과 정렬기능 등을 설정하는 속성이다. display: flex | inline-flex; flex로 설정하면 기본적으로 좌측에서 우측으로 배치가 되며 메인 축을 기준으로 우선 배치가 된다. inline-flex의 경우에는 컨테이너가 인라인속성으로 변한다.  컨테이너 관련 속성flex-directionflex의 메인 축을 수정하는 방법이다. 메인 축을 좌(row), 우(row-reverse), 상(column), 하(column-reverse)로 변경할 수 있다.flex-direction: row(기본값) | row-reverse | column | column-reverse;row는 좌.. 2024. 7. 10.
CSS의 반응형 웹을 위한 미디어쿼리(Media Query) 사용법 미디어쿼리는 디바이스의 특정 조건에 따라 CSS스타일을 다르게 지정하는 방법이다. 스타일을 지정하는 방식은 처음에 웹브라우저를 위한 디자인을 만들고 이후에 디자인의 배치를 변경하는 방식인 top-down 방식과, 처음에 작은 디바이스를 위한 디자인을 만들고 이후에 웹브라우저를 위해 디자인의 배치를 변경하는 방식인 bottom-up방식이 있다.@media 미디어유형 and (조건) { CSS스타일 블록 }미디어유형미디어유형의 경우 all, screen, print 이 있으나 생략해서 사용할 수 있다. 생략하게 되는 경우 기본값 all이 적용된다. 미디어쿼리 조건자주 사용되는 조건들이다.조건설명orientation뷰포트의 세로 혹은 가로 방향max-height | min-height | height뷰포트의 .. 2024. 7. 10.

티스토리툴바