분류 전체보기 198

[JS] Variables (변수) | let | const | var

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

🦎 JavaScript 2023.01.12

[JS] Primitive Types

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 2023.01.11

[JS] JavaScript

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

🦎 JavaScript 2023.01.10

[CSS Framework] Bootstrap | Cards | Carousel | Dropdowns | Spinners | Modal

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 사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다...

[CSS Framework] Utilities

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

[CSS Framework] Bootstrap | Icons

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

[CSS Framework] Bootstrap | Navbar

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

[CSS Framework] bootstrap | Forms | form-group | form-class

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

[CSS Framework] Grid Utilities

Helper 클래스 콘텐츠를 정렬할 수 있는 좋은 유틸리티 부트스트랩은 flexbox 용어를 사용한다. flexbox 기반으로 만들어졌기 때문이다. flexbox, align-items 교차축에서 작동하며 flexbox를 만든다. 콘텐츠를 수직 정렬할 때 적용할 수 있는 옵션이다. Grid Aligment Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam molestiae sit, tempore unde porro voluptates est fugit. Reiciendis exercitationem officiis aliquam minus corrupti quaerat omnis commodi dolore ipsum consequatur..

[CSS Framework] Bootstrap | Grid System

Grid System 그리드 시스템을 통해 부트스트랩을 사용할 때 웹페이지에서 콘텐츠를 배열할 수 있다. 공간 분배를 화면 크기에 따라 달라지게 하는 반응형 레이아웃을 만들 수 있게 도와준다. 그리드 시스템은 컨테이너 안에서만 작동한다. 그리드를 사용하려면 항상 컨테이너 클래스가 있어야 한다. 행(row)클래스를 사용해서 행을 만들어야 한다. 부스트트랩의 모든 행에는 분배될 공간이 12유닛씩 있다. 옆의 사진처럼 동일한 세 개의 열이 있는 경우 각각의 열에 4유닛씩 동일하게 분배된다. 행에다 열(Coloumn)을 만들어야 한다. 주어진 행에서 분배하려는 모든 부분이 행이 된다. 모든 열의 클래스는 col 클래스로 시작한다. 공간을 분배하는 방법: 클래스를 사용해 col- 뒤에 숫자를 사용하면 된다. Th..

728x90