DDOstory

자바스크립트에서 '변수'란? 변수(Variable)는 데이터를 저장하는 공간이에요.이름을 붙여 어떤 값들을 담아두고,필요할 때 그 이름을 불러서 사용할 수 있어요. 예를 들어let name = "도희"; 위 코드에서는 name이라는 변수에 "도희"라는 문자열을 저장했어요.이제부터 name을 사용하면 "도희"를 의미하게 돼요.변수 선언 방식 : var, let, const 자바스크립트에서는 변수를 선언할 때세 가지 키워드를 사용할 수 있어요.키워드재할당 가능재선언 가능스코프var✅ 가능✅ 가능함수 스코프let✅ 가능❌ 불가블록 스코프const❌ 불가❌ 불가블록 스코프각각 자세히 살펴보자 var (거의 안 씀)var nickname = "deco";var nickname = "dodo"; // 재선언도 가능..

자바스크립트는 왜 필요한가?웹 페이지를 처음 만들던 시절에는 HTML만 있어도정보 전달에는 큰 문제가 없었어. 하지만 사용자들이 웹에서 점점 더 많은 걸 기대하게 되면서,정적인 HTML과 CSS만으로는 부족한 상황이 찾아왔지. 예를 들어 이런 것들이야:버튼을 클릭하면 창이 뜨는 기능사용자가 입력한 값을 검사해서 경고 메시지를 보여주는 기능스크롤하면 애니메이션이 재생되는 기능실시간으로 서버에 데이터를 요청해서 새로운 내용을 불러오는 기능이런 인터렉티브한 기능을 가능하게 만들어주는 것이 바로 자바스크립트(JavaScript)자바스크립트는 어떤 언어인가?자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 인터프리터 기반의 프로그래밍 언어 초기에는 단순한 스크립트 언어였지만, 지금은 웹 개발의 핵심 ..

🧸  속성과 값이 같으면 1개만 기입객체를 정의할 때 속성과 값이 일치하면 축약 가능const language = 'JavaScript';const josh = { language};console.log(josh);🧸  컴포넌트 등록 방식에서의 축약 방법const doComponent = { template: 'Do Component'};new Vue({ components: { doComponent }});🧸  뷰 라우터 등록 방식에서의 축약 방법const router = new VueRouter({ //...});new Vue({ router});🧸  속성에 함수를 정의할 때 function 예약어 생략객체를 정의할 때 객체의 속성에 함수를 연결하여 사용하는 경우 많음const j..

📕  변환이란?플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었음HTML5에서 3차원을 구현하는 방법은 크게 2가지자바스크립트를 사용한 webGLCSS3를 사용한 3차원 배열📕  2차원 배열대부분의 컴퓨터 프로그램은 화면 좌표를 이용X축과 Y축이 있는 화면 좌표를 2차원 화면 좌표라고 부름Z축을 추가하면 3차원 화면 좌표로 확장3차원 화면 좌표에서 Z축은 웹 브라우저를 보는 사용자에게 가까울수록 큰 값임📕  transform 속성CSS3부터는 transform 속성을 사용해 객체를 변환할 수 있음변환이 가능한 이야기는 HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있음 코드를 실행하면 사각형이 60도 회전📕  2차원 변환 함..

CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨HTML 페이지 구성  hover 상태 선택자와 active 상태 선택자를 사용마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용 transition-duration 속성 사용구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용 변형 속성은 다음 스타일 속성과 함께 사용 가능위치 속성 : top, left, bottom, right크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, border-r..

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..