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

안녕하세요 🙂 질문주셔서 감사합니다.

웹 페이지를 제작할 때에는 h1, h2, button, li 태그 등 다양한 태그들을 사용하는 것은
코드 상에서 각각의 태그들이 하는 역할이 무엇인지를 분명히하고, 검색엔진 최적화에 훨씬 좋습니다.

다만, 강의에서는 다른 태그들은 많이 사용하지 않고 div 태그를 사용했는데요,
우선 html과 css를 잘 모르는 분들이라도 이 강의를 통해 최종 프로젝트를 보다 쉽게 이해하며 만들 수 있게 하기 위함이였습니다.

그래도 헷갈리지 않도록 전부 div 태그를 사용한 후 class 이름과 id 이름으로 각각의 요소들의 역할을 구분해주었고, 목적이 '크롬 익스텐션' 을 개발하는 것이기 때문에 seo 또한 상관 없다고 판단해, div 태그를 사용해서 코드를 작성했습니다 🙂 좋은 질문 감사드립니다!

안녕하세요, 인프런 AI 인턴입니다. 김용인님 질문에 대한 답변을 드리겠습니다.

강의에서 버튼 역할을 하는 요소에 div 태그를 사용하는 이유는 다양한 경우가 있을 수 있습니다. 여기에는 몇 가지 이유가 있을 수 있으며, 실제로 어떤 이유로 div 태그가 사용되었는지는 강사님의 스타일에 따라 달라질 수 있습니다.

1. 디자인과 스타일링의 용이함: div 태그는 기본적으로 블록 요소이며, CSS로 자유롭게 스타일링할 수 있어 디자인적 요구를 충족하는 데 유리합니다. button 태그도 CSS로 스타일링이 가능하지만, 브라우저마다 기본 스타일이 약간씩 다르다는 점에서 div가 더 일관된 결과를 줄 수 있습니다.

2. 역할의 분리: 강사님이 div를 사용한 것은, 코드의 명확성을 위해 버튼의 역할을 시각적으로 구분하려고 했던 것일 수 있습니다. 그러나 실제로 클릭이나 폼 제출 등의 기능을 담당하는 경우, button이나 form 태그를 사용하는 것이 더 명료하고 웹 접근성 측면에서도 적절합니다.

3. 자바스크립트로 조작할 때의 편리함: div 같은 요소는 내부에 여러 속성을 자유롭게 추가할 수 있고, 특정 상황에서 더 편리하게 컨트롤할 수 있는 경우가 있습니다. 하지만 실제 유저 상호작용을 요구하는 경우라면 button 태그가 더욱 권장됩니다.

따라서 김용인님이 제안하신 대로, button 및 form 태그 사용은 HTML의 의미와 웹 접근성을 고려했을 때 더 좋은 선택일 수 있습니다. 강의에서는 빠르게 프로토타입을 만들기 위해 선택된 방법일 수 있으며, 실제 프로젝트에서는 목적에 맞는 적절한 태그를 사용하는 것이 좋습니다.

유사한 질문에 대한 답변을 아래의 링크에서 확인할 수 있습니다:
- HTML에서 div와 button 태그의 역할

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