웹이란
- 인터넷에 연결된 컴퓨터를 사용하는 사람들이 꼭 IT 전문가가 아니더라도 서로 쉽게 정보를 공유할 수 있도록 만들어진 일종의 정보 공유 체계
HTTP란?
- 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response)에 대한 프로토콜
- h1 태그는 한페이지에 하나만 들어가게 작성하기
- alt 태그도 쓰는게 크롤링 점수에 높게 들어가.
- ol 안에 li가 있어야해.
<!-- 색상을 입력 받아요 -->
<input type="color" />
<!-- 진척도를 입력 받아요 -->
<input type="range" />
<img
alt="강아지"
src="https://img.freepik.com/free-photo/puppy-that-is-walking-snow_1340-37228.jpg"
width="200"
/>콘텐츠에 적절한 의미를 부여해 주는 각종 태그들(시멘틱 태그)
-
검색엔진에게 잘보일 수 있음.
-
전부 div 쓰지말고 적절하게 잘써
<header>이 태그는 헤더 부분을 의미해요</header>
<main>이 태그는 문서의 주요 내용을 의미해요</main>
<footer>이 태그는 푸터 부분을 의미해요</footer>
<article>이 태그는 독립된 하나의 글 또는 내용을 의미해요</article>
<section>이 태그는 묶을 수 있는 하나의 단위를 의미해요</section>
<p>이 태그는 문단을 의미해요</p>특별한 의미 없이 레이아웃만 잡아주는 div 태그와 span 태그
<div>태그는 가로로 화면 가득 영역을 차지하지만 => 블럭<span>태그는 담고 있는 콘텐츠의 넓이 만큼만 가로 영역을 차지해요 => 인라인
CSS
선택자 {
스타일속성명: 스타일속성값
}- 스타일 속성이 너무 많다는 단점
의사 클래스
- 선택자 뒤에 붙임으로써 선택자가 특정 상태일 경우에 대한 스타일을 지정할 수 있다.
button:hover {
background-color: red;
}
/* hover, focus, active, visited, disabled 등
*/의사 요소 클래스
-
선택자의 특정한 부분을 가르킬때
-
그 안에서 몇가지를 가르키고 싶을때
::before 등
주요속성
box-sizing (중요)
- 박스 모델의 어디까지를 너비와 높이로 할지.
포지션 속성
- 요소의 배치 방식
- sticky
- relative : 상
- absolute : 부모 위치를 기준으로 해서 움직임
- fixed : 보이는 화면을 기준으로
FLexBox
#자바 스크립트
애로우 펑션을 사용하는 이유
this 바인딩
-
화살표함수는 함수를 처음에 만들때 객체가 this 로 고정이된다.
-
중괄호 쓰면 return 이 안돼.
리터럴하게 만드는 방식
속성에 접근
- 점찍기
- 대괄호 표기법
속성 추가하기
- 점찍고 추가. 기존 객체를 변화.
const person2= {...person,job:"Developer"}속성 삭제하기( 쓸일은 없음)
- delete person.name
- 객체는 key-value로, 순서를 보장하지는 않음.
- 엑셀이나 csv 구현은 객체를 사용하면 안되고, 순서가있는 map 같은걸 사용
- 배열은 순서를 보장
콜백함수
배열 메서드
.filter()- 특정 조건을 만족하는 모든 요소로 새 배열을 생성해요
- 특정 조건을 기반으로 데이터를 필터링할 때 주로 사용해요.
reduce()
- 마지막 결과값이 필요할때
indexOf()
- 요소가 없으면 -1을 반환
concat,slice
- 새로운! 배열을 만들어준다.
스프레드 연산자
-
배열을 간단하게 복사!
- 배열은 참조타입이기때문에 그냥 바꾸면 원본타입이 바뀌고.
-
함수 인자로 활용하기(이건 별로 안씀)
구조분해
- 배열에서 구조분해
- 객체에서 구조분해
// 객체 예시
const person = { name: 'Alice', age: 25 };
const { name:"ㅎㅇ", job = '없음' } = person; // job은 기본값으로 '없음'을 가지게 돼요.
const person = { name: 'Alice', age: 25, job: 'Developer' };
const { name, ...rest } = person;
// rest는 { age: 25, job: 'Developer' }가 되어요.
json
JSON은 그냥 “문자열”이에요.
이 사실을 잊지 마세요. 다만 일정한 형식을 갖춘 문자열인 거에요.
const jsonString = '{"name": "Alice", "age": 25, "isStudent": false}'
제이슨은 안에 key가 "" 로 되어야한다
- JSON.parse()
- JSON 문자열을 JavaScript 객체로 변환할 때
JSON.parse()를 사용해요.
- JSON 문자열을 JavaScript 객체로 변환할 때
- JSON.stringify()
- JavaScript 객체를 JSON 문자열로 변환할 때
JSON.stringify()를 사용해요.
- JavaScript 객체를 JSON 문자열로 변환할 때
비동기 작업
promise
-
약속
-
이 작업이 끝났을때 뭐 해줄게. 성공적으로 끝났을떄, 안됐을때 (resolve,reject)
-
최초에 펜딩이다가 변화함
async/await
- promise 객체에 대해서 await 을 할 수 있다.
- promise 객체에 대해서 then을 쓸 수 있다.
계산기 만들기
- UI는 구현할것. 최대한 비슷하게.
- 숫자를 제외한 기능은 AC,+,= 요 세개만 구현할것.
- prev 값,
- 첫번째 한번 연산만 가능하게.
