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. CSS 선택자 정리 CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg.. 2023. 10. 19. CSS의 Display 정리 블록(Block) 위에서 아래로 차례대로 배치되는 요소입니다. 크기를 지정할 수 있습니다. 다음 태그들은 기본적으로 display 값이 block입니다. , , …, 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치됩니다. 블록과 달리 크기를 지정할 수 없습니다. 다음 태그들은 기본적으로 display 값이 inline입니다. 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있습니다. 인라인 블록 (Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다. float 속성 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다. 블록, 인라인 .. 2023. 10. 19. 이전 1 2 다음
