CSS6 display: contents로 gird 문제 해결하기 위의 사진과 같이 gird를 나누기 위해 아래의 코드를 작성하였다. SUN MON TUE WED THU FRI SAT .calendar-grid { height: 240px; background-color: white; border-radius: 0 0 10px 10px; display: grid; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(7, 1fr); grid-template-areas: 'sun mon tue wed thu fri sat' 'day day day day day day day' 'day day day day day day day' 'day day day day day day day' 'day day day .. 2023. 6. 12. CSS Selector - 타입 선택자 1. :first-of-type 같은 타입 중 첫 번째 요소를 선택한다. Movie List Toy Story Zootopia Inside Out Finding Nemo Coco p:first-of-type { color: red; } :first-child 를 사용하면 무조건 부모의 첫 번째 자식을 선택하기 때문에 section 태그의 첫 번째 자식인 Toy Story 가 p 태그가 아니라는 이유로 글자색이 변경되지 않지만, :first-of-type 선택자는 같은 타입 중 첫 번째 자식을 선택하여 글자색이 변경되는 것이다. 이때 만약 서로 다른 태그들이 같은 class 를 가지고 있다면 상황이 달라진다. Movie List Toy Story Zootopia Inside Out Finding Nemo .. 2023. 4. 15. CSS Selector - 자식 선택자 1. first-child 부모의 첫 번째 자식을 선택함 Movie List Toy Story Zootopia Inside Out Coco Finding Nemo .movie:first-child { font-size: 26px; } 코드를 이렇게 작성하면 movie 클래스를 가지고 있는 요소 중 첫 번째인 Zootopia 의 폰트 사이즈가 바뀔거라 생각하지만 실제론 아무런 변화도 일어나지 않는다. ☆ first-child 는 말 그대도 부모의 첫 번째 자식을 선택하는 것인데, movie 클래스를 가진 li 요소의 부모는 ul 태그이고, ul 태그의 첫 번째 자식인 Toy Story 가 movie 클래스를 가지지 않기 때문에 해당하는 것이 없어 폰트 사이즈가 바뀌지 않는 것이다. 2. last-child.. 2023. 4. 15. inline 요소와 block 요소의 차이 html / css 기초를 정확히 공부하지 않고 코딩을 하다보니 인라인 요소와 블록 요소의 차이 때문에 css 에서 원하는 대로 속성이 적용되지 않는 문제가 생겼지만 무엇이 원인인지 찾지 못했던 경험이 있고, css 를 공부하다 보면 인라인 요소와 블록 요소에 따라 달라지는 것들이 은근히 많아서 처음부터 확실히 정리해두고 다음 단계로 넘어가자는 생각에 정리해보게 되었습니다. inline 요소 인라인 요소로 대표적인 것은 , 태그 등이 있다. 가지고 있는 컨텐츠에 크기가 맞춰지므로 따로 크기를 지정할 수 없다. 요소가 수평으로 쌓인다.(가로배치) 상 / 하 방향에 마진을 적용할 수 없다.(좌 / 우 마진은 가능) block 요소 블록 요소로 대표적인 것은 , 태그 등이 있다. 사용 가능한 최대 가로 길이를.. 2023. 4. 12. 이전 1 2 다음
