• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

<span> 태그와 <div>, <p> 태그 관련 질문입니다!

21.07.09 12:18 작성 조회수 312

0

안녕하세요 강사님!  질문 드릴 게 몇 가지 생겨서 또 찾아오게 되었네요ㅋㅋㅠㅠ

1. <span>과 <div> 요소 관련 

전체적인 코드를 보면 강사님께서 이미지 태그를  inline 요소인 <span> 태그로 감싼 후, css 파일에서 display:block으로 바꾸셨습니다

<span class="arrow"><img src="img/arrow_btn.png" alt=""/></span>

span 태그를 사용한 후, 나중에 css에서 block으로 성질을 바꿔주는 것과 처음부터 block 요소인 div 태그로 감싸는 것과 무슨 차이인지 궁금합니다!

2. <p> 태그 관련 

section.global 영역에서 강사님께서 비서서비스,수행기사서비스 등과 같은 이미지를 넣으실 때 이번에는 p 태그로 img를 감싸셨는데 p 태그로 이미지를 감싸신 이유가 궁금합니다!  이미지 위치 잡는 건 p 태그와 div 태그와 비슷한데  간격..? 같은 문제로 p 태그를 감싸신 건가요?

 <p class="img"><img src="img/con3_bg1.jpg" alt=""></p>

답변 2

·

답변을 작성해보세요.

1

skyj6978님 안녕하세요?

skyj6978님께서 질문하신대로 <span>을 굳이 속성을 변경해주지 않고,

바로 <div>로 감싸줘도  틀리지 않습니다.

어차피 inline속성을 block속성으로 변경하면 같은 결과를 주게 되니깐요...

하지만..

실무에서 HTML Markup은 나혼자만 보고 마는 파일이 아닌

팀작업시 여러 실무자분들과 공유도 할 수 있는 부분으로 누가봐도 직관적인 작성이

필요합니다.

한마디로...

중요도와 비중에 따라 같은 block요소일지라도 

전체 큰 박스구조은 <div>로 감싸주고 그보다 작은 부분에는 <p>태그를 적용하며,

기타, 부가적으로  삽입되는 이미지나, 부분적 스타일변경에 사용되는 부분에는

<span>으로 감싸주고 속성을 변경해주지요...

이부분이...규칙이 아닌 퍼블리싱 실무의 코딩방법중 하나이고, 무언의 약속이라 생각하심 될 듯 합니다.

skyj6978님께서는 마크업에서 정말 중요한 block요소, inline요소에 대한 구분과 이해가

확실하셔서 이런 질문도 하실 수 있는겁니다. 멋지십니다~

조금 만 더 힘내셔서 열공하신다면..반드시 좋은 결과가 있으리라 생각됩니다. ^^화이팅입니다^^

0

skyj6978님의 프로필

skyj6978

질문자

2021.07.12

상세한 답변 감사드립니다^^  직관적인 코드를 위해서 그렇게 작성하신 거였네요! 그동안 코드를 직관적으로 써야한다는 말은 많이 들어왔지만, 어떻게 하면 직관적으로 코드를 짤 수 있을지,마크업을 할 수 있을지 제대로 감이 안 잡혔는데 강사님의 설명에 윤곽이 조금이나마 잡히는 것 같네요! 또, 직관적이라는 단어의 의미에 대해서도 다시 생각해보는 계기가 되었습니다..! 너무나 기초적인 질문 같아서 처음에는 질문을 올릴까 수없이 망설였는데 올리길 잘한 것 같습니다! 아직 응용도 제대로 못하고, 인강 보면서 겨우 겨우 따라가는 수준이지만, 계속 열심히 공부하다 보면 실력이 늘겠죠..ㅋㅋㅋ? 공부하다가 또 모르는 부분이 생기면 여쭤보러 오겠습니다! 다시 한 번 감사드려요ㅠㅠ!