inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자를 위한 HTML 기초

section 내에서 여러요소를 그룹핑해야 되는 상황에 대해 질문드립니다.

472

자스린

작성한 질문수 18

0

section 내에서 여러요소를 그룹핑해야 될 때, section 안에 section을 넣을 수 있나요? 아니면 div(예 : div1, div2, div3)로 사용하는게 좋을까요?

예를 들어, 아래와 같은 코드에서요! 

HTML/CSS

답변 2

1

조은

네. Section 안에서 Section을 사용하셔도 됩니다.

구역을 명확하게 의미적으로 분리 가능한 경우에는 Section 요소를,
단순히 CSS로 레이아웃을 잡기 위해서 분리하는 경우에는 DIV 요소를 사용하시면 되지만,
구획을 나눴다는 것 자체가 보통 의미적으로 분리하는 행위에 가까워서 대부분의 경우 Section 요소를
사용하시면 해결될 거라 생각됩니다.

0

자스린

제가 어떻게 html 요소들을 '의미적으로'으로 나눌지 아닐지에 대한 기준을 잡지 못해서 추가 질문드립니다.ㅠㅠ

어떻게 보면 의미적이고 어떻게 보면 그냥 UI적으로만 구분인 같아, 머리속에 혼란이 좀 있네요ㅠㅠ
혹시, 컴포넌트처럼 구분하는 거랑 의미론적으로 구분하는 거랑 다른건가요?

form 강의를 보면, 아래처럼 section이 아니라 div를 사용하셨는데, 그 이유가 의미론적인 구분이 아니라 단순하 묶어주기 위한 태그가 필요해서 div를 사용하신건가요? 

<form>
  <fieldset>
    <legend>사용자 정보</legend>
    <div>
      <label for="uid">아이디</label>
      <input type="text" id="uid" />
    </div>
    <div>
      <label for="upw">비밀번호</label>
      <input type="password" id="upw" />
    </div>
  </fieldset>
  <fieldset>
    <legend>배달 정보</legend>
    <div>
      <label for="tel">전화번호</label>
      <input type="tel" id="tel" />
    </div>
    <div>
      <label for="addr">주소</label>
      <input type="text" id="addr" />
    </div>
  </fieldset>
</form>

0

조은

안녕하세요,
답변이 늦어 죄송합니다!

개인 신상에 변화가 있어 조금 정신이 없었습니다.

-

말씀주신 것처럼 '크게 의미는 없지만 CSS를 위해서' DIV를 사용합니다.
그에 비해 Section은 'Section으로 묶인 요소 내부가 특정한 관심사로 이루어진 집합' 이어야 합니다.

그래서 Section 요소를 사용할 때의 권장사항에
'Heading 요소를 사용하여 해당 섹션의 의미를 담아주면 좋다' 라는 내용이 존재합니다.

섹션5 노션링크 는 따로 없나요?

0

8

1

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

14

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

13

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

16

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

37

2

claude plugin 방법 자세히 부탁드려요

0

39

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

34

2

최근 코테, 과제 테스트 트렌드

0

55

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

36

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

36

2

Gemini로 진행가능 여부 궁금합니다.

0

58

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

25

2

프롬프트 11 진행 완료

0

41

2

파트3 수급 부분

0

39

2

input 과 label 의 작성 순서

0

698

1

a 링크의 href 속성

0

817

2

리액트에서 picture 사용법

0

226

0

dialog 미지원 브라우저를 위한 fallback 관련 질문입니다

0

470

4

React의 컴포넌트 개발과 시맨틱 구조 작성의 연관성에 대해 궁금한 점이 있어 질문드립니다.

0

276

1

tr 요소 내에 th, td 혼용 관련 질문입니다

0

321

1

시맨틱 구조 관련해서 질문있습니다.

0

244

1

details 엘리먼트의 이점에 대해

0

251

1

address 요소 설명 중 궁금한 것이 있어서 질문드립니다.

0

383

3

자바스크립트를 이용할 때 button type 지정에 관한 궁금증

1

193

1