본문 바로가기
frontend/CSS

왜 body에는 display: flex; 선언이 먹히지 않지?

by Mr.코딩 2023. 7. 28.

flexbox와 css-grid를 섞어 쓸 수 있지?

 

chatGTP

예, Flexbox와 CSS Grid는 둘 다 레이아웃을 구성하는 강력한 CSS 기술이며, 필요에 따라 함께 사용할 수 있습니다. 각각의 기술은 다른 목적과 사용 사례를 가지고 있으며, 조합하여 복잡한 레이아웃을 구현하는 데 효과적으로 사용될 수 있습니다.

 

Flexbox는 주로 1차원 레이아웃을 다루는데 사용되며, 한 줄 또는 한 열에 있는 요소들을 배열하는 데 적합합니다. 이것은 주로 행 또는 열에 따라 아이템을 배치하는 데 유용합니다.

 

CSS Grid는 2차원 레이아웃을 다루는데 사용되며, 행과 열 모두에 대한 강력한 레이아웃 시스템을 제공합니다. 그리드 레이아웃은 보다 복잡한 그리드 기반의 디자인을 구현하는 데 사용될 수 있습니다.

 

두 기술을 함께 사용하면 각각의 장점을 활용하여 다양한 레이아웃을 구현할 수 있습니다. 예를 들어, Flexbox를 사용하여 한 줄에 있는 요소들을 정렬하고 그리드를 사용하여 이러한 행들을 구성할 수 있습니다. 또는 반대로, 그리드를 사용하여 아이템을 2차원 그리드로 배치한 다음, 그리드 셀 내부의 내용을 Flexbox를 사용하여 정렬할 수도 있습니다.

원래 flexbox나 css-grid를 선언하는 건 부모 컨테이너에서 하는 거잖아? 그런데 왜 body에는 display: flex; 선언이 먹히지 않지?

 

chatGTP

정확히 말씀드리자면, "body" 요소에도 "display: flex;"를 선언하는 것은 가능합니다. 그러나 "body" 요소는 일반적으로 루트 요소이며, 기본적으로 브라우저에 의해 기본 스타일이 적용됩니다. 이로 인해 "body" 요소에 직접 "display: flex;"를 선언해도 다른 요소들에 적용되지 않을 수 있습니다.

 

"body" 요소에 "display: flex;"를 선언하더라도 내부의 자식 요소들은 그대로 블록 요소로 처리될 수 있습니다. 따라서 "body" 요소에 적용한 "display: flex;"는 "body" 자체가 플렉스 컨테이너로 동작하도록 만들어주지만, 자식 요소들이 플렉스 아이템으로 바뀌지는 않습니다.

그럼 여타의 스타일 적용은 body에 직접 하지 않는 게 좋겠네?

 

맞습니다. 보통 일반적인 스타일은 "body"에 직접 적용하는 것은 권장되지 않습니다. "body"는 문서의 루트 요소이며, 웹 페이지의 전반적인 레이아웃과 스타일링을 조정하기 위해 사용하는 것이 아닙니다.

 

일반적으로 웹 페이지의 레이아웃과 스타일은 "body"의 하위 요소들에 적용되어야 합니다. 이를 위해서는 레이아웃을 만들기 위한 적절한 컨테이너를 만들고, 해당 컨테이너에 스타일을 적용하는 것이 좋습니다. 예를 들어, "header", "main", "footer" 등의 요소는 "body"의 자식 요소로 사용자 지정 레이아웃을 구성하는 데 적합합니다.

전체를 두 블록으로 나누기 위해 아래처럼 코드를 작성했어? 어떠니?

 

더보기 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구획과 포지션 연습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="total">
      <div class="content">
        <header class="header">
          <div class="header1">헤더1</div>
          <div class="header2">헤더2</div>
          <div class="header3">헤더3</div>
          <div class="header4">헤더4</div>
          <div class="header5">헤더5</div>
        </header>
        <main class="main">
          <div class="main1">메인1</div>
          <div class="main2">메인2</div>
          <div class="main3">메인3</div>
          <div class="main4">메인4</div>
          <div class="main5">메인5</div>
        </main>
        <article class="article">
          <section class="design">디자인</section>
          <nav class="detail-list">디자인 상세</nav>
        </article>

        <footer class="footer">
          <div class="footer1">푸터1</div>
          <div class="footer2">푸터2</div>
          <div class="footer3">푸터3</div>
        </footer>
      </div>
      <aside class="ad">
        <div class="ad1">광고1</div>
        <div class="ad2">광고2</div>
        <div class="ad3">광고3</div>
        <div class="ad4">광고4</div>
        <div class="ad5">광고5</div>
      </aside>
    </div>
  </body>
</html>

 

chatGTP

네, 작성하신 코드는 전체를 두 개의 블록으로 나누기 위해 올바르게 구성되었습니다. "content"와 "ad"라는 두 개의 블록으로 전체를 구분하고 있으며, "content" 내부에는 "header", "main", "article", "footer"가 포함되어 웹 페이지의 주요 컨텐츠를 담고 있습니다. 또한 "ad"는 광고와 관련된 내용들이 들어가는 부분으로 나누어져 있습니다.

이렇게 전체를 두 블록으로 나누는 것은 효과적인 레이아웃 구성을 위한 좋은 접근 방법입니다. 이제 "content"와 "ad"에 각각 필요한 스타일을 적용하면 웹 페이지를 원하는 레이아웃으로 디자인할 수 있을 것입니다.

body는 루트 요소라고 했잖아? html도 루트 요소고 body도 루트 요소지?

 

chatGTP

실례합니다. 제가 이전 답변에서 "body"가 루트 요소라고 말씀드린 것은 잘못된 설명이었습니다. 올바른 용어는 "html" 요소가 루트 요소(root element)이고, "body" 요소는 "html" 요소의 하위 요소로서 웹 페이지의 본문을 나타내는 요소입니다.

body는 웹페이지의 최외곽 컨테이너라고 볼 수 있나?

 

chatGTP

 "body"는 웹 페이지의 최상위 컨테이너이고, 주요 콘텐츠들은 이 "body" 내부에 위치하여 웹 페이지의 레이아웃을 구성합니다. "body"에 스타일을 직접 적용하기보다는 "body" 내부의 하위 요소들에 스타일을 적용하여 웹 페이지를 디자인하는 것이 일반적인 접근 방법입니다.

body 자체에 스타일(CSS)를 적용하는 게 권장되지 않는 이유를 간단히 다시 말해 줘.

 

chatGTP

body 자체에 스타일(CSS)을 직접 적용하는 것이 권장되지 않는 이유는 다음과 같습니다:

1. 시맨틱한 구조 유지: HTML은 문서의 구조를 의미론적으로 정의하는데 사용됩니다. 웹 페이지의 구조를 "header", "main", "footer" 등의 시맨틱한 요소로 나타내는 것이 중요합니다. body에 스타일을 직접 적용하면 이러한 시맨틱한 구조를 무시하고 스타일을 적용하게 될 수 있습니다.

2. 재사용성과 유지보수: body에 직접 스타일을 적용하면 스타일이 해당 웹 페이지에만 적용되므로 재사용성이 떨어지고 유지보수가 어려워집니다. 대신 클래스나 ID 같은 선택자를 사용하여 구체적인 요소에 스타일을 적용하면, 스타일을 다른 웹 페이지에도 재사용할 수 있으며 유지보수가 훨씬 쉬워집니다.

3. 오버라이딩 문제: body에 스타일을 적용하면 해당 스타일이 자식 요소에 영향을 미칩니다. 이로 인해 의도하지 않은 스타일이 발생하거나 다른 스타일을 오버라이딩하는 문제가 발생할 수 있습니다. 따라서 최대한 구체적인 선택자를 사용하여 스타일을 적용하는 것이 좋습니다.

따라서 웹 페이지의 구조를 시맨틱하게 정의하고, body에 직접 스타일을 적용하는 것보다는 클래스와 ID 등의 선택자를 사용하여 스타일을 구체적으로 적용하는 것이 더 좋은 웹 디자인 및 개발 접근 방법입니다.

 

 

Bard
body 태그는 웹 페이지의 최상위 요소이기 때문에, body 태그에 스타일을 적용하면 웹 페이지의 모든 요소에 스타일이 적용됩니다. 따라서, body 태그에 스타일을 적용하면 웹 페이지의 디자인을 변경하기 어려워질 수 있습니다. 또한, body 태그에 스타일을 적용하면 웹 페이지의 성능이 저하될 수 있습니다. 따라서, body 태그에 스타일을 적용하는 것은 권장되지 않습니다.

부모 컨테이너에 'css grid'를 선언한 상태에서, 그 자식 컨테이너 중 특정 섹션에 따로 flexbox를 선언해도 되나?

 

chatGTP

네, 부모 컨테이너에 CSS Grid를 선언한 상태에서 자식 컨테이너 중 특정 섹션에 따로 Flexbox를 선언하는 것은 가능합니다. CSS Grid와 Flexbox는 각각 다른 레이아웃 모델이지만, 서로를 보완하는 방식으로 함께 사용할 수 있습니다. 이러한 조합은 더욱 유연하고 다양한 레이아웃을 구현하는 데 도움이 됩니다.

'frontend > CSS' 카테고리의 다른 글

단, 내가 구축하고자 하는 그리드는 뷰포트의 크기에 따라 줄어들거나 새로 생성되도록 해야 해.  (0) 2023.08.02
모듈화된 상태에서의 CSS 선택자 방법  (0) 2023.07.29
텍스트든 이미지는 해당 컨텐츠를 컨테이너 중앙에 배치하려면 일단 flexbox를 선언한 다음.  (0) 2023.07.28
컨테이너 또는 박스에 컨텐츠를 맞추려면? ★  (0) 2023.07.28
flexbox와 CSS grid -- 둘 중에  (0) 2023.07.28
[필기] CSS Grid │ 1분 코딩 (유튜브)  (0) 2023.07.28
[필기] CSS Flexbox │1분 코딩 (유튜브)  (0) 2023.07.28
[필기] 포지션 position │생활코딩  (0) 2023.07.27

관련글

티스토리툴바