분류 전체보기 (33) 썸네일형 리스트형 [JS] 자바스크립트 메소드 체이닝 메소드 체이닝 (Method Chaining) split 메소드: 문자를 split에 적용되어 있는 인수 기준으로 배열로 쪼개서 데이터로 변환해서 반환. i.e. '문자'를 배열 데이터로 변환 reverse 메소드: 배열을 기본 순서가 아닌 반대의 순서로 뒤집어 주는 역할을 한다. join 메소드: 배열 데이터를 인수 기준으로 문자들을 하나씩 붙여서 병합해 변환한다. const a = 'Evelyn!'; const b = a.split('').reverse().join(''); // a 배열 뒤에 메소드+메소드+메소드... 이런 형식을 메소드 체이닝이라고 한다. console.log(a); // Evelyn! console.log(b); // !nylevE [JS] 자바스크립트 DOM API DOM API (Document Object Model, Application Programming Interface) (어플리케이션)웹사이트가 동작하도록 입력하는 프로그래밍 명령 i.e. 자바스크립트에서 (DOM)HTML을 제어하는 여러가지 명령들(API)이다. BOX! CSS 선택자(.box)를 통해 HTML부분에서 특정 요소를 찾아서 그것을 변수 boxEl에 할당한다. let boxEl = document.querySelector('.box'); console.log(boxEl); 하지만 브라우저가 위에서 아래로 HTML코드를 읽어 내려가는 특성으로 HTML DOM API 실행 과정 요소 1개만 검색,찾기를 통한 실행 과정 // HTML 요소(Element) 1개 검색/찾기 const boxEl =.. [JS] 자바스크립트 조건문 조건문 (if, else) 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 bloolean 값으로 ture를 isShow 라는 변수 이름에 할당한다. let isShow = true; let checked = false; // if 조건 구문 if (isShow){ console.log('Show!!'); // Show! }; if (checked){ console.log('checked!'); }; else 조건을 추가하여 보자! isShow조건이 참인 경우, if (isShow)가 참이니 'Show!'를 출력하게 되고, 아니면(else) 'hide!'는 출력되지 않는다. let isShow = true;// 주목! if (isShow) { console.log('Show!').. [JS] 자바스크립트 변수, 예약어 변수 저장된 데이터를 참조(사용)하는 용도로 데이터의 이름을 짓는 변수 변수를 만들 수 있는 데이터 이름 (var, let, const) 특징 : - 저장된 변수는 재사용이 가능하다. - let키워드를 통해 변수a를 명시 후 데이터'2'를 집어넣는 행위를 변수 선언 이라고 한다. - 값(데이터) let으로 재할당 가능 (const 재할당 불가) **재할당 용으로 let을 쓰고, 이 외는 const를 사용한다. let a = 2; // let키워드를 통해 변수a를 명시 후 데이터'2'를 집어넣는다. let b = 5; console.log(a+b); // 7 console.log(a-b); // -3 console.log(a*b); // 10 console.log(a/b); // 0.4 a = 5; // .. [JS] 자바스크립트 데이터 종류(자료형) String (문자 데이터) 따옴표 사용 (쌍따옴표, 홑따옴표, 빽틱) let myName = "Evelyn"; // myName이라는 변수에 "Evelyn"이라는 문자 데이터를 할당 한다. let email = 'hj5678@gmail.com'; // 작은 따옴표로 표시된 문자 데이터도 동일하게 할당 한다. let hello = `Helllo ${myName}!!`; // 빽틱 기호로 myName라는 데이터를 보관하겠다는 의미이다. i.e. "Evelyn"이라는 문자가 ${myName}에 들어가는 개념이다. console.log(myName); // Evelyn console.log(email); // hj5678@gmail.com console.log(hello); // Hello Evelyn!! N.. [JS] 자바스크립트 표기법 dash-case(kebab-case) 단어와 단어 사이가 꼬챙이로 끼워져 있는거 같다고 하여 캐밥 케이스 라고도 한다. HTML, CSS (주로 사용) Today-is-Friday-September-14th dash기호로 컴퓨터는 하나의 단어로 인식하게 된고 사람은 띄어쓰기를 대신하는 것을 인지할 수 있다. snake_case 인식하는 단어들이 underbar라는 기호를 통해서 묶인 표기법. HTML, CSS (주로 사용) Today_is_Friday_September_14th camelCase 소문자를 첫 시작으로 단어마다 대문자로 구분하는 표기법. JS (주로 사용) todayIsFridaySeptember14th ParcelCase 대문자로 첫 시작을하여 camelCase와 동일하게 단어마다 대문.. [CSS] CSS border, padding 사용할 때 요소 크기 유지 크기 계산 (box-sizing) box의 사이즈를 150px로 지정하였는데 border과 padding을 적용하고 나니 개발자 도구에서 Box1은 270px로 출력된다. i.e. Box1 가로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px Box2 세로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px 아래 이미지 처럼 box1과 box2의 크기를 맞추려 수동으로 셋팅하는 것에는 한계가 보인다. 여기서 box1에 box-sizing : border-box;를 추가하면 자동으로 box2.. [CSS] Margin 외부 여백 외부 여백(margin) margin : 30px(상하) 80px(좌우); .box{ width: 300px; height: 300px; margin: 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin : 10px(상) 30px(좌우) 80px(하); .box{ width: 300px; height: 300px; margin: 10px 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin 음수값 적용 (자주 쓰지 않지만 유용할.. [CSS] CSS 속성 단위(Units) font-size px vs. em 그리고 rem .parent { width: 300px; height: 200px; background-color:lightcoral; } .child{ width: 50%; height: 50%; background-color:royalblue; } 기본적으로 font-size는 16px 만큼의 크기가 들어가 있다. (위 사진 참조) 단위 em 폰트 사이즈(16px) 만큼의 1em으로 사용으로 한다. 주변 상황에 따라 상대적으로 폰트 크리가 달라벼 관리가 필요한 단점이 있다. 여기서 Css child width값을 10em으로 바꾸면 16px 곱하기 10으로 160px i.e.160em으로 환산된다. 동일하게 20em으로 값을 바꾸면 아래와 같이 3.. [CSS] CSS 선택자 우선순위 (중요!) 선택자 우선순위 란? 하나의 요소가 여러 선언 대상이 된 경우 어떤 선언을 우선적으로 적용할지 결정하는 방법. 조건1 Css 내용을 Html에 적용할 때 붙는 점수가 높은 선언이 화면에 출력된다. 조건2 점수가 같을 경우, 맨 마지막으로 작성한 코드 내용이 우선 적용된다. Hello World!! div {color:red !important;}/* 1순위 (!important - 9999999점) */ #color_orange {color:orange;}/* 3순위 (ID 선택자 - 100점) */ .color_yellow {color:yellow;}/* 4순위 (Class 선택자 - 10점) */ div {color:blue;}/* 5순위 (태그 - 1점)*/ * {color:darkblue;}/* .. 이전 1 2 3 4 다음
