728x90 반응형 SMALL 분류 전체보기1624 [JavaScript] 문자열 연결 문자열 연결 문자열은 일련의 문자로 구성되며, 문자열 연결은 여러 문자열을 합쳐 하나의 문자열로 만들수 있다. html js // 문자열 변수 선언 var lName = "홍" var fName = "길동" // 문자열 연결 var fullName = lName + fName console.log(fullName) console.log("Today is" + " a " + "beautiful day") console.log("My name is " + fullName) // 숫자와 문자열 연결 var num1 = 20 var num2 = 30 var sum = num1 + num2 console.log(num1 + " + " + num2 + " = " + sum) 2023. 5. 30. [JavaScript] 변수 변수 변수 (고유 식별자) 이름을 구성하는 일반적인 규칙은 다음과 같다. 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있다. 이름은 문자로 시작해야 한다. 이름은 $ 및 _로 시작할 수도 있다. 이름은 대소문자를 구분한다 (y와 Y는 다른 변수). 예약어 (자바스크립트 키워드와 같은)는 이름으로 사용할 수 없다. html js // 사람 정보 출력 // 변수는 먼저 선언한 다음 초기화할 수 있음 var name = "손흥민" var age = 32 var cgpa = 4.00 var lineBreak = " " // 변수는 동시에 선언하고 초기화할 수 있음 document.write("이름 : " + name + lineBreak) document.write("나이 : " + age + lin.. 2023. 5. 30. [JavaScript] 출력 함수 출력 함수 document.write() : 웹 페이지에 직접 내용 작성. html 태그를 포함한 텍스트를 인수로 전달할 수 있다. console.log() : 개발자 도구의 콘솔에 메시지를 출력. 디버깅 및 개발 중 정보 확인에 주로 사용. alert() : 웹 브라우저에서 경고 창을 띄워 사용자에게 메시지 출력. console.clear() console.error() console.info() console.warn() html js // document.write() 사용 document.write("Welcome to JS Program") document.write("Welcome to JS Program") document.write("Welcome to JS Program") // cons.. 2023. 5. 30. [JavaScript] 구문 / 명령 (3) 조건문 참인 경우 코드 블록을 실행한다. var x = 10; if(x > 5){ console.log('Yes'); } if(x > 5){ console.log('Yes'); } else{ console.log('No'); } 스위치 (Switch) 실행할 여러 코드 블록 중 하나를 선택한다. switch(x){ case 1: console.log('1'); break; case 2: console.log('2'); break; default: console.log('3, 4, ...'); break; } 함수 (Function) 작업을 실행하도록 설계된 코드 블록이다. 만든 다음 나중에 호출할 수 있다. function Hello(){ console.log('Hello World'); } 2023. 5. 30. [JavaScript] 구문 / 명령 (2) 배열 (Arrays) 배열을 사용하여 단일 변수에 여러 값을 저장할 수 있다. var names = ['Bob', 'Kim', 'Lee'] console.log(names [0]); 반복문 (Loops) 조건이 참인 코드 블록을 실행하고 반복한다. // For Loop for(I = 0; 1 < 10; i++){ console.log(i); } // While Loop while(I < 10){ console.log(i); i++; } 개체, 객체 (Objects) JavaScript의 거의 모든 것이 "개체"로 간주될 수 있다. 개체에는 속성과 메서드 (함수)가 있다. // 속성 var person = {name:"Lee", age:30, gender:"Male"} console.log(person.n.. 2023. 5. 30. [JavaScript] 구문 / 명령 (1) 구문 JavaScript 프로그램 빌드 방법에 대한 규칙 집합이다. JavaScript는 많은 프로그래밍 언어에서 사용하는 대부분의 일반적인 명령과 구문을 사용한다. 출력 console.log('value') 브라우저 또는 터미널에서 콘솔로 인쇄 window.alert() 브라우저의 경고 상자에 표시 document.write() html의 태그 내에 표시 innerHTML html 요소에 액세스 document.getElementById() - 아이디로 요소에 접근 변수 변수는 값을 저장하는 데 사용된다. JavaScript는 "var" 키워드를 사용하여 변수를 선언하고 등호를 사용하여 값을 할당한다. var x; x = 100; var x = 100; 표현식 (Expressions) 표현식은 값을 계.. 2023. 5. 30. [Website] Columns / TextBox / Flexbox Columns / TextBox / Flexbox 컬럼 (Column) 컬럼을 사용하면 긴 텍스트를 더 쉽게 읽을 수 있는 형식으로 나눌 수 있다. 기사, 블로그 글 등의 콘텐츠를 여러 개의 컬럼으로 분할하여 가독성을 높이고, 모던한 디자인을 구현할 수 있다. CSS의 column-count와 column-gap 속성을 사용하여 컬럼의 개수와 간격을 조절할 수 있다. 텍스트 박스 (Text Box) 텍스트 박스는 사용자 입력을 받기 위한 공간을 제공한다. CSS를 사용하여 텍스트 박스의 모양, 크기, 테두리, 그리고 배경색 등을 조절할 수 있다. 또한, resize와 outline 속성을 사용하여 텍스트 박스의 크기 조절 가능 여부와 외곽선 스타일을 설정할 수 있다. 플렉스박스 (Flexbox) 플렉스박.. 2023. 5. 26. [Website] 트랜지션 (Transition) 트랜지션 (Transition) CSS 트랜지션과 애니메이션은 웹 페이지에서 요소의 스타일 변경에 부드러운 효과를 적용하는 데 사용된다. 트랜지션은 요 소의 두 가지 상태 간의 스타일 변경을 부드럽게 처리하는 반면, 애니메이션은 여러 키 프레임에 따라 요소의 스타일을 변경할 수 있게 해준다. 이 두 기능은 웹 페이지에 독특한 효과와 동적인 요소를 추가하는 데 도움이 된다. html 2023. 5. 26. [Website] 그림자 (Shadows) 그림자 (Shadows) 그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다. html Hello World Hello World Hello World 1 This is a card 2023. 5. 26. [Website] 그레디언트 (Gradients) 그레디언트 (Gradients) 그레디언트는 둘 이상의 색상 사이의 점진적 전환으로 구성된 특수 유형인 데이터 유형으로 표현된다. 선형, 방사형 및 원추형의 세 가지 그레디언트 유형을 선택할 수 있다. 또한, 함수를 사용하여 반복 그레디언트을 만들 수도 있다. html Rounded Corners Rounded Corners Rounded Corners This div uses an image border Welcome Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mi metus, imperdiet eu vehicula ut, pulvinar vitae mauris. Nunc fringilla accumsan enim, id vestib.. 2023. 5. 26. 이전 1 ··· 39 40 41 42 43 44 45 ··· 163 다음 728x90 반응형 LIST
