인프런 커뮤니티 질문&답변
작성한 질문수
<span> 태그와 <div>, <p> 태그 관련 질문입니다!
해결된 질문
작성
·
444
0
안녕하세요 강사님! 질문 드릴 게 몇 가지 생겨서 또 찾아오게 되었네요ㅋㅋㅠㅠ
1. <span>과 <div> 요소 관련
전체적인 코드를 보면 강사님께서 이미지 태그를 inline 요소인 <span> 태그로 감싼 후, css 파일에서 display:block으로 바꾸셨습니다
span 태그를 사용한 후, 나중에 css에서 block으로 성질을 바꿔주는 것과 처음부터 block 요소인 div 태그로 감싸는 것과 무슨 차이인지 궁금합니다!
2. <p> 태그 관련
section.global 영역에서 강사님께서 비서서비스,수행기사서비스 등과 같은 이미지를 넣으실 때 이번에는 p 태그로 img를 감싸셨는데 p 태그로 이미지를 감싸신 이유가 궁금합니다! 이미지 위치 잡는 건 p 태그와 div 태그와 비슷한데 간격..? 같은 문제로 p 태그를 감싸신 건가요?
답변 2
1
skyj6978님 안녕하세요?
skyj6978님께서 질문하신대로 <span>을 굳이 속성을 변경해주지 않고,
바로 <div>로 감싸줘도 틀리지 않습니다.
어차피 inline속성을 block속성으로 변경하면 같은 결과를 주게 되니깐요...
하지만..
실무에서 HTML Markup은 나혼자만 보고 마는 파일이 아닌
팀작업시 여러 실무자분들과 공유도 할 수 있는 부분으로 누가봐도 직관적인 작성이
필요합니다.
한마디로...
중요도와 비중에 따라 같은 block요소일지라도
전체 큰 박스구조은 <div>로 감싸주고 그보다 작은 부분에는 <p>태그를 적용하며,
기타, 부가적으로 삽입되는 이미지나, 부분적 스타일변경에 사용되는 부분에는
<span>으로 감싸주고 속성을 변경해주지요...
이부분이...규칙이 아닌 퍼블리싱 실무의 코딩방법중 하나이고, 무언의 약속이라 생각하심 될 듯 합니다.
skyj6978님께서는 마크업에서 정말 중요한 block요소, inline요소에 대한 구분과 이해가
확실하셔서 이런 질문도 하실 수 있는겁니다. 멋지십니다~
조금 만 더 힘내셔서 열공하신다면..반드시 좋은 결과가 있으리라 생각됩니다. ^^화이팅입니다^^
0
상세한 답변 감사드립니다^^ 직관적인 코드를 위해서 그렇게 작성하신 거였네요! 그동안 코드를 직관적으로 써야한다는 말은 많이 들어왔지만, 어떻게 하면 직관적으로 코드를 짤 수 있을지,마크업을 할 수 있을지 제대로 감이 안 잡혔는데 강사님의 설명에 윤곽이 조금이나마 잡히는 것 같네요! 또, 직관적이라는 단어의 의미에 대해서도 다시 생각해보는 계기가 되었습니다..! 너무나 기초적인 질문 같아서 처음에는 질문을 올릴까 수없이 망설였는데 올리길 잘한 것 같습니다! 아직 응용도 제대로 못하고, 인강 보면서 겨우 겨우 따라가는 수준이지만, 계속 열심히 공부하다 보면 실력이 늘겠죠..ㅋㅋㅋ? 공부하다가 또 모르는 부분이 생기면 여쭤보러 오겠습니다! 다시 한 번 감사드려요ㅠㅠ!