전체 글

기본 연산자 연산자를 사용하면 기본적으로 값을 변환 또는 여러 값을 결합할 수 있다. 빼기 연산자 const ageJonas = 2037 - 1991; const ageLisa = 2037 - 1989; console.log(ageJonas, ageLisa); console.log에 여러 값을 출력하려면 ,를 사용하면 된다. 2037년도가 중복됨으로 별로 좋은 방법은 아니다. 왜냐면 연도가 바뀌면 값을 변경해야 하기 때문이다. 그렇다면 어떻게 해야할까? 바로 변수를 새로 만들어 값을 할당하는 것이다. const now = 2037; const ageJonas = now - 1991; const ageLisa = now - 1989; console.log(ageJonas, ageLisa); 곱하기, 나누기..

Booleans(불리언) Booleans(불리언)은 두개의 값이 있다. true와 false이다. true와 false는 소문자여야한다. 불리언은 예/아니오나 참/거짓 값에 사용된다. JS에는 5가지의 거짓 값이 있다. 0, ' ' (빈 문자열), undefined(정의되지 않음), null, NaN(숫자가 아닌 것) fasle는 이미 거짓이어서 거짓 목록에 포함하지 않았다. Booleans로 변환하려면 flase로 바뀐다. 처음에는 당연히 거짓이 아니었다. 그것들은 다시 말해 Boleans로 변경할 때만 false로 된다. 다른 모든 것은 truly value이다. Booleans으로 변경할 때 0이 아닌 모든 숫자 또는 0이 아닌 모든 문자열, 빈 문자열은 true가 된다. 숫자, 문자열과 마찬가지로..

Value value(값)은 기본적으로 데이터 조각이다. Jonas는 값이다. 큰솔에서 이 값을 보고 싶으면 console.log()를 입력해주면 된다. console.log("Jonas") value는 기본적으로 가장 작은 단위이다. 값으로 할 수 있는 매우 유용한 한가지는 변수에 저장하는 것이다. let firstName = "Jonas"; Jonas와 같은 값을 firstName변수에 할당한다. 위의 코드와 같이 적은 것을 변수 선언이라고 한다. 이를 통해 실제 변수를 생성할 것이다. 컴퓨터 메모리에 Jonas 값을 해당 변수 안에 저장한다. 코드에 무언가를 출력해햐 할 때마다 console.log를 사용해야 한다. 8번째 줄로 부터 firstName인 Jonas 값을 출력 받았다. 7번째 줄까지 ..

value object(객체) let me = { name:'Jonas' }; primitive(원시 값) :객체가 아닌 경우에만 primitive 속한다. let firsName = "Jonas"; let age = 30; 7가지 원시 값의 데이터 타입 number(숫자), string(문자열), bullion, undefined, null, symbol(기호), bignit(큰 정수) number(숫자) : 부동 소수점 숫자 → 십진수와 정수를 사용 let age = 23; number은 항상 소위 부동 소수점 숫자이다. 항상 소수점이 있다. 23도 23.0이다. string(문자열): 일련의 문자 → 텍스트를 사용 let firstName = "Jonas"; 항상 따옴표로 묶는다. boolean: ..

JavaScript From Browser To EveryWhere (→ 브라우저를 다루는 언어에서 출발) Programming Language: building web applications → 인터넷의 프로그래밍 언어, 개발자가 동적 추가를 허용, 모든 웹 페이지에 대한 상호 작용 효과, 콘텐츠나 CSS 조작하는데 사용, 웹 애플리 원격 서버에서 데이터 로드, 웹 애플리케이션(브라우저에서 전체 애플리케이션을 빌드) Script는 동적으로 HTML 파일을 조작한다. 인터넷이 발명된 직후 두개의 첫번째 웹 브라우저가 개발되었다. 개발자들은 웹사이트보다 상호작용적으로 만들기를 원했다. → 브라우저용 언어 필요 1995년 → Brendan Eich라는 사람이 10일만에 JS의 첫번째 버전을 만들었다. 그것은..

Card 일반적인 콘텐츠 홀더이자 콘텐츠 컨테이너로 조합해서 활용할 수 있다. 종종 그리드 시스템과 카드 그리드를 만드는데 쓰인다. 제목, 부제, 상단 이미지를 추가할 수 있는옵션이 있다. 또 다른 컴포넌트인 list group을 추가할 수 있다. card를 사용해서 깔끔한 그리드를 만들고 콘텐츠를 표시할 수 있다. https://getbootstrap.com/docs/5.2/components/card/ Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. getbootstrap.com Carousel 사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다...

Border 테두리를 넣고 빼거나 모깎기를 하거나 디스플레이 속성을 변경하거나 여백을 추가할 때 편리하다. 이러한 유틸리티들은 요소에 클래스만 추가해 사용할 수 있다. 사방에 테두리를 만들려면 그냥 border을 추가하면 된다. border-top은 위쪽 border-bottom은 아래쪽 등 부트스트랩에서 테두리의 굵기를 조절할 수 없음으로 실제로 지정해야한다. 디폴트는 1px 또는 2px이다. 삭제 옵션을 통해 테두리의 일부, 위, 오르쪽 테두리를 없앨 수 있다. border-0-을 넣으면 모든 테두리를 없앨 수 있다. 테두리 색상또한 변경할 수 있다.(border-primary 등) 테두리 모깍기도 가능하다. 원을 만들때 유용하다. (사각형을 깎아서 원을 만든다.) Utilities Lorem ips..

SVG(Scalable Vector Graphics) 예술적인 웹사이트나 애니메이션 및 게임들을 만들 때 사용할 수 있는 훌륭한 도구 크기 조정 가능한 백터 그래픽이다. 복붙할 수 있고 앱처럼 텍스트도 가능하다. svg는 텍스트 색상 처럼 변경할 수 있다. 아이콘을 사용할 때 통상적으로 사용하는 요소나 컴포넌트는 입력그룹이다. 입력 그룹은 라벨, 텍스트, 버튼, 드롭다운 등으로 그룹화한것이다. Icons Delete Icons Delete 무료로 사용할 수 있는아이콘이다. 아이콘 라이브러리와 툴도 있다. https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getboot..

navbar 그리드 시스템을 제외하면 가장 대표적인 부트스트랩 컴포넌트인 내비게이션 바 navbar-brand 제목 같은 걸 생성할 때 쓰는 class. nav만 생성하면 된다. div로 대신할 수 있지만 nav 클래스를 넣은 nav가 더 낫다. navbar-light와 narbar-dark 중 선택해야 한다. 배경색도 골라야한다. Navbar Navbar h1클래스를 사용해 크기를 키울 수 있지만 앵커 태그로 두었다. navbar-dark를 사용하니 텍스트의 색상이 변경되었다. navbar-light와 nav-dark는 배경색을 바꾸는 게 아니라 내비게이션 바의 문자를 바꾼다. 앵커 태그인 navbar-brand 안에 이미지를 삽입하고 링크 여러개를 추가하면 된다. (내비게이션에서 흔한 일이다.) Na..

Forms form에는 다양한 컴포너트 form-control 태그 자체에 들어있다. 이메일 주소나 비밀번호를 입력하는 텍스트형 입력창이 있을 때 class에 form-control을 적용하면 더 보기 좋은 입력 형태를 만들 수 있다. form-gro up form-froup은 태그를 비롯해 다양한 태그를 그룹화할 때 쓰는 클래스이다. 기본적으로 여백을 준다. 그룹화할 때 사용한다. Forms Email placeholder가 이상하게 보이지만 form-control을 이용해서 어떤 요소이든 간에 화면의 너비를 차지하게 만들었다. 그리드를 사용해 더 나은 레이아웃인 한줄에 여러개의 입력창을 배치시킬 수 있다. Forms Email Password Password 창도 추가 했다. 이메일 주소나 비밀번호를..