본문 바로가기

Frontend145

JavaScript에서 사용자의 입력을 받아보자 대화상자웹 브라우저 환경에서 JavaScript를 사용하여 대화상자를 표시한다.alert()알림창을 띄어준다.   prompt()사용자에게 입력받을 수 있는 입력 패널을 제공한다. 받는 데이터는 문자열이 된다.  confirm()true/false를 입력하는 패널을 제공한다. 2024. 7. 15.
JavaScript의 템플릿 리터럴이란? 템플릿 리터럴은 백틱(BackTick, ``)을 사용하여 내장된 표현식을 허용하는 문자열 리터럴이다. $와 중괄호({})를 사용하여 표현식을 넣을 수 있다. 기존에는 문자를 결합하여 출력하거나, 변수를 문자열에 할당해야할 때 플러스(+)나 콤마(,)를 사용했어야했다. ECMAScript6이후 백틱이 나오면서, 문자열의 결합이나 문자열에 변수를 삽입하는 등을 자연스럽게 결합할 수 있게 되었다. 또한 줄바꿈을 해야할 때 \n을 사용했어야 했지만, 템프릿 리터럴을 사용하여 띄어쓰기 및  엔터로 발생하는 공백을 그대로 표현할 수 있게 되었다. `${표현식}` 2024. 7. 15.
JavaScript의 기초 문법 : 변수 변수는 값을 담을 수 있는 공간을 뜻한다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다. 변수 선언var 변수명 = 데이터;함수 전체에서 유효한 변수로 변수를 다시 선언해서 재할당이 가능하다. let 변수명 = 데이터;한 번만 선언하고, 선언한 내용을 계속 사용하려는 경우에 사용한다.const 변수명 = 데이터;상수형으로 고정적으로 데이터를 사용하려는 경우에 사용한다.  변수 작성법 숫자로 시작할 수 없다.변수명 첫 글자에는 $, _, 영문자만 가능하다. 대소문자를 구분해야 한다. 변수는 대문자가 아닌 소문자 명사형으로 시작한다. 변하지 않은 환경변수의 값은 대문자로 작성한다. 여러 단어의 조합으로 작성될 경우 낙타표기법(camelCas.. 2024. 7. 15.
JavaScript의 기초 문법 : 타입 JavaScript를 포함한 여러 프로그래밍 언어의 경우 예외적인 부분도 있으나, 타입(데이터의 형태를 정의), 변수(값을 저장하는 공간), 연산자(논리적, 산술적, 비교 등의 연산 수행), 제어문(조건에 의해 수행)을 가지고 있다. 이후 프로그램의 양이 방대해지면서 관리를 용이하게 하기 위해 구조체(여러 개의 변수의 묶음), 함수(기능들의 묶음), 배열(같은 타입의 여러 변수의 묶음)이 생겨났다. 이후 객체 지향 프로그래밍이 대두되면서 대부분의 프로그래밍 언어는 타입, 변수, 연산자, 제어문, 구조체, 함수, 배열, 객체의 특징을 가지고 있다. JavaScript의 경우 웹 브라우저에서 동적인 웹 페이지를 만들기 위한 스크립트 언어로 개발되었다가, ECMA script 6 이후부터 객체 지향 프로그래밍.. 2024. 7. 15.
CSS에서 스타일의 우선순위를 정해보자(@layer) CSS의 경우 사용자가 지정한 레이어의 순서에 따라 스타일이 정해진다. 이러한 우선순위 때문에 원하는 스타일이 적용되지 않는 경우가 있는데, @layer를 사용하면 스타일의 순서를 결정할 수 있다. @layer 레이어이름, 레이어이름, ....; 반갑습니다. 왼쪽의 경우 @layer을 설정해서 bgfont가 제일 마지막으로 설정되게 했고, 오른쪽의 경우 @layer을 설정하지 않았을 때의 상태(CSS는 위에서 아래로 적용되기 때문에, 배경색은 bg로 설정되고 글씨크기는 font로 설정됨)이다. 2024. 7. 13.
CSS에서 계산을 해보자 (calc()) calc()를 사용하여 CSS 속성 값으로 계산식을 지정할 수 있다. 덧셈(+), 뺄셈(-), 나눗셈(/), 곱셈(*)이 가능하며 length, frequency, angle, time, percentage, number, integer을 받는 속성의 값으로 사용할 수 있다. 숫자와 연산자 사이는 반드시 띄어쓰기를 해야한다. calc(숫자 연산자 숫자) 아래의 예제는 div들의 width를 100%에서 20% 뺀 값으로 지정했고, height를 100% 에서 3을 나눈 값으로 지정한 예제다. 공지사항 아래와 같은 사항에 대해 공지를 합니다. 문의사항 문의사항에 대해서는 관리실로 문의해주세요.  아래의 사진처럼 calc()를 통해.. 2024. 7. 13.