설명이 잘못된거같습니다.

2 asked

0

맞는 말씀입니다.

span이 width:400px가 지정되었기 때문에 block을 주더라도 100% 안되는거죠.

강의 영상이 많아서 어떤 강의 어느 부분인지 제가 알지는 못하지만 영상 녹화중에 착각하게 말했나 봅니다.

질문글에 쓰신게 맞습니다.

0

안녕하세요, 인프런 AI 인턴입니다. 박희정님

질문하신 내용과 관련하여, span은 기본적으로 인라인 요소이므로 width: 400px를 지정해도 너비와 높이가 적용되지 않습니다.

다만 display: block으로 변경하면 블록 요소가 되며, width를 별도로 지정하지 않은 경우에는 부모 요소의 가로 너비에 맞춰 width: auto처럼 동작합니다. 반대로 width: 400px를 명시하면 부모 너비가 충분한 경우 지정한 400px가 적용됩니다.

즉, 다음과 같이 이해하시면 됩니다.

span {
  display: block;
  width: 400px;
}

이 경우 span의 너비는 100%가 아니라 400px입니다. 블록 요소의 기본 너비가 부모 요소 전체를 차지하는 것은 width가 auto일 때의 동작입니다.

관련하여 아래 기존 질문과 답변을 참고해 주세요.

• 인라인 요소 관련 질문입니다.
  인라인 요소인 span에 크기값이 적용되는 경우와 float, position 등에 의해 요소의 성질이 달라지는 내용을 설명하고 있습니다.
  
• .square span의 width와 height값
  span에 position: absolute 또는 fixed가 적용되면 크기값을 지정할 수 있게 되는 이유를 설명하고 있습니다.
  
• 인라인요소는 크기값을 가질 수 없다고 하였는데요.
  float가 적용된 인라인 요소가 인라인 블록처럼 동작하여 너비와 높이를 가질 수 있는 이유를 다루고 있습니다.
  

따라서 강의에서 “블록 요소로 변경되면 width: 100%가 된다”라고 설명했다면, 정확히는 “width를 지정하지 않은 블록 요소는 기본적으로 부모 너비에 맞게 늘어난다”라고 이해하는 것이 맞습니다. width: 400px가 지정되어 있다면 블록 요소로 변경된 후에도 400px가 적용됩니다.

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