webplacidcy

문서의 요소의 바깥쪽 여백(빈 공간) 크기를 설정하는 속성 숫자 뒤에 단위 px를 표시한다 여백의 방향마다 다르게 설정할 수 있다 1. margin : 20px -> 위/아래/왼쪽/오른쪽 모두 20px 만큼 여백을 늘린다 2. margin : 10px 20px -> 위/아래 10px, 왼쪽/오른쪽 20px만큼 여백을 늘린다 3. margin : 10px 20px 30px 40px -> 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px만큼 여백을 늘린다 4. margin : 10px 20px 30px -> 위 10px, 왼쪽/오른쪽 20px, 아래 30px만큼 여백을 늘린다 margin : 20px margin : 10px 20px margin : 10px 20px 30px 40px margi..

float 속성을 사용해서 이미지를 이동시킨후 문서의 텍스트 위치를 변경할때 사용한다 1. left: 이미지로부터 왼쪽 위치 설정 해제 2. right: 이미지로부터 오른쪽 위치 설정 해제 3. both: 양쪽 모두 해제 This is the image file text text 결과

웹 페이지에서 이미지를 띄우는 방법과 텍스트를 어떻게 같이 배치할 것인지를 설정한다 1. inherit : 부모 요소에서 상속 2. left : 왼쪽에 블록 박스 생성, 페이지 텍스트는 오른쪽에 위치한다 3. right : 오른쪽에 블록 박스 생성, 페이지 텍스트는 왼쪽에 위치한다 4. none : 요소를 설정하지 않는다 - left와 right 값 설정 시 display 속성은 무시된다, clear 속성이 있을때 페이지 흐름이 달라진다 This is the image file 결과

const 키워드를 사용하며 한번 저장된 값은 바뀌지 않는다 { const num = 1; num = 2; // num 값은 const 키워드를 사용해서 이미 1이 저장되어 있기 때문에 // 2로 바뀌지 않는다 } 자바 스크립트에서 배열이나 객체는 보통 const 키워드를 사용하지만 값이 바뀔 수 있다 { const arr = [5, 10]; document.write(arr[0]);// 5 arr[0] = 3;// 배열의 0번째 값을 3으로 변경 document.write(arr[0]);// 3 const obj = {a: 10, b: 20}; document.write(obj.a);// 10 출력 obj.a = 5;// a키의 값을 5로변경 document.write(obj.a);// 5 출력 }

크게 지역변수, 매개변수, 전역변수가 있다 지역 변수 중괄호 "{ }" 범위 안에 있는 변수로 범위를 벗어나면 사라지는 변수, 외부에서 접근할 수 없다 function func() { let value = 0; // value 변수는 func 함수가 종료되면 사라진다 } 매개 변수 함수 내부에 선언되어 있는 변수로 외부로부터 값을 전달받을때 사용한다 function func(value) { value = 10; // value 변수로 외부에서 값을 전달받아 값 10 을 저장한다 } 전역 변수 함수 외부에서 선언된 변수로 프로그램 전체에서 접근할 수 있는 변수 let value = 10; function func() { value = 15; // value 변수는 위에 let value 변수와 같고 값을 ..

여러개의 데이터를 저장할때 사용하며 배열안의 첫번째 데이터 들어있는 주소를 0번지, 두번째는 1번지, 세번째는 2번지처럼 0부터 하나씩 주소가 증가한다 시작주소는 항상 0번지이고 정해진 주소 개수에 따라 데이터가 저장된다, 배열의 표현 방법에는 여러가지 방법이있다 선언 방법 { const arr1 = new Array(); // new 연산자 사용 const arr2 = new Array(1, 2, 3); // new 연산자 사용, 초기값 설정 const arr3 = []; // 빈 대괄호를 입력하고 각 배열 번지에 차례대로 값을 저장 arr[0] = 100; arr[1] = 200; arr[2] = "javascript"; const arr4 = [100, 200, "javascript"]; // 대괄..

객체나 배열에 대해서 데이터를 불러올때 "..." 기호를 사용하는 방법 배열 const num = [100, 200, 300, 400, 500]; document.write(num); // 100, 200, 300, 400, 500 document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다) document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다) 객체 const obj = {a: 100, b: 200, c:"javascript"}; document.write(...obj);// 100, 200, javascript 출력 변수에 저장한 뒤 불러..

flex-basis flex 아이템들의 기본 크기를 설정한다, width, height 등 단위 값들이 들어간다 .item { flex-basis: auto;// 기본값(해당 아이템의 width값 사용) flex-basis: 0;// 크기 0 flex-basis: 50%;// 크기 50% flex-basis: 300px;// 전체 크기 300px flex-basis: 10rem;// 기준값의 x 10 flex-basis: content;// width값을 따로 설정하지 않은 경우 컨텐츠의 크기를 설정 } flex-grow flex-basis의 값보다 커질 수 있는지를 결정하는 속성, 값이 0 보다 크면 원래의 크기보다 커지며 빈 공간을 메우게 된다 .item { flex-grow: 1; flex-grow..