2020.12.22 메모

[4교시]
-------------------------------------------------------------------
p150 요약03

HTML5에서 문서의 구조화란 왜 중요한가?
-문서는 장, 절, 그림, 소제목 등 일반적인 구조에 따라 작성된다. 하지만, HTML5 이전에는 구조를 표현하는
태그들이 없었기 때문에 <p>, <div> 태그를 적절히 사용하여 사용자가 화면에서 장, 절, 그림 등을 구분할 수 있도록 하였다.
하지만, 태그와 단어를 중심으로 HTML 페이지 안을 검색해야 하는 검색 엔진에게 문서의 구조를 명확히 전달하는
웹 페이지를 만들어야, 검색이 잘 되고 웹 사이트의 가치가 올라간다. 이를 위해 HTML5에서는 문서의 구조를 명확히 표현하는 시맨틱 태그를 도입하였다.

문서 구조화를 위해 HTML5에서 새로 표준화한 태그는 어떤 것이 있는가?
-<header>, <section>, <article>, <nav>, <aside>, <footer>, <main>, <summary>, <mark> 등의 태그가 있고 이들을 '시맨틱 태그'라고 부른다.'

폼(form)의 목적은 무엇인가?
-폼의 본래 목적은 웹 페이지에서 사용자 입력을 받아 서버로 전달하는데 있었다. 하지만 현재 많은 웹 애플리케이션들은 사용자 인터페이스로 사용한다.

폼 요소에는 어떤 것들이 있는가?
-폼 요소는 텍스트 입력 창, 버튼, 체크박스, 라디오버튼, 콤보박스 등 다양하다.

<label>태그를 사용하는 경우 특별한 이점이 있는가?
-<label> 태그는 폼 요소와 캡션을 한데 묶어 하나의 단위로 다루어지게 한다. <label>을 사용하지 않아도 무관하지만,
 사용하는 경우 캡션만 클릭해도 폼 요소를 클릭한 것과 동일한 효과가 이루어져, 라디오버튼과 같이 작은 모양을 마우스로 정확히 클릭하는 어려움을 해소할 수 있다.

3장에서 학습한 HTML 태그를 간단히 정리
-시맨틱 구조화 태그 : <header> <nav> <section> <article> <aside> <footer>
-시맨틱 블록 태그 : <fighure> <detalis> <summary>
-시맨틱 인라인 태그 : <mark> <time> <meter> <progress>
-폼 태그 : <form>
-텍스트 입력 태그 : <input type="text|password"> <textarea>
-버튼 태그 : <input type="button|submit|reset|image"> <button type="button|submit|reset">
-선택형 입력 태그 : <input type="checkbox|radio"> <select> <datalist>
-시간 입력 태그 : <input type="month|week|date|time|date-local">
-데이터 유형 태그 : <input type="number|range|color|emil|url|tel|search">
-폼 관련 기타 태그 : <label> <fieldset>
-------------------------------------------------------------------
CSS(Cascading Style Sheet)?
-HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
-CSS로 작성된 코드를 스타일 시트(Style Sheet)라고 부름
-현재 CSS3 : CSS level 3 (css1-css2-css3-css4 현재 표준화 작업 중)
-CSS3의 기능 : 색상과 배경, 텍스트, 폰트, 박스 모델(Box Model), 비주얼 포맷 및 효과, 리스트, 테이블, 사용자 인터페이스

CSS3 스타일 구성
-예) <span> 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일시트

 span { color : blue; font-size : 20px; } /* span 태그 스타일 선언*/
  1        2    3  4  5     6          7                      8
1:셀렉터 2:프로퍼티 3:콜론 4:값 5:세미콜론 6:프로퍼티 7:값 8:주석

셀렉터(selector) : css3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
프로퍼티(property) : 스타일 속성 이름. 약 200개 정도의 프로퍼티(property) 있음
대소문자 구분 없음 : BODY&body, Backgrount-Color&background-color

[5교시]
우선 순위 : 1.style 속성(<p style="">) 2.<style> 3.external.css 4.브라우저 디폴트 스타일

[7교시]
셀렉터(selector)
-HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능

태그 이름 셀렉터
-태그 '이름'이 셀렉터로 사용되는 유형
-셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용

calss 셀렉터
-점(.)으로 시작하는 이름의 셀렉터
-HTML 태그의 'class' 속성으로만 지정 가능
 calss 속성이 같은 모든 태그에 적용

id 셀렉터
-#으로 시작하는 이름의 셀렉터
-HTML 태그의 'id' 속성으로만 지정 가능

id 셀렉터와 class 셀렉터 비교
-id 셀렉터
-id 속성의 목적은 각 태그를 유일하게 구분
 동일한 id 속성이 같지 않도록 HTML 파일 작성하는 것이 바람직
 자바스크립트 코드에서 id 값을 가진 태그 객체를 찾을 때 문제됨(8장 2절 DOM 객체 찾기 참고)

-class 셀렉터
-적합한 활용
 여러 태그를 하나의 그룹으로 묶어 단체로 동일한 CSS 스타일을 적용할 때 적합
 class 속성 값이 같은 태그에 모두 CSS 스타일 적용

태그 사용이 많아 코드 블럭 처리