(SEB_FE) Section1 Unit2 HTML기초

1. HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
2. HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
   자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
3. div, span 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
4. ul, ol, li 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
5. input 요소에 type 을 설정하여 다양한 종류의 input 요소를 활용할 수 있다.
6. id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(semantic) HTML 문서를 작성할 수 있다.
7. HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
8. 시맨틱 요소가 무엇인지 설명할 수 있다.
9. 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
10. 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.

1. HTML의 기초

• HTML은 프로그래밍 언어가 아닌, 웹 페이지의 뼈대를 구성하는 '마크업'언어
• HTMl은 tag들의 집합이다.
• HTML은 TREE 구조이다

💫주로 쓰이는 HTML 태그 목록💫

• div VS span
  div 태그는 한 줄을 자리차지!
  span 태그는 컨텐츠 내용만큼 자리차지!

  즉 공간을 얼마나 차지하는지(줄바꿈의 여부)에 대한 기본 설정이 다르다! div는 흑마법이니 남용하지 않도록 주의하자. 뒤에서도 설명하겠지만, 시맨틱 요소가 중요시 되는 요즈음, 아무 뜻 없는 div나 span은 그닥 '좋은' 태그라고는 할 수 없다. (말 그대로 無意味...)
  

• img 태그는 닫는 태그가 없다.
  ⭐img 태그에서 꼭 사용해야하는 필수 속성 "src"
  ⭐alt 속성을 적어서 사용자 경험을 증대시키자!

• a 태그: 링크태그. 필수 속성은 href로 어느 링크로 이동할 지 주소가 value가 된다. target속성을 blank로 두면(ex. target="blank") 새탭에서 링크가 열리게 된다.

• 리스트 태그: ul(unordered list), ol(ordered list), li(list item)
  li은 무조건 ul이나 ol태그 안에 있어야 한다.
  또한, ol,ul태그 바로 밑에는 꼭 li태그여야 한다.
  BUT! li태그 안에는 다른 속성태그가 올 수 있다.

• input 태그, textarea 태그
  input태그의 type 속성: text, radio, checkbox 등등
  (radio는 하나만 선택 가능, checkbox는 다중 선택 가능)

• button 태그

2. 시맨틱 요소(semantic element)

• HTML5에서 시맨틱 웹을 중시하여 새로이 만든 것. 시맨틱은 '의미를 가진'이라는 의미로 의미를 가진 요소를 사용하는 방식을 추구하기 시작.
• CSS로는 부여할 수 없는, 태그의 의미를 중시 (CSS로도 똑같이 bold체, 폰트의 사이즈 키우기 등 가능하지만, h1 태그가 주는 의미가 사라짐)

💫주요 시맨틱 요소 정리💫

• article : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
• footer : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
• header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
• nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 ul을 넣어 목록 형태로 사용합니다.
• main : 문서의 주된 콘텐츠를 표시합니다.