Extra Form

네, CSS를 사용하여 section 하위의 특정 태그를 그리드 레이아웃에서 제외할 수 있습니다. 이를 위해 CSS 그리드의 grid-area 속성을 사용할 수 있습니다. 예를 들어, h1 태그가 그리드 레이아웃에 포함되지 않도록 다음과 같이 할 수 있습니다:

html
<section> <h1>제목</h1> <div>내용 1</div> <div>내용 2</div> <div>내용 3</div> <div>내용 4</div> </section>
css
section { display: grid; grid-template-columns: repeat(2, minmax(0, 50%)); } section h1 { grid-column: 1 / -1; grid-row: 1; } /* 그리드 레이아웃에서 h1을 제외하고 나머지 요소들을 그리드에 배치 */ section > *:not(h1) { grid-column: auto; grid-row: auto; }

위 코드에서 section h1은 그리드의 전체 너비를 차지하도록 설정되고, grid-column: 1 / -1grid-row: 1을 사용하여 h1 태그를 그리드의 첫 번째 행 전체에 걸치게 합니다. 이후 나머지 요소들을 section > *:not(h1)를 사용하여 그리드 레이아웃에 배치할 수 있습니다.

이렇게 하면 h1 태그는 그리드 레이아웃에 포함되지 않지만, section 내의 다른 요소들은 그리드 레이아웃에 맞게 배치됩니다.

추가시작추가끝


질문•답변

상품문의, 포인트관련 문의는 멤버십 지원게시판에 작성해주세요. (프로젝트>기술지원)

  1. 공지사항 notice

    본 게시판의 용도

    Date2024년 06월 11일 Category기타
    read more
  2. Read More
  3. XE 특정 카테고리만 안 보이는 문제

    Date2024년 06월 11일 CategoryXE
    Read More
  4. Read More
  5. 네, CSS를 사용하여 section 하위의 특정 태그를 그리드 레이아웃에서 제외할 수 있습니다. 이를 위해 CSS 그리드의 grid-area 속성을 사용할 수 있습니다. 예를 들어, h1 태그가 그리드 레이아웃에 포함되지 않도록 다음과 같이 할 수 있습니다: html코드 복...

    HTML/CSS/JS section{ display: grid; grid-template-columns: repeat(2, minmax(0, 50%)); } 이런 코드가 있을 경우에 section 하위의 모든 태그는 적용이 되는데 특정 태그 h1은 반복되는 구조에서 제외할 수 있어?

    Date2024년 05월 27일 CategoryHTML/CSS/JS
    Read More
  6. Read More
  7. Read More
  8. XE 성인인증 프로그램

    Date2024년 02월 22일 CategoryXE
    Read More
  9. Read More
  10. 비밀글입니다.

    XE XEDTION 파스텔 게시판 설정 중 분류에 대해 문의드립니다.

    Date2023년 11월 06일 CategoryXE
    Read More
  11. 비밀글입니다.

    XE 소상공인 및 자영업자를 위한 커뮤니티 사이트 제작용 테마 패키지

    Date2023년 08월 27일 CategoryXE
    Read More
  12. 비밀글입니다.

    기타 ‘민관협력 디지털 사회 혁신 지원체계 구축운영 사업’ 관련 협조 문의

    Date2023년 08월 16일 Category기타
    Read More
  13. 비밀글입니다.

    XE 성인인증화면

    Date2023년 08월 06일 CategoryXE
    Read More
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 19 Next
/ 19