본문 바로가기

KDT TIL Note35

CSS animation 속성 animation 속성은 요소에 애니메이션을 제어하는 기능을 한다. 아래 코드에서 확인할 수 있듯이, 이 제어될 animation은 @keyframes이라는 CSS 규칙을 통해서 만들어지고, animation의 이름과 속도, 진행 방식들을 CSS animation 속성의 값으로 하여 설정한다. cf. CSS에서는 밀리세컨드(밀리초) 단위가 아닌 세컨드(초) 단위로 값을 지정한다 ! => @keyframes로 애니메이션 이름을 지정한다. => 애니메이션의 지속 시간을 설정한다. => 타이밍 함수를 지정한다. => 애니메이션의 대기 시간을 설정한다. => 애니메이션의 반복 횟수를 설정한다. => 애니메이션이 반복될 때의 방향을 설정한다. => 애니메이션의 전후 상태나 위치를 설정한다. => 애니메이션의 재생.. 2022. 10. 12.
JS 생성자 함수, prototype 속성 new라는 키워드를 함수 앞에 붙이면 그 함수는 생성자 함수가 되고, 생성자 함수는 함수에 입력된 인자 값들을 가지고 원래의 함수 작업을 동일하게 해내도록 한다. 위의 user라는 함수는 첫번째 인자를 받아 이 객체의 firstName이라는 변수에 그 인자 값을 할당하고, 두번째 인자를 받아 이 객체의 lastName이라는 변수에 그 인자 값을 할당하여 이루어진 객체 데이터를 생성한다. new 키워드로 생성자 함수가 된 user는 함수의 두 개의 인자 값만 받으면, 위에서 선언된 user 함수에 따라 자동으로 객체 데이터가 생성되는 것이다. 이 때 키는 firstName과 lastName이고, 각각의 키의 값은 Merry와 Jang, Amy와 Chandler, venom과 Pink인 객체 데이터가 use.. 2022. 10. 4.
웹 사이트 클로닝을 통한 HTML과 CSS (실습) position: fixed 를 통한 요소의 배치는 브라우저에 뷰포트를 기준으로 배치하겠다는 의미이다. width, height는 기본값이 auto이다. (기본값은 외워두는 게 좋다 !) 따로 width, height 값을 명시하지 않으면, 기본값인 auto 값을 갖게 된다. position: fixed와 position: absolute로 배치하면 가로 너비(width)가 최소한으로 늘어나려고, 즉 최대한 내용만큼만의 너비로 줄어든다 ! cf. 원래 블록 요소는 가로 너비가 최대한으로 늘어나려는 성질을 갖고 있다. width: 100%로 주면 최소한으로 줄어들어 화면이 보여지려 하는 것을 정상적으로 보이게 해 준다 ! lodash 라이브러리 https://cdnjs.com/libraries/lodash.. 2022. 9. 30.
HTML과 JS 상호작용 (실습) JS에서 HTML의 요소를 가져와 변수에 그 요소를 담을 수 있다. 보통은 const(상수와 같은 변수)로 담고, 추후 다른 값을 할당해야할 것 같은 경우에는 let(재할당 가능한 변수)으로 선언하면 되겠다. HTML 요소를 불러올 때는 getElementById, getElementByClassName, getElementByTagName 등 이나 querySelector, querySelectorAll 등으로 불러올 수 있고, getElement로 시작하는 명령어로 불러올 때는 id, class, tag임을 명시하기 때문에 그 이름만 큰 따옴표 " " 안에 작성하면 되지만, querySelector 명령어로 요소를 불러올 때는, 그 안의 요소 이름이 id의 이름인지, tag를 지칭하는지, class의.. 2022. 9. 30.
자바스크립트의 null과 undefined, console.log와 console.dir 자바스크립트에서는 의미가 다소 다르지만, 다른 프로그래밍 언어에서 사용하는 null 외에 특수하게 undefined이라는 자료형이 있다. null은 null 값만을 포함하는 null 자료형으로 분류되고, '존재하지 않는 값(nothing)', '비어 있는(empty) 값', '알 수 없는(unknown) 값'을 나타낸다. undefined와 유사하지만 차이점은 '의도적으로' 값이 없는 것을 의미한다. undefined는 null과 같이, undefined 값 만을 포함하는 undefined 자료형으로 분류되고, '값이 할당되지 않은 상태 값' 즉, 기본값과 같은 의미를 띈다. 변수를 선언하였지만 값을 할당하지 않았으면 그 변수의 값은 undefined로 자동 할당된다. cf. 파이썬의 None 참조 자바.. 2022. 9. 21.
[KDT] HTML 요소의 전역 속성 HTML 요소들은 자기가 사용할 수 있는 속성이 정해져 있다. 하지만, 요소(태그)의 종류와 상관없이 어느 요소에서나 사용할 수 있는 속성이 있는데, 그것을 전역 속성이라고 한다. ㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ => 이 요소에 잠시 데이터를 저장하기 위한 목적으로 사용하는 속성 사용자가 지정한 color라는 이름으로 데이터(값) red와 yellow를 저장해둘수 있고 이것을 아래 JS 코드에서 보듯이 해당 요소에서 데이터를 찾아 값을 꺼내 활용할 수 있다 ! ※ 위의 JS 코드를 살펴보면 상수 elms는 HTML의 2개의 div 요소를 값으로 갖게 되는 배열이 되고, 배열의 메서드 중 하나인 forEach를 적용하여 배열 요소 각각을 얻어낼 수 있으며, 그렇게 얻어진 각 요소(elm)에 대해 console.l.. 2022. 9. 16.
[KDT] 0915 자습 - HTML 무작정 시작하기 VS Code에서 .vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더이다. 삭제해도 VS Code로 프로젝트를 켜면 다시 생성되므로 그냥 무시해도 된다. 보통 파일이나 폴더의 이름이 .(마침표)로 시작하면 숨김 전용 파일/폴더이다. Live Server는 개발을 위해 임시로 로컬(개인의 컴퓨터 환경) 서버를 오픈하는 것이고, 제품(웹사이트 등)은 실제 사용자들이 접근 가능한 호스팅 서버에 업로드해야 한다 ! 공백: 4라고 기본 세팅되어 있는 값을 바꾸고 싶으면 우측 하단의 그 부분을 클릭하면 위의 창에 나타나는 공백을 사용한 들여쓰기를 클릭해 들여쓰기시 원하는 칸 수만큼 지정할 수 있다. 설정을 바꾼 뒤 코드를 다시 정리(beautify)하고 싶다면 원하는 부분만큼 지정하여 정리된.. 2022. 9. 15.
[KDT] 웹앱의 동작원리 웹앱(Web Application); 웹 페이지 주소창에 페이지 주소를 입력하는데, 이 때 주소 앞에 붙이는 HTTP, HTTPS 등은 통신프로토콜(Communication Protocol, 통신 규약)로 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다. 그 주소에 맞는 서버로 최초의 요청(Request)이 들어가게 된다. 서버는 요청이 들어온 사용자 브라우저(컴퓨터)로 최초의 응답(Response)을 보내게 된다. 이 때 응답되는 파일은 HTML이다. 이 HTML 파일에서 추가로 요청이 들어가면 서버는 이에 맞는 추가응답을 하게 된다. 이 때 CSS, JS, PNG 등의 요청에 따른 응답에 맞는 정보들이 보내질 것이다. 웹 사이트를 개발할 나의 컴퓨터 환경을 로컬.. 2022. 9. 13.

티스토리툴바