tp134679 님의 블로그

1. 호이스팅의 개념1.1 평과와 실행단계2. 콜백함수2.2 함수의 참조     1. 호이스팅의 개념 호이스팅은 자바스크립트의 고유 특징으로 식별자를 선언 하는 과정에서 발생하는 현상입니다.선언문이 전체 소스코드의 중간에 있더라도 어디에 있든 상관없이, 선두로 끌어 올려진 것처럼 동작 하는 것 을 호이스팅 이라고 합니다.   1.1 평가와 실행 단계 호이스팅을 이해하기 위해선 평가와 실행단계의 개념을 알아야 합니다. 자바스크립트는 위에서 아래로 문서를 평가하는데 이 과정중에  실행단계와 평가단계 2단계로 나뉘어서 평가됩니다.  평가 단계평가단계는 js 안에 변수의 선언(할당 X)된 부분과 함수 를 먼저 평가합니다. 이때 선언이된 변수들과 함수가 최상단으로 끌어올려지는 것 처럼 보이는데 이를 호이스팅 이라..

1. 객체 의 타입과 성질 배열과의 차이 2. 객체 의 속성 추가와 덮어쓰기3. 객체 안의 객체3.2 객체안의 객체를 복사 1. 객체 의 타입과 성질 배열과의 차이객체는 변수하나에 여러가지 데이터를 담고 싶을 때 사용 합니다. 배열은 [] 대괄호 안에 하나의 변수에 여러 요소를 관리 하기 위해 쓰였으나  객채는 {} 중괄호 를 사용하여  하나의 변수에 그 변수의 여러가지 정보를 저장하기 위해 사용합니다.여기서 neme 를 준 부분 (변수에 속성을 준부분) 을 키(ket) 라고 하며 "a씨" (값을 받은부분을) 밸류(value)라고 칭합니다.  호출시 . 을 사용하여 ket 값을 호출가능 하지만 (" ")안에 있는 문자열이  ket 값일경우  [] 를 사용해서 호출합니다.  변수값 안의 함수도 . 을 사용..

1. 배열이란 2. 배열의 원시타입과 참조 타입. 2.1 스프레드 연산자.   1. 배열이란 그전 변수에는 하나의 값만을 담아서 사용하였지만 여러개의 객체를 불러야 할시에 하나하나 변수를 선언해야하는 번거로움이 있었습니다.  a b c d 를 선언하기 위해서 각각 변수를 선언해서 log를 해야 나타낼 수 있었기에 이를 그룹으로 묶어서  표한히기 위해 배열을 사용합니다. 배열 사용은 []  변수값을 묶어서 표현합니다. 배열은 데이터를 순서대로 저장하기에 원하는 값만 출력해서 보고 싶으면  log 값에 원하는 변수의 번호를  []에 넣어서 표현합니다.단 콘솔 로그에 [2] 의 값을 넣었지만 a3이 나왔다 그 이유는 배열은 그안의 변수를 순서대로 저장할때 첫번쨰 값을 1부터 저장하는게 아니라 0부터 시작하기..

1. 전역 스코프와 지역 스코프 2. function 함수 2.1 호출과 선언 3. return  1. 전역 스코프와 지역 스코프 스코프란 유효범위라는 듯으로  변수에 접근할 수 있는 범위 라고 볼 수 있다 스코프를 사용하는 이유는 - 영역을 구분하여 변수 충돌을 방지- 코드의 가독성 및 유지보수성 상향  을 위해서 사용한다. 스코프는 크게 전역 스코프와 지역 스코프로 나뉘며  전역에 선언된 변수로서 전체에서 접근이 가능하다.해당 사진은 전역 스코프와 함수 스코프 이해를 위하여 첨부한 사진으로  평가단계시 선언된 let ab를 읽고undefinde 값을 주고  지역스코프{}안에는 선언된 변수가 없기에 평가단계가 끝나게 된다. 이후 실행단계시 함수 값과 할당이 이루어지기에  그안에 변수 값 까지 평가함으로..

1. input 의 속성과 타입2. 다양한 명령어를 사용하여 input을 꾸며보기   1. input 의 속성과 타입1-1 input 의 속성input은 입력하다,넣는다 라는 뜻으로 기본적으로는 text 형태를 가지나  사용하여 여러 형태의 요소를 넣을 수 있다. input 을 사용하여 넣을 수 있는 요소들을 몇가지 정리해 보자면button: 누를수 있는 버튼을 생성합니다.checkbox: 체크표시가 가능한 박스를 생성합니다.text: 텍스트를 입력가능한 영역을 생성합니다. radio: 같은 name 의 그룹에 묶인 속성들중 하나를 선택 할 수 있는 버튼을 생성합니다. 수업시간에 사용한 input 은 이정도지만 image: 이미지를 보여주는 제출버튼을 생성number: 숫자를 입력하는 영억을 생성ran..

1. 자바스크립트의 역사 var , let , cons2.자바스크립트 데이터 타입3. 자바스크립트의 연산자4. if 와 for5. for 을 사용한 구구단 표 만들어보기   1. 자바스크립트의 역사 var , let , cons1.1 자바스크립트의 역사자바스크립트는 netscape 가 10일만에 개발한 새로운 언어로서  라이브 스크립트 > 모카스크립트 > 자바스크립트로 이름을 바꾸면서 꾸준한 업데이트를 통하여 많은 부가설정이 사용자에 입맛에 맞게 진화 하였습니다. 그만큼 대중성이 많고 편리해진 ㄴ최근까지도 자주 사용하는언어입니다.  console. log 자바스크립트에서 사용된 변수값을 눈으로 확인할 수 있게 나타냄   1.2 var let cons 자바스크립트의 기본 명령어 이자 변수를 설정해주는 명령..

1. 가상요소란2. 가상요소와 다른 이미지 넣는 방식을 복습해보자.     1. 가상요소가상요소는 가상의 요소 즉 html 문서상에서는 보이지 않는 요소를 추가하는 것을 말합니다. 사용하는법은 가상요소를 사용하고자 하는 요소 뒤에 (::)을 사용하여 가상요소를 사용하겠다 라고 명령합니다.단 요소를 꾸미기 위한요소이므로 style 시트를 사용하거나 외부 css파일을 연결해야 하며 content:" "을 반드시 사용해야합니다. >> "content를 사용하겠다 선언" 가상요소의 종류는 ::before: 요소의 앞쪽에 새 가상의 요소를 추가합니다.::after: 요소의 뒤쪽에 새 가상의 요소를 추가합니다.많이쓰이고 새 요소를 추가하는건 이 두가지 뿐입니다. ::marker: 목록 요소 앞에 마크를 선택합니다...

2주동안 배운 HTML과 CSS를 사용해 2인1조로 그룹을 지어서 페어 코딩을 진행하였다.해당 웹페이지를 만드는 내용이였는데. 그동안 배워오면서 영역잡는것이 가장 중요하다고 배웠기에 영역을 잘 파악하는것이 중요 했다. 눈대중으로 대강 파악한 영역은큰 영역안에 6개의 영역으로 나뉘어 지는것을 파악하고 HTML 구조를 잡았다.해당 이미지 처럼 container 이라는 큰 영역 안에  header 최상단 파란색 선 영역main_banner 빨간색 선 영역search 갈색선 영역ad 녹색선 영역footer 노란색선 영역sidebar 청녹색선 영역나누어서 디자인을 하였다 또한 강조해주신게 협업을 할때 모르는사람이 보거나 다른사람에게도 이해가 가능할만한 영역의 이름을 잡아야 함으로 영역과 세부 영역의 이름을 구체적..

1. position 속성의 종류  css의flex 에 이어서 추가로 레이아웃을 원하는곳에 배치하기 쉽게 만들어주는  position 을 배우게 되었다.   1. position 속성의 종류 position은 CSS의 속성중하나로 레이아웃을 배치하거나 아이템을 이동시킬때 사용한다. 4면 (상하좌우)를 기준으로 아이템을 이동시킬 수 있으며 +값 뿐만아니라 - 값도 사용가능하다다만 방향값이 +일때 명령한 방향으로 이동하는게 아니라 반대쪽방향으로 이동하게된다. position:static static은 따로 속성을 부여하지 않아도 상시로 적용되고있는 설정이 불가능한 기본값이다. 1. position:relative relative은 기존의 위치부터 계산되는 속성이다 즉 static(기본값)과 시작이 같으며 4..

1. FLEX의 속성,형태와 주축과 교차축 의 이해2. flex를 활용한 과제풀어보기 저번시간에 다음속성을 예측하기 힘들기에 사용하지 않는float 대신에 원하는 위치에 디자인 하기위한 새로운 속성인 flex를 배우게 되었다.  1. FLEX의 속성,형태와 주축과 교차축 의 이해flex를 이해하기 위해선 주축과 교차축의 개념을 이해하면 쉬운데 flex의 기본속성값은  row(가로)로 정렬해주는 display:inline-block 와같이 블럭을 가로로 정렬해주는 효과를 가지고 있습니다. 또한 부모가 충분한 크기를 가지고 있어햐 하며 column(세로)축을 기준으로 명령어를 줄 수 있으며 가로와 세로축을 활용하여 아이템들을 원하는곳에 배치할 수 있습니다.   1. flex의 기본명령어의 기본 flex 명령..