Section1 / Unit2 : HTML

코드스테이츠 수업 2일 차!

오늘 배운 내용 복습을 해보자

---

• <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
• <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
• <input> 요소에 type을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.

---

• <div>, <span> 태그는 영역을 설정할 때 필요한 태그이다.
  차이점으로는, div 태그는 영역을 한 줄 차지하고 span 태그는 컨텐츠 크기만큼 공간을 차지한다.
  
  
• <ul>, <ol>, <li> 태그는 목록을 만들 때 필요한 태그이다.
  <ul> 태그는 순서가 필요 없는 목록을 만들 때 사용
  <ol> 태그는 순서가 있는 목록을 만드는 데 사용
  <li> 태그는 ol과 ul의 각 항목들을 나열할 때 사용
• <input> 요소 중 대표적인 것들
  text : 텍스트 입력
  password : 비밀번호 입력
  radio : 라디오 버튼(여러 개 선택지 중 하나만 선택할 때 주로 사용)
  checkbox : 체크박스(여러 개 선택지 중 다중 선택 할 때 주로 사용)
  file : 파일 선택
  select : 선택 입력
  textarea : 문장 입력
  button : 버튼 입력

---

 

추가적인 공부를 해보자

 

<시맨틱(Semantics) 요소>

 

의미 : 웹페이지의 레이아웃만을 위한 요소, 의미를 가진 요소

이점 :

• 요소가 가진 목적이나 역할을 알아보기 쉽다
• 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다
• 개발자에게 태그 안에 채워질 데이터 유형을 제안
• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(naming)를 반영

많이 사용하는 요소들 :

• <h1>~<h6>
• <article>
• <header>
• <footer>
• <nav>
• <section>
• 등등..

(mdn 참고)