드림엘리 : 프론트엔드 입문 - 3. html(2)

태그

• 의미가 있는 symantic 태그 사용하기
• element(node): <태그 명 attribute>contents</태그명>

Box

• item들을 sectioning 쉽게 도와주는 태그들
• 안에 contents가 없으면 사용자에게 보여지지 않음
• ex) header, footer, aside, main, section, article, nav, div, span, form
• div 태그가 아닌 section 태그(header,nav, asiede, main, footer 등)로 구역을 나누는 것이 좋다
• article 태그 : 여러가지 item들을 그룹화해서 재사용 가능한 아이들이 모아져 있는 것을 말함, 반복되는 아이들을 묶어준 것
• div 태그 : 묶어서 스타일링 할 경우, 혹은 그냥 묶고 싶을 때 아무때나 잘 쓰임
• h1태그는 contents를 꾸며서 바뀌어서 나오므로 엄밀히 말하면 box형 태그는 아니다.

item

• 브라우저가 자동적으로 렌더링 해줘서 사용자가 볼 수 있는 태그
• ex) a, video, button, audio,input, map, label, canvas, img, table
• a 태그 : href, target

block level 단위

• 한줄에 하나 차지
• div 태그

inline level 단위

• 공간이 허용하면 다른 태그 옆에 배치 가능
• b 태그 : 텍스트르 볼드체 화
• span 태그, input 태그

list

• ol 태그 ordered list
  • 숫자화 리스트
• ul 태그 unordered list
  • 숫자화 되어 있지 않은 리스트
• li 태그

input 태그

• 데이터를 사용자에게 요구해서 사용자로부터 데이터를 받음
• label 태그와 함께 사용 : 입력받을 값의 이름
• label의 for과 input의 id에 동일한 이름을 줘서 고유 식별자를 갖게 함

팁

• mdn 사이트로 attribute 확인해가면서 쓰자

개발자 마인드

1. 뭐든지 나눠보자
2. 큰그림을 먼저 보자