inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

ScrollTrigger 실무 활용_content영역 MarkUp & CSS

내용입력할때 p안쓰고 span쓰는 이유가 있을까요

196

김김김

작성한 질문수 2

0

내용을 입력하실때 <p>태그를 안쓰고 <span>태그를 쓰신다음 display:block으로 하신 이유가 있을까요?

HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger

답변 2

0

J.영

김샘님~

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

어떻게해도 상관없으나

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

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

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

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

 

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

J.young드림

 

0

인프런 AI 인턴

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

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

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

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

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

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

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

강의 문의드립니다.

0

84

3

마우스 채워지는 텍스트

0

88

2

스크립트 부분이 이해가 어렵네요

0

89

2

scrolltrigger pin-spacer 영역 없애는 법 있나요?

0

270

2

완성본 요청드립니다.

0

96

1

선생님 완성본 문의드립니다.

0

144

2

simplyscroll Plugin에 대해서 질문드립니다.

0

118

2

가로스크롤 갤러리 반응형에서 scrollTrigger 동작 문제

0

112

1

가로스크롤 scrollTrigger 가 작동되지 않습니다.

0

179

2

ScrollTrigger 플러그인이 작동되지 않는 것 같습니다

0

205

3

포트폴리오 문의드립니다.

0

123

2

섹션8 질문

0

141

2

강의요청

0

173

3

5차 완성본 요청합니다.

0

147

2

3차 y축으로 올라오는 갤러리제작

0

145

2

섹션 .con02 gsap 질문

0

280

3

scrolla 질문

0

140

2

header gnb splitting 적용문제

0

174

3

clamp, min max를 활용한 강의도 있나요??

0

180

1

완성본은 따로 없는건가요?

0

156

1

안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?

0

126

2

완성된 코드 자료 받아볼 수 있을까요?

0

180

1

섹션 14 테두리 밖 색상 제거

0

174

2

선생님

0

220

1