CSS9 CSS 그리드 기능 정리 그리드 나누기 display 속성을 grid 로 하고 grid-template-columns 속성으로 컬럼을, grid-template-rows 속성으로 로우를 나눌 수 있습니다. 예를 들어서 3 x 2 그리드를 만드는데, 컬럼 너비는 각각 100px, 200px 100px이고 로우 너비는 150px 200px이라면 아래와 같이 쓸 수 있죠. display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: 150px 200px; 유연한 크기 단위 fr 이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있습니다. 예를 들어서 3 x 2 그리드에서 컬럼의 너비를 1 : 1 : 1로 하고 싶다면 아래처럼 할.. 2023. 10. 21. CSS 플렉스박스(Flexbox) 기능 정리 플렉스박스 만들기 display: flex; 기본 축과 교차 축 배치 방향 flex-direction을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row입니다. 기본 축 정렬: justify-content justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start입니다. 교차 축 정렬: align-items 교차 축 방향으로 정렬할 때는 align-items를 사용합니다. 기본 값은 stretch(늘려서 배치하기) 입니다. 요소가 넘칠 때: flex-wrap 요소가 넘치는 경우 flex-wrap: wrap을 지정해주면 교차 축 방향으로 넘어가서 배치됩니다. 간격: gap 숫자를 하나만 쓰면, 모든 방향의 간격을 지정할 수 있습니다. 세.. 2023. 10. 20. CSS flex 요소의 크기 정리 flex-basis 속성 flex-grow와 flex-shrink를 쓰면서 요소들의 크기를 정할 때 특이한 점이 있었습니다. 우리가 정한 width나 height 값으로 크기가 결정되는 게 아니란 거였는데요. 플렉스박스에서는 요소들의 크기가 유연하게 늘어나거나 줄어들었습니다. 사실 플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있습니다. flex 정렬에는 기본 축(Main Axis)과 교차 축(Cross Axis)이 있습니다. 기본 축에서는 시작 크기를 정해 놓으면 플렉스박스 안에서 유연하게 최종 크기가 결정됩니다. 크롬 개발자 도구에서 플렉스박스의 요소를 검사해 보면 빗금을 친 부분만큼의 시작 크기에서, 화살표만큼 최종 크기로 늘어나거나 줄어드는 걸 볼 수 있습니다. (위 예시.. 2023. 10. 20. CSS 스타일 우선순위 정리 (Cascading) 캐스케이드(Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말하는데요. 한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 스타일 시트의 종류 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 예를 들어서 브라우저 기본 CSS에서 아래처럼 쓰고 있다고 가정해 볼게요. h2 { display: block; font-size: 1.5em; ... font-weight: bold; } 이때, 우리가 style.css 파일에서 아래처럼 쓰면, 우리가 작성한 스타일시트(Author .. 2023. 10. 19. 이전 1 2 3 다음
