1.후기
오늘은 어제보다 훨씬 수월했다. 수업 자체는 따라갈 만했다. 그런데 예전에도 강의만 듣고 혼자 실습해본 적이 있는데 그때 깨달은 것이 있다. 강의를 이해한 것과 디자인 시안만 보고 빈 파일에 <html></html>부터 코딩하면서 만들어보는 것은 하늘과 땅 차이라는 것이다. 지금 쉽다고 안심하지 말자!!!
2.새롭게 알게 된 것
Section1 Unit4 - [HTML] 기초
Chapter1. 웹 개발 이해하기
Chapter2. HTML 기초
Chapter3. HTML 심화
1) HTML은 마크업 언어
2) 태그 내부에 내용이 없다면 self-closing tag 사용
// 일반
<img src="#"></img>
// self-closing tag
<img src="#" />3)하이퍼링크 새 탭에서 열기
<a target="_blank" href="https://ko.wikipedia.org">
위키백과 (새 탭에서 열림)
</a>4) div와 span 차이
div: 한 줄 차지
span: 컨텐츠 만큼 차지
5) 라디오 버튼, 체크박스 차이
라디오버튼: 불가(그룹으로 묶어주었을 때)
체크박스: 중복 체크 가능
6) <input type = "text"> vs. <textarea></textarea>
input: 줄 바꿈 불가
textarea: 줄 바꿈 가능(멀티라인)
7) input type(유형) 자주 쓰는 요소
text/password/checkbox/radio
참고 사이트: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
8) HTML tag, attribute, contents
9) label과 checkbox
<label>
Do you like peas? <input type="checkbox" name="peas">
</label>10) why use semantic elements
-시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정
-여러 개발자가 함께 작업할 때
-요소 안에 채워질 데이터 유형 예측 용이
11) 대표적인 시맨틱 요소의 종류
<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.
주의: <div>, <span>은 시맨틱 요소 아님
12) 프로토타이핑
개발 초기에 시스템의 모형(원형, prototype)을 간단히 만들어 사용자에게 보여 주고, 사용자가 정보시스템을 직접 사용해 보게 함으로써 기능의 추가, 변경 및 삭제 등을 요구하면 이를 즉각 반영하여 정보시스템 설계를 다시 하고 프로토타입을 재구축하는 과정을 사용자가 만족할 때까지 반복해 나가면서 시스템을 개선해 나가는 방식
13) <form>
일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할. 목적이 명확하므로, 단순히 영역을 나누기 위해 사용하는 <div> 요소보다는 더 semantic한 요소 사용임. 단, 페이지 전환이 되는 액션이 발생할 수 있으므로 주의
예시1.
로그인 시 <form> 요소를 사용하여 <input> 요소, <button> 요소 등의 자식 요소를 감싸는 경우
14) id vs. class
id: 고유한 이름을 붙일 때
class: 반복되는 영역을 유형별로 분류할 때
15) <script>
HTML <script> 요소는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용. 보통 JavaScript 코드와 함께 씀.
예시1. <script> 요소를 사용해 외부 스크립트를 가져오기
<script src="javascript.js"></script>16) <section> vs. <div>
<section> : 일반 구획 요소
HTML5 표준의 탄생과 함께 생겨난 시맨틱 요소의 일부. HTML 문서의 독립적인 구획을 나타냄. 더 적합한 의미를 가진 요소가 없을 때 사용. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아님.
<div> : 콘텐츠 분할(division) 요소
플로우 콘텐츠를 위한 통용 컨테이너. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않음. HTML5 이전에는 하나의 구역을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양됨. 다만, 작은 구역에서 불가피하게 <div>를 사용해야 하는 "최후의 수단(as a last resort)"으로는 사용해도 괜찮음.
