<style> 에 *와 div 차이

[코드캠프] 시작은 프리캠프

CSS 배우기

해결된 질문

작성

안녕하세요

부산사는 유아람이라고 합니다.

수업 잘 듣고 있습니다.

한 가지 궁금한 점이 있어서 이렇게 글을 작성합니다.

*{} 가 전체 선택자이고

div {} 는 태그 선택자라고 가르쳐주셨는데, 마지막에 실험을 하는데서 궁금해서 말씀드립니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            width: 80px;
            height: 80px;
            border: 1px solid red;
            padding: 10px;
        }
        /* #contentBox {
            box-sizing: content-box;
        }
        #borderBox {
            box-sizing: border-box;
        } */
    </style>
</head>
<body>
    <div id="contentBox">박스 1</div>
    <div>박스 2</div>
    <div id="borderBox">박스 3</div>
</body>
</html>

<body>
1. <div>박스 1</div> 는 처음에 아무런 style을 지정하지 않았을 때, 박스로 나타나지 않고 그냥 텍스트 "박스 1"만 적혀있었는데, 이건 제 눈에 안보이는 박스가 이미 형성이 되어있는데 색이나 크기를 지정하지 않아서 그냥 텍스트로 보이는게 맞나요?
2. ```
     div {
            width: 80px;
            height: 80px;
            border: 1px solid red;
            padding: 10px;
        }
```
  이걸 지정하면서 보이지 않던 박스가 생긴걸까요?

밑에 설정을 한 div 전체니까 div{}로 하지않고 *를적용해서

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        * {
            width: 80px;
            height: 80px;
            border: 1px solid red;
            padding: 10px;
        }
        /* #contentBox {
            box-sizing: content-box;
        }
        #borderBox {
            box-sizing: border-box;
        } */
    </style>
</head>
<body>
    <div id="contentBox">박스 1</div>
    <div>박스 2</div>
    <div id="borderBox">박스 3</div>
</body>
</html>

이렇게 나오던데 이건 왜 이렇게 되는걸까요?

HTML/CSS javascript

답변 2

노원두

지식공유자

안녕하세요! 아람님!

아람님이 작성하신 <div>박스1</div> 태그의 뒤에는 보이지 않는 한 줄 전체의 박스영역이 자리잡고 있으며, 눈으로 보이지 않았을 뿐, 여기에 style을 주면서 그림이 그려진 것 뿐이랍니다!

* 이유를 꼼꼼히 살펴볼까요?

모든 태그에는 눈에 안보이는 네모박스로 감싸져있답니다!
이걸 우리는 박스모델 이라고 불러요!

이는 개발자도구에서 확인해 보실 수 있어요!

우측 html 태그에서, <div>박스1</div> 위에 마우스를 올리면 해당 영역이 표시돼요!

우측에서 상세한 사이즈도 확인해 볼 수 있답니다!
- 참고로, 태그는 블록요소와 인라인요소로 나뉘어질 수 있는데,
  대표적인 블록요소인 <div />는 한 줄 전체를 기본 박스 사이즈로 갖고,
  대표적인 인라인요소인 <span />은 자기 자신만큼의 박스 사이즈를 갖는답니다!

div 선택자를 지우고, * 을 사용하여, 모든 태그들을 빨간색 테두리로 바꿨어요.

내가 만든 상자는 3개인데, 왜 5개가 보일까요?!
그건 <html> 태그, <body> 태그를 포함해서 총 5개가 보여지기 때문이랍니다!

개발자도구를 통해 확인해 볼까요?!

아래는 <html /> 태그예요!

아래는 <body /> 태그예요!

마지막으로, html, body 안에 들어가지 못하고 상자들이 밖으로 삐져나온 이유는 html, body태그는 내부 태그를 감쌀 수 있도록 큰 사이즈를 줘야하는데, width: 80px, height: 80px 로너무 작은 사이즈로 만들어 놓았기 때문이랍니다!

그렇다면, html, body의 사이즈를 좀 더 여유롭게 주면 되겠죠?!
html => width: 500px, height: 500px
body => width: 300px, height: 300px

유아람

질문자

감사합니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 유아람님.

수업을 열심히 들으시고 코드 실험까지 하시면서 배우고 계신 점, 아주 인상적입니다! 질문해주신 *와 div 선택자에 대한 기본개념과 예외사항에 대해 설명드리겠습니다.

질문 1: div 태그의 기본 형태

박스의 기본 형태: 아무런 스타일을 지정하지 않으면, <div>는 블록 레벨 요소로 기본적으로 폭이 가능한 모든 공간을 차지합니다. 다만, 특별히 눈에 보이는 스타일(예: 배경색, 테두리 등)이 없기 때문에 “보이지 않는 박스”로 간주될 수 있습니다.
스타일 적용 후: div 선택자로 스타일을 지정하면, 명시한 속성(폭, 높이, 경계선)이 설정되어 시각적으로 보이는 박스가 형성됩니다. 따라서 div에 스타일을 주어 시각적인 박스를 만들 수 있습니다.

질문 2: 스타일 적용 시 변화

전체 선택자(*)와의 차이:
- * 선택자를 사용하면 문서 내의 모든 요소에 스타일이 적용되며, 따라서 div뿐만 아니라 body, html 등의 다른 요소들에도 같은 스타일이 적용될 수 있습니다. 이로 인해 불필요한 요소에도 영향이 미칠 수 있습니다.
- 이미지에 나온 것은 모든 요소(*)에 크기, 테두리 등을 설정함으로써 예상치 못한 결과가 생긴 것입니다. 특히, box-sizing: border-box; 설정은 요소의 경계선과 패딩을 포함한 전체 상자를 설정하기에 적용된 스타일에 따라 예상치 못한 배치나 중첩이 발생할 수 있습니다.

관련된 내용의 다른 답변을 참고하신다면 더 깊이 있는 이해가 가능할 수 있습니다:
- HTML/CSS 태그 선택자 및 전체 선택자 사용에 대한 설명

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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