[코드스테이츠_FE_40기] Day5: HTML 기초

KoEunseo·2022년 6월 29일
0

코드스테이츠

목록 보기
2/45

HTML

  • 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어

input

input은 self closing tag이다.
1. text
2. password
3. checkbox
4. radio
(+) textarea

  • 라디오버튼 name을 지정해주어야 같은 그룹으로 설정되어 옵션 중 하나만 선택
  • 체크박스는 여러가지 옵션을 선택할 수 있다.
  • textarea는 닫는 태그 필요! 줄바꿈이 가능하다.

사용법

<input type="text">
<input type="password">
  
<input type="checkbox" checked>
  
<input type="radio" name="drink" value="coffee">커피
<input type="radio" name="drink" value="beer">맥주

button

button type의 디폴트값은 button이 아닌 submit이다.
!type이 submit이면 새로고침됨!
일반 버튼의 의미로 사용할 경우 button임을 명시하자.

속성값 설명
button 해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시함.
submit 해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시함.
reset 해당 버튼이 폼 데이터를 초기값으로 리셋하는 리셋 버튼(reset button)임을 명시함.

사용법

<button type="submit">제출</button>
<button type="button">버튼</button>
<button type="reset">초기화</button>

시멘틱 요소

semantic : 의미가 있는, 의미론적인

  • article 독립적이고 독립적인 콘텐츠 ex)포럼, 블로그 게시물, 사용자 의견, 신문기사
  • section 관련된 컨텐츠
  • aside 본문 외 중요하지 않은 요소. ex)광고
  • nav 사이트 안내. ul 목록 형태로 사용하는 것이 보통.
  • main 메인 콘텐츠

section vs article
article 독립적 = 재사용 = 더 구체적

id vs class

고유한 것 vs 반복되는 영역

profile
주니어 플러터 개발자의 고군분투기

0개의 댓글