1강
다양한 개발자 종류.
웹서비스 : 브라우저에 나오는 모든것.
브라우저: 코드 실행기.
개발자도구에서 코드 볼 수 있음
직접 개발한 코드 실행하기위해
여기서는 VScode사용.
핸드폰으로 브라우저 키면 나오는 브라우저-- 반응형 앱. 어플은 웹앱. 사용하는 기기에 따라서 페이지 크기 등이 다르게 나옴.
어플로만 서비스 제공되는 것은 앱, 앱서비스라고 함.
2강
확장자: 어떤 언어로 만들어진 것인지 알려줌.
파일 트리: 부모/자식/형제
부모: 더블클릭한 폴더
그 안에 있는 것: 자식. 그리고 자식들끼리는 형제관계
들여쓰기로 표시됨.
4강
태그의 특징
사이즈에 따라 두가지
block요소:태그하나가 가로 전부 차지(span 등)
inline요소:자기 너비만큼만차지(div등)
종속태그: 다른 태그들과 함께 상호작용하는 태그.
선택박스 <select><option>
목록<ol>,<li>``<ul>사용.
넘버링하려면 li 태그를 ol로 감싸기,
기호사용하려면 li태그를 ul태그로 감싸기
표태그 등.
<head>태그는 검색 엔진을 위한 곳
<header>은 위쪽에 있다는 것
어디로 갈 지 정할 수 있으면 <nav></nav>
컨텐츠 실제로 있으면 <section></section><div>태그로 전부 사용 가능. 다만 찾기가 조금 어려워 태그 이름을 직관적으로 사용.
학습위해 <div>이용.
<br>줄바꿈
<hr>은 수평선
3강
마크업: 텍스트들의 표시 및 지정표기
전자계산기-->종이문서를 디지털화-->
제목, 부제목 , 단락 등 표시==>마크업
즉, 마크업은 지정표기하는 것.
현재의 HTML은 HTML5
HTML은 공간을 만들고 공간을 무엇으로 채울 지 설정하는 언어.
수많은 태그들.
시작태그, 종료태그.
이 완성된 한줄의 코드를 요소(element)라고함.
태그들은 약속된 명령어.
약속된 명령어: 고유한 기능 가짐.
시작태그와 종료태그 동일해야함.
<strong>은 굵게
<u>밑줄
기울이기
빈태그(내용없음)
시작태그 하나만 써도 됨.
<br>은 줄바꿈태그.(엔터역할)
<hr>줄긋기(수평선 긋기)
특정기능
<button></button>
:버튼 태그
<textarea></textarea>
:입력창 태그
<img src="image.png"/>
:이미지 태그
<vidieo ><source src="video.mp4"></video>
:동영상 태그
약속된 명령어: 고유한 기능 가짐.다만, 속성과 값으로 부가적인 기능 구현가능.
<input type="">
type="text"
type="passward"
type="checkbox"
type은 특정한 속성에 특정한 값만 가지게됨.
<input type="" placeholder="">
placeholder=""는 약간의 안내문자? 직접 정의한 내용 적어줄 수 있음.(지시문자)
이해가 중요
5강
프론트엔드
백엔드
사용자가 보는 화면 user interface(UI)
배너: 백엔드로부터 데이터 받아 프론트엔드가 그려줌.
백엔드: 데이터를 다룸
데이터 조합해 프론트엔드로, 프론트엔드로부터 받은 데이터 저장.
좋은 백엔드개발자: 데이터 잘 활용할 수 있어야 함.
프론트엔드 언어
웹:HTML, CSS,JS
HTML:기본 골격. 공간 지정,정의
CSS:디자인 담당으로 공간 꾸밈
JS:동적인요소들 다룸
라이브러리
프레임워크
:리엑트,Vue,앵귤러
리엑트를 거의 주로 시장에서 사용.
리엑트, 뷰:JS다룰때 더 편리하게 해 줌.
앱:구글(안드로이드), 애플(스위프트)
크로스 플랫폼:리엑트 네이티브,플러터
프런트엔드에서 주로 자바스크립트 사용
벡엔드: 많은것 사용. 자바에는 자바, 스프링..
웹개발에는 자바스크립트, 인공 지능과 머신러닝에는 파이썬 사용.
각각의 영역에 맞는 언어들이 존재함. 시작시 HTML,CSS,JS 모든언어 공통이니 이 세개 먼저 배울 것.
6강
CSS:HTML의 색,크기, 정렬 등 꾸며주는 영역.
속성: 어떤 항목을 제어 해 줄 것인가.
값: 어떻게 제어할 것인가.
CSS
선택자{
속성: 값;
}
마지막에 반드시 세미콜론!(;)
한 선택자에 여러 속성 쓸 수 있음.
태그에 속성과 값 입력방법: 별다른 지정, 연결 필요하지 않으나 수정시 불편,
태그 <stlye> 쓰고 요소 불러오기 방법 : 태그와 CSS속성이 HTML내에서 분리되어있기에 어떤 태그에 적용할지 선택자 필요. 한번에 여러영역 수정 등 할 수 있기에 유지보수측면에서 아주 좋음.관심사 분리 되어있지 않음,
css만드는 방법: 파일로 분리되어있어 연결작업필요. 실무에서 많이 사용
- `
==> 전체 선택자.클래스명==> 해당 클래스 선택자. 내용만 바뀔경우 사용.#` 아이디명 ==>해당아이디(단 하나)선택자
html 태그들은 모두 박스로 이루어져 있음.
border기준으로 바깥여백은 margin.안쪽여백은 padding 그 안에 컨텐츠
border박스는 고정된 박스 크기 안에 여백과 내용 집어넣는 형태 안에 물건은 작아짐.
contents박스는 컨텐츠 사이즈만 고정되어 여백과 테두리 나중에 바꿔주게 됨. 즉 화물 자체의 크기가 바뀌는 것이 아니라 완충재를 얼마나 둘러주느냐.
border사이즈를 미리 정하고 만드는 것이 좋음. 그러나 기본값은 box size==>contents
7강
block요소: 수직으로 쌓임
inline요소: 자기가 필요한 사이즈 만큼 자동으로(배치 어렵)
flex: 정렬시 많이 사용. 여러 태그 하나로 묶어서 정렬.
정렬기준-:부모박스.관련속성도 부모박스에 적어주기.
처음 html은 얖div요소들을 적고 이것은 block요소기에 세로로 정렬됨. --> flex사용하려면 부모박스에 display:flex; 기본값으로 박스들 수평으로 나열됨.
2가지 옵션: 수직(세로)나열: flex-direction:column;
가로로 가운데 정렬할때 이때는 align-items이용해야
세로면 justify-content:center;
수평나열:flex-direction:row;
justify-content:center; 추가하면 자식박스들이 부모박스의 가로 기준으로 가운데 정렬됨
align-items:center; 추가시 자식박스들이 부모박스의 세로 기준으로 가운데 정렬
사이즈는 부모박스의 가로, 세로사이즈.
- *
flex-direction과
justify-content는 항상 같은 방향!!
align-items는 항상 수직방향!//
박스 나열되는 방향을 생각해 활용
position: 별도 설정하지 않을 경우 static이 기본.이때 각종 속성 비활성화됨.
앱솔루트: 절대적 위치.그 페이지 자체의 절대적 위치 지정. 스크롤 하면 같이 움직임.
릴레이티브: 상위박스 기준 상대적위치 지정.
fixed:화면 기준으로 절대적 위치 지정.위치 바뀌면 안되는것
