HTML 기초와 심화

• HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현
• HTML의 구조와 문법에 대해서 이해하고 적용
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명

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

• id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(sementic) HTML 문서를 작성 가능
• HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성 가능
• 시맨틱 요소가 무엇인지 설명할 수 있고, 시맨틱 요소를 사용하는 이유에 대하여 이해
• 검색을 통해 시맨틱 요소를 찾고 적절하게 적용

HTML 기초: 정의

• HTML : 문서의 틀, 내용을 다루는 코드, 마크업 언어
• Tag의 집합 : <>로 묶인 HTML의 기본 구성 요소
• html - head - body로 구성
• 일반 태그(<tag>, </tag>), 닫힌 태그(<tag />)의 차이

많이 쓰이는 태그

• div, span : 블록 레벨 요소(Block-level Element), 인라인 레벨 요소(Inline-level Element)
• img : 이미지 삽입 태그,src속성과 같이 쓰임, 닫힌 태그
• a : 링크 삽입 태그, href속성과 같이 쓰임 + target: 링크를 눌렀을 때 새탭을 만들거나 그 페이지에 나가거나 하는 방법을 설정해줌
• ul, li : 목록 만들기 태그,
• ⭐️input, textarea : 입력 폼 태그, text, password, radio, checkbox 등 사용자가 입력해 상호작용할 수있는 태그 + placeholder: 입력 폼에 써줄 내용을 작성
• button : 버튼 태그, 버튼 만듦! 패캠에서는 자세히 보기로 css를 통해 만들었던 것과 조합해서 만듦!

<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<button>Login</button>
<label> <input type="checkbox">Keep Login </label>

시멘틱 요소

• 의미를 가진 요소를 사용하는 방식을 추구
• 시멘틱 : '의미가 있는, 의미론적인'
• div와 비슷하지만 의미있는 블록 코드가 사람이 구별하는데 훨씬 편리하고 쉽고, 검색엔진에 키워드를 제공해 더 쉽게 노출될 수 있어 씀!
• 시멘틱 태그들

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

걍 div처럼 렌더링하는 컴퓨터에겐 의미 없지만 우리랑 검색엔진이 구별하기 쉽게 코드 작성하는 거임

HTML 심화

• 만들고 싶은 앱의 와이어프레임을 그릴 수 있음
• 와이어프레임만 보고 HTML로 코딩
• <div> 요소 또는 <section>, <header>, <form>(사용자 입력 제출 용도) 등의 시맨틱 요소로 영역을 구분하는 이유를 이해
  + <form>은 사용자 입력 제출 용도로 사용됨, 주로 <input>, <button>을 감쌈!
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해

웹 페이지의 구조잡기

• 처음엔 모방하며 프로토타이핑(모형을 만들어 기능의 요구사항 파악)하며 이해해보기
• ⭐️구조 파악하기

  1. 큰 틀에서 영역 정하기몇개의 댓글과 댓글을 입력하는 텍스트박스, 버튼과 아래 댓글이 나타나는 영역 2개
  2. 각 구성요소의 영역(컴포넌트)을 태그로 표현하기: 댓글 9 - <div>, 댓글입력창 - <input type="text">, 등록 버튼 - <button>, ⭐️여러태그를 하나의 영역으로 - <div>, <section>, <form>
  3. 써보기

  <div>
    <div>댓글 9M</div>
    <input type="text" placeholder="댓글을 입력해주세요" />
    <button>등록</button>
  </div>

  이 사진을 보고 구조 파악해 코드 써보기(버튼 태그 안에 좋아요, 싫어요 img 태그도 있음)

ID, Class 사용

• 위 이미지 그대로 분석
• 페이지에서 댓글 입력창 같이 하나밖에 없는 고유된 내용이면 ID를 쓰고, 쓴 댓글 <div>의 경우 여러개이므로 class를 붙여줌

+실습: id와 class를 넣어 css로 꾸민 모습

<input id="id-input" class="input focus" type="text" placeholder="ID"></input>
<input id="password-input" class="input focus" type="password" placeholder="password"></input>
<button id="login-button">Login</button>
<input id="keep-checkbox" type="checkbox">Keep Login</input>

금요일은 CSS공부함!

CSS 설명 사이트 진짜 좋음!