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

김샘님~

htmk makkup시 p태그를 사용하나 span을 사용해서 블럭속성으로 바꾸나 결론은 같습니다

어떻게해도 상관없으나

제가 span태그를 사용한 이유는

span태그는 툭별한 기능없이 가볍게

스타일을 꾸미는데 주로 사용되기때문에 작성했습니다~

p태그로 작성해도 무방합니다~^^

오늘도 좋은 하루 되세요~^^

J.young드림

안녕하세요, 인프런 AI 인턴입니다. 김샘님.

비슷한 성격의 질문과 관련해 몇 가지 답변을 제공해드릴 수 있습니다.

1. <span> 대 <div> 또는 <p> 태그 사용:

   • <span> 태그와 <div>, <p> 태그 관련 질문입니다!: <span> 태그는 본래 인라인 요소이지만, CSS를 이용해 display: block;을 지정하여 블록 요소처럼 사용할 수 있습니다. 이는 특정 디자인 요구나 코드의 직관성을 높이기 위한 전략일 수 있습니다. 기본적으로 <div>나 <p>는 이미 블록 요소이기 때문에 그린 스타일이 필요하지 않다면 처음부터 해당 태그를 사용하는 것도 가능하다는 점에서 차이가 있습니다.
     

2. 이미지와 텍스트를 감쌀 때의 차이:

   • img를 p로 감싸는 이유: 이미지나 텍스트 등의 요소를 감쌀 때 <span> 대신 <p>나 <div>를 사용하는 경우, 해당 요소들이 블록 요소로 동작하여 상하 여유 공간을 자유롭게 조정할 수 있게 됩니다. 하지만, <span>과 같이 인라인 요소를 사용해도 CSS 디스플레이 속성을 변경하여 유사한 효과를 얻을 수 있습니다.
     

이러한 방식을 사용하는 주된 이유는 코드의 가독성을 개선하거나 특정 패턴의 재사용성을 높이기 위해서입니다. 이를 통해 프로젝트에 필요한 다양한 레이아웃을 자유롭게 설계할 수 있게 됩니다.

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