DDOstory

⏱️  원시 데이터 타입객체가 아니면서 메서드도 가지지 않는 데이터string, number, bigint, boolean, undefined, null, symbol⏱️  숫자 데이터 타입정수와 부동소수점 숫자를 나타내는 타입typeof (타입오브) 라는 데이터 타입을 알려주는 연산자를 사용const number = 123;console.log(typeof number);bigint (빅인트)라는 데이터 타입은 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어서는 아주 작은 숫자나 큰 숫자를 표현할 때 사용되는 타입별도의 데이터 타입으로 지정됨빅인트 타입으로 지정하기 위해서는 일반적인 숫자와 구분하기 위해 숫자를 쓰고 뒤에 소문자 n을 붙이면 됨const number = 123n;console.log(..

🔋변수란?프로그램의 피요한 값들을 저장해두는 공간공간마다 서로 다른 이름을 붙여서 그 값을 가져와서 연산을 하거나 연산한 결과값을 저장프로그램 안에서 값이 변경될 수 있는 자료 의미를 부여한 어떤 값으로 정의해 두고 그 값을 출력할 수 있음 -> 저장할 수 있는 공간그 값이 고정된 것이 아닌 나중에 원할 때 변경할 수도 있는 그런 저장 공간이름을 정의하고 들어갈 값을 우측에 정의한 후 변수를 선언하고 할당선언된 값을 어디서든지 사용 가능let 키워드 사용🔋상수란?한 번 정해놓으면 변하지 않고 변경할 수 없는 값을 저장하는 공간선언할 때 const 키워드 사용키워드를 작성하고 사용할 상수 이름을 지정하여 뒤에 값을 넣어주는 것을 의미수정을 하려고 해도 수정되지 않음🔋var, let, constJava..

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..

💻  JavaScript (자바스크립트)웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어사용자 인터렉션에 의해 반응하개 만들어 주는 것페이지 전환, 화면 영역 지정, 마우스 입력, 키보드 입력 등 반응할 수 있도록 만들어주는 것브라우저 안에서 동작하는 프로그래밍 언표준 웹 기술동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어💻 JavaScript 특징모든 웹 브라우저에서 작동웹 브라우저에서 실행 결과를 즉시 확인 가능풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램 만들 수 있음다양한 자바스크립트 공개 API 사용 가능다양한 라이브러리와 프레임워크 사용 가능 💻 자바스크립트 실행크롬에..

📱 CSS 선택자특정한 HTML 태그를 선택할 때 사용하는 기능선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용HTML 태그를 선택해 스타일을 적용하기 위해 선택자를 사용style 태그 내부에 입력해 사용style 태그 내부에 입력되는 코드를 스타일시트라고 부름h1{color:red;} // 선택자를 사용해 h1 태그를 선택하고 color 속성에 red 키워드를 적용하는 예 //📱 전체 선택자*HTML 페이지 내부의 모든 태그 선택- 모든 웹 페이지에서 빠지지 않고 사용하는 선택자📱 태그 선택자태그특정한 태그를 선택- h1 태그의 color 속성에 red 키워드를 적용하고 p 태그의 color 속성에 blue 키워드 적용📱 아이디 선택자#아이디아이디 속성..

HTML 페이지 구조🖥️ 기본 태그태그와 요소Hello HTML5- 시작 태그와 끝 태그를 별도로 입력하는 요소속성Hello HTML5- h1 태그에 title 속성 부여 - img 태그는 그림을 만들 때 사용하며, src 속성을 사용해 어떠한 이미지를 출력할 지와 관련된 정보 제공주석- 어떠한 기능을 수행하는 코드인지 설명하는 코드- 프로그래밍 언어에서 프로그램 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드- 쉽게 이해가 가능한 코드에는 주석이 필요하지 않지만, 주석을 얼마나 잘 활용하는지로 프로그래밍 실력을 평가하기도 함🖥️ HTML5 페이지 태그 html>- 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 만듬- 모든 HTML5 문서는 반드시  html> 태그 표기해..

HTML(Hyper Text Markup Language)웹 페이지를 생성하기 위한 표준 마크업 언어웹 페이지의 구조를 설명일련의 요소로 구성요소를 사용하여 브라우저에 콘텐츠를 표시하는 방법을 알려줌콘텐츠 조각에 레이블을 지정      웹 표준웹 사이트 제작할 때 지켜야 하는 약속을 정리한 것웹 표준을 지켜 사이트를 제작하면 장소나 브라우저 상관없이 쉽게 웹 사이트 연결 가능웹 표준으로 문서를 만들면 어떤 기기에서든 볼 수 있기에 웹 개발자와 디자이너의 시간 절약HTML5로 문서를 만드는 것 = 웹 표준 지킨 문서를 만드는 것HTML5를 공부해야 하는 이유웹은 주인도 국적도 없는 모두에게 공개된 기술이므로 모든 디바이스에서 사용할 수 있음HTML5를 공부하여 알고 있다면, 안드로이드 애플리케이션 개발을 ..

웹 개발웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아님웹사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 함서버 vs 클라이언트서버인터넷에 연결된 컴퓨터웹 요소와 여러 정보가 저장클라이언트사용자가 웹 사이트에 접근할 때 사용하는 기기웹 브라우저프론트엔트 개발 vs 백엔드 개발프론트엔드 개발웹 브라우저 화면에 보이는 부분 개발 -> 웹 사이트 제작HTML, CSS, JS 사용백엔드 개발사용자 뒤 보이지 않는 영역, 서버를 다룸데이터베이스를 설계하거나 데이터 처리자바, 파이썬, PHP 등 프로그래밍 언어 사용 웹 개발의 기본웹 문서의 뼈대를 만드는 HTML 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속HTML에서 약속한 표기법을 사용하여 문서 작성해야 함웹 문서를 꾸미는 CSS..