멋쟁이사자처럼 프론트엔드 스쿨 2기 5_Day

aydennote·2022년 4월 4일
1
  1. 시멘틱 태그
    1) heading
    2) aside
    3) article
    4) section
  2. form 주변 요소
    1) fieldset과 legend
    2) form
    3) input

1. 시멘틱 태그

1) heading

h1, h2, h3 ... 를 포함한 heading 태그는 주로 제목, 부제목, 설명에 사용한다. 눈으로 보이는 이 요소들의 차이는 사이즈 밖에 없어서 h1은 큰 제목을 고정으로 사용하고 나머지는 사이즈에 맞게 사용했었다. 완전히 틀린 방법은 아니지만, 조금 더 의미 있는 요소를 사용하기 위해 h1 큰 제목, h2는 부제목, h3는 제목 밑에 설명과 같이 목적에 맞게 사용하는 것이 좋다.

2) aside

이전에 사용해 본 경험은 없다. 측면 메뉴바에 사용하는 걸로 알고 있었으나, 광고와 같이 본문 내용과 상관 없는 곳에 사용한다.

3) article

위젯, 알림, 공지사항 등 해당 페이지가 아닌 다른 페이지에서 재사용이 가능한 곳에 article를 사용한다.

4) section

저를 포함한 많은 분들이 헷갈려하는 태그가 article과 section 이다.
이 section 태그는 해당 페이지와 관련된 내용을 담고 있지만, 본문에 다른 내용과 구분할 때 사용한다.

2. form 주변 요소

1) fieldset과 legend


form 요소를 부모 요소 갖는 fieldset은 legend, input, label, button 요소를 그룹화할 때 사용합니다. legend 태그는 폼 그룹의 목적을 나타내는 제목을 의미한다. 반드시 <fieldset>의 첫번째 자식 요소로 사용해야한다.

2) form

<form action="데이터 받는 곳" id="아이디"> id로 button 요소와 연결되며,<button type="submit" form="아이디"> button 요소의 form 과 form 요소의 id 를 같게 설정해야 된다. 만약 여기서 label 요소까지 사용한다면, label의 for 속성까지 같게 설정해야 된다.

3) input

input 요소의 name 속성은 필수 입력으로 서버에 key 값, 입력한 데이터는 value 값으로 전송된다.
input 요소의 type 속성 radio와 checkbox는 name 속성을 같게 해야 그룹화된다.

profile
기록하는 개발자 Ayden 입니다.

2개의 댓글

comment-user-thumbnail
2022년 4월 5일

깔끔하게 정리하셔서 이해가 쏙쏙 되네요~~~
쉬는 시간 활용해서 복습 잘 했습니다!!😊😊
4월 5일도 파이팅입니다!!!!!

1개의 답글