강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

Real Story님의 프로필 이미지
Real Story

작성한 질문수

그리드(Grid) 핵심이론 및 실전 활용

부모요소에 중첩된 자식요소 일괄배치 개별배치

10:50초경 질문입니다

작성

·

169

1

<div class="item one">

   <div>1</div>

이 html을 CSS에서 .item.one div {}로 나타내는 걸 처음 봐서요. "item one"에서 왜 스페이스가 들어갔는지 궁금합니다!

퀴즈

CSS Grid에서 `grid-template-areas`와 `grid-area`를 함께 사용하는 주된 목적은 무엇일까요?

그리드 컨테이너의 배경색과 테두리를 설정하기 위해 사용해요.

레이아웃 영역에 이름을 부여하고 해당 이름을 가진 아이템을 배치하기 위해서죠.

HTML 문서 내 요소의 순서를 CSS와 무관하게 강제로 고정하려고 사용해요.

그리드 아이템 내부의 텍스트 정렬 방식을 일괄적으로 지정하는 용도예요.

답변 1

2

이건 CSS 기초이론 부분입니다.

CSS 클래스는 중복해서 사용할 수 있습니다.

스페이스로 구분되면 .item .one 이라면 아래처럼 됩니다.

  <div class="item">

    <div class="one"></div>

  </div>

스페이스 없이 붙여 쓰면 .item.one 이라면 아래처럼 됩니다.

  <div class="item one"></div>

코딩웍스 유튜브 채널에 있는 이론 영상들을 검색해서 보시기를 추천드립니다.

[중급이론] 자손선택자 vs 자식 선택자 - HTML+CSS+JQUERY 실전 이론

https://www.youtube.com/watch?v=wHy1VGai91A

Real Story님의 프로필 이미지
Real Story

작성한 질문수

질문하기