CSS8 nth-child() 선택자로 홀수, 짝수번째 요소 선택하기 Todo 리스트나 표의 Element들에 대해 시각상 잘 구분하기 위해 색을 다르게 지정해주면 간단하지만 가독성이 올라갑니다. 따라해봅시다. ✅ To Do List 쉬기 잠자기 밥먹기 공부하기 일하기 드라이브가기 씻기 요리하기 끝내주게 쉬기 위와 같이 element들이 여러개 나열되어 있다면 .item:nth-child(odd) { background-color: lightcoral; } .item:nth-child(even) { background-color: beige; } 와 같이 odd, even을 사용하여 홀수와 짝수번째에 다른 효과를 줄 수 있습니다. 2020. 5. 24. 화면에 내용이 너무 많아서 css로 하나씩 지정하기 번거로울 때 화면에 보여줄 내용이 너무 많은데 하나하나 css로 적용하기 번거롭지 않나요? 행에 내용이 8개 뿐이었으나 그 이상 추가될 수 있다면? 새로운 행에대해 자동적으로 설정해 주는 속성이 있습니다. grid-auto-flow 인데요. 값에 column, row 두가지를 지정해줄 수 있어요. 열 방향으로 내용을 이어가고 싶다면 .grid { ... /* default setting */ display: grid; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); /* default setting에서 설정한 범위를 벗어날 경우 아래 코드로인해 자동으로 다음에 올 element들이 붙을 방향과 범위를.. 2020. 5. 24. grid-template으로 간편하게 레이아웃 구성하기 grid-template을 사용하면 정말 간단하게 레이아웃 배치할 수 있어요. 먼저 알아야할 것 grid-template에서는 repeat가 적용되지 않는다. grid-template에서 height을 지정하려면 충분한 height공간이 필요하다. .grid { display: grid; gap: 10px; height: 50vh; /* fraction: grid에서 사용 가능한 공간 grid-template에서 repeat는 적용되지 않는다. */ grid-template: "header header header header" 1fr /* header의 height: 1fr*/ "content content content nav" 2fr "footer footer footer footer" 1fr } .. 2020. 5. 24. grid로 웹 레이아웃 구성하기 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. MDN, "CSS grid", https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_La.. 2020. 5. 24. 이전 1 2 다음 LIST
