김방울

See the Pen react-practice by KIMBANGUL (@KIMBANGUL) on CodePen. HTML JS(Babel) // -> JSX는 자바스크립트 안에서 엘리먼트를 그대로 쓸 수 있게 해 주는 기능. // 같이 단독으로 사용할 수 있는 태그는 반드시 처럼 슬래쉬를 넣어줘야 함. const element = Hello, world!; // var와 유사, 변수의 값을 할당하면 재할당이 불가능함. ReactDOM.render(element, document.getElementById('root')); // 'root' id를 가진 엘리먼트에 'element'를 렌더하겠다. // 항상 ReactDOM을 통해 렌더링, 그리고 어디에 렌더링 할 지를 지정해 주어야 함. const el..

ej 프레임워크 사용법 살펴보기 - ej-spacing-xs-30: xs 이상에서 칼럼의 여백을 30px로 둔다. - ej-md-1-4: md 이상에서 100% 기준으로 1/4 사용하겠다. - ej-hidden-below-500: 500 미만의 세계에서 숨긴다. - ej-hidden-below-xs: xs 이하의 세계에서 숨긴다. - ej-clear-both-below-md: md 이하의 세계에서 clear both를 건다. - ej-ratio-100-50: 너비 100% 높이 50% 비율을 가진다. - ej-ratio-lg-100-100: lg 이상에서 너비 100% 높이 100% 비율을 가진다. - ej-ratio-400-100-100: 화면크기 400 이상에서 너비 100% 높이 100% 비율을 가..

See the Pen practice11-grid by KIMBANGUL (@KIMBANGUL) on CodePen. HTML 12칼럼 반응형 그리드 프레임워크 만들기 CSS div.container{ margin: 0 auto; max-width: 980px; } div.row{ margin: 0 -15px; } .row::after{ content:""; display: block; clear: both; } .row > .col{ float: left; box-sizing: border-box; width: 100%; padding: 15px; } /* 모바일 */ .row > .col.col-xs-1{ width: 8.3333%; } .row > .col.col-xs-2{ width: 16.666..

flex 기초 1 1 2 3 4 5 div.contents{ background-color: coral; display: flex; flex-direction: row; height: 500px; .item{ background-color: red; flex-basis: 50px; } } display: flex 자식 요소를 flex하게 다루겠다. flex-grow: 1; 화면의 나머지 공간을 특정비율로 가져가겠다. flex-shrink: 1; 부모가 줄어드는 상황에서도 너비를 얼마나 유지하는가 높을수록 빨리 줄어들음 flex-direction: row, column 가로배열, 세로배열 flex-basis: 높이 혹은 너비 flex 기초 2 1 2 3 4 5 body{ display: flex; just..

See the Pen practice07 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML CSS @charset "UTF-8"; .imgs{ width: 1000px; height: 350px; position: relative; overflow: hidden; } .imgs > img{ width: 100%; position: absolute; transition: all 1s; } JS // JavaScript Document var now = 0; var img = 2; $('img').eq(0).siblings().hide(); function slide(){ if (now == img){ $('img').eq(now).fadeOut(1000); $('img').eq(..

See the Pen practice06 by KIMBANGUL (@KIMBANGUL) on CodePen. setTimeout, setInterval 타이머, 반복의 취소 - .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. - .text() -> 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. - .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( 'Lorem' ); 는 div 요소의 내용을 Lorem로 바꿉니다. HTML 태그는 ..

See the Pen practice05 by KIMBANGUL (@KIMBANGUL) on CodePen. HTML 회사소개 비전 개요 연혁 특허권 오시는길 직무윤리강령 제품소개 Photonic Solutions Fiber Sensing System OMAS IMU 뉴스&이벤트 뉴스 이벤트 채용공고 채용공고 고객지원 본사/지사/법인 위치안내 대리점 관련 문의하기 회사소개 비전 개요 연혁 특허권 오시는길 직무윤리강령 제품소개 Photonic Solutions Fiber Sensing System OMAS IMU 뉴스&이벤트 뉴스 이벤트 채용공고 채용공고 고객지원 본사/지사/법인 위치안내 대리점 관련 문의하기 SCSS // 폰트 불러오기 @import url(https://fonts.googleapis.c..

변수, 함수 기초 1 console.clear(); 콘솔창 초기화 // 프로그램의 2대 구성 요소 // 변수, 함수 var a = 1; console.log(a); // 1 변수에는 오직 하나의 값만 들어갈 수 있음 var => a 라는 변수를 만들겠다. 그 후에는 var를 사용하지 않아도 됨. var a = 5; a = 10; a = 15; a = 20; var a = 5; var a = 10; var a = 15; var a = 20; 는 문법 오류 프로그램은 위에서 아래로 순서대로 작동 변수, 함수 기초 2 // 소스코드 = 소설 // 변수 = 인물 또는 사물 또는 존재(변수는 명사) // 함수 = 인물의 행동 console.clear(); = window.console.clear(); consol..