웹앱 서비스란?
1. [브라우저] 코드를 읽고 해석해주는 코드 실행기
2. [반응형 앱] 이 반응형 웹을 어플로 만든 것을 '웹앱'이라고 한다. *웹앱서비스 (크롬>배달의민족)
VS Code 프로그램 설치
1. Extensions : VSCode 사용을 도와주는 확장 모듈(좌측 하단에 있음)
2. Auto Rename Tag : HTML 태그 수정 시 시작태그와 종료태그를 자동으로 함께 수정해 주는 모듈
3. Code Spell Checker : 사전에 없거나 자주 사용되지 않는 단어가 사용되면 경고해 주는 모듈
4. Error lens : 문제가 있는 부분을 직관적으로 알려주는 모듈
5. Live Server : html을 작성할 때 변경된 점을 바로 확인할 수 있도록 도와주는 모듈
HTML은 약속된 '명령어'이다
1. 태그(tag) : 약속된 명령어 (고유한 기능을 가지고 있음)
-> 속성과 값으로 부가적인 기능을 구현할 수 있음
2. 개발자는 외우는 것보다 이해하는 것이 중요하다.
HTML의 핵심
[과제] 종속태그-목록태그 사용
1. 종속태그: 다른 태그와 함께 상호작용을 해야 작동하는 태그(혼자 아무것도 못함) ex.선택박스, 목록, 표 태그
2. [선택박스] select, option, optgroup
[목록] ol, ul, li
3. [class파일] 수업중 실습용도
[cyworld] 수업 종료후 혼자 복습용도 (실제 과제용)
[cyworld-mento] 레퍼런스코드를 복사 붙여넣기하는 용도(레퍼런스 코드 기반용)
4. !DOCTYPE html: 최신버전의 html 코드라는 의미
5. hr
6. div, span
7. html이란, 공간을 만들고 그 안에 어떤 내용으로 채울지 결정 지어주는 언어이다. 시작태그와 종료태그 안에 내용을 넣어서 만들어주고, 태그는 약속된 명령어이고, 약속된 명령어는 고유의 기능을 가지고 있고, 여기에 속성과 값으로 부가적인 기능을 구현할 수 있으며, 이 속성과 값은 중첩해서 사용할 수 있다.
8. disabled="true" : 옵션 비활성화
selected="true" : 비활성화된 것을 선택이 된 상태로 만들어주는 명령어
9. radio 버튼
10. name="gender" : 여성과 남성 중 둘 중 하나만 선택 가능하도록 설정
11. input, value를 이용한 버튼 태그도 있다 정도로만 알기 (잘 사용 안하는 버튼 태그)
12. 컨트롤+물음표 : 주석 처리 (맥은 커멘드+물음표)
CSS
[과제 부분] 8강 39:18
1. 속성: 어떤 항목을 제어해줄지 결정하는 것
값: 어떻게 제어할지 결정하는 것
2. [주의] 반드시 마지막에 세미콜롬(;)을 붙여줘야 한다. 종료처리필수(세미콜론)
3. 태그가 많아질수록 html 파일의 가독성이 떨어지고, 수정을 필요할 때 해당하는 태그를 직접 찾아서 수정을 해야 하고, 한번에 하나씩만 수정이 가능하기 때문에 유지 보수 측면에서 굉장히 비효율적이다.
4. listup 와 같이 선택자를 이용해서 연결하는 것이 효율적
5. class 중복 사용 가능
6. 이모지: 윈도우키+마침표(우분투 이모지)