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

konan7979님의 프로필 이미지
konan7979

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

인라인 요소 관련 질문입니다.

작성

·

200

1

퍼블리싱의 모든것 인라인 요소 , 블록요소 , 인라인 블록 요소편에서

인라인 요소는 크기값을 갖을수 없다고 했는데

CSS로 HTML가로배치편에서 실습하실때

span태그에 width와 height값이 적용되는데 이유를 알수 있을까요?

답변 3

0

네. 모든 요소는 float 가 있으면 인라인블록이 됩니다. 그래서 크기값을 가질 수 있습니다.

0

display 속성을 변경하지 않았다면 span는 인라인 요소이기 때문에 width와 height값이 적용되지 않습니다.

만약 span에 absolute 또는 fixed가 있다면 모든 요소가 인라인블록으로 변하기 때문에 크기값을 적용할 수 있습니다.

어떤 영상의 어느 부분인지 더 자세히 알려주세요.

0

안녕하세요, 인프런 AI 인턴입니다. konan7979님의 질문에 대해 관련된 기존의 답변을 검토해 보았습니다.

질문하신 내용은 인라인 요소에 대한 크기값의 적용과 관련된 것으로 보입니다. 인라인 요소는 기본적으로 너비와 높이 값을 가질 수 없지만, 특정 CSS 속성이 적용되었을 때 예외가 발생할 수 있습니다. 그 중 하나로 display: inline-block 속성을 적용하면 인라인 요소가 블록 레벨 요소처럼 너비와 높이 값을 가질 수 있게 되는데요, 이는 인라인 요소가 ‘인라인 블록’ 요소로 취급되어 블록 레벨 요소의 특징을 부분적으로 가지게 되는 것입니다. 또한, position: absolutefloat 속성을 적용했을 때도 인라인 요소가 블록 레벨 요소처럼 동작할 수 있습니다.

위의 내용과 관련해서, 기존 답변 중 다음의 답변이 konan7979님의 질문에 부분적으로 도움이 될 수 있습니다:

  • “인라인요소는 크기값을 가질 수 없다고 하였는데요.”

    • 이 질문에서는 float 속성이 적용될 때 span과 같은 인라인 요소가 너비와 높이 값을 가질 수 있는 이유에 대해 설명하고 있습니다. float 속성이 적용됨으로써 인라인 요소가 인라인 블록 요소로 변경되어 크기를 가질 수 있게 된다는 내용입니다.
  • ”.square span의 width와 height값”

    • 이 질문은 span 같은 인라인 요소에 widthheight 값이 어떻게 적용될 수 있는지에 대한 질문으로, 답변에서는 position: absolutefixed가 적용될 때 인라인 요소가 인라인 블록으로 변경되어 크기를 가질 수 있다고 설명합니다.

위 답변들을 통해 인라인 요소에 크기 값이 적용되는 다양한 상황을 이해하실 수 있을 것 같습니다. 하지만 여러 가지 다른 상황이 존재할 수 있기 때문에, konan7979님의 실제 코드 상황이나 구체적인 예시를 근거로 확인하시는 것이 더 정확할 것입니다.

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

konan7979님의 프로필 이미지
konan7979

작성한 질문수

질문하기