Web (13) 썸네일형 리스트형 [HTML/Javascript]Data속성 사용하기 [HTML/Javascript]Data속성 사용하기 안녕하세요 미나라이입니다. 이번에는 HTML5에서부터 사용 할 수 있는 data속성에 대해서 정리해보았습니다. 데이터 속성이란? 데이터 속성은 HTML요소의 "data"로 시작하는 요소입니다. 구분점은 -로 되어있고 HTML태그 요소 안에 데이터를 저장해두고 싶을 때 주로 사용합니다. 데이터 속성을 사용하지 않았을 경우 input[button]속성의 경우에는 value에 버튼의 이름이 들어가서 데이터를 저장 해 둘 수가 없습니다. 그렇기 때문에 hidden태그를 정의해서 데이터 요소를 숨겨놓는 방법을 많이 사용했었습니다. 데이터 속성을 사용 할 경우 아래처럼 data속성을 사용해서 해당 요소 안에도 데이터를 저장 해 둘 수 있어서 불필요한 태그가 늘어날.. [Javascript]자바스크립트 배열 활용법 정리(2/2) [Javascript]자바스크립트 배열 활용법 정리(2/2) 안녕하세요 미나라이입니다. 저번 포스팅에 이어서 자바스크립트의 배열의 API에 대해서 정리해보았습니다. join 배열을 하나의 문자열로 묶을때는 join기능을 이용합니다. 구분자를 지정하지 않았을 경우에는 ","가 기본으로 들어갑니다. const fruits = ["apple","lemon","grape"]; // default "," const fruit = fruits.join("^"); console.log(fruit); apple^lemon^grape split 문자열을 배열로 만들고 싶을 경우에는 split기능을 이용합니다. 잘라줄 구분자를 지정하지 않았을 경우에는 문자열 전체를 배열의 0번째 인덱스에 반환하기 때문에 구분자를 반드시 .. [Javascript]자바스크립트 배열 활용법 정리(1/2) [Javascript]자바스크립트 배열 활용법 정리(1/2) 안녕하세요 미나라이입니다. 이번포스팅에서는 자바스크립트의 배열의 활용법을 정리해보았습니다. 선언방식 // literal syntax const arr1 = []; const arr2 = [1,2]; // constructor syntax const arr3 = new Array(); 배열의 출력 방법 const fruits = ['Apple', 'Banana']; // 배열 전체 출력 console.log(fruits); // 배열 사이즈 var size = fruits.length; // 2 // 특정 인덱스 출력 var apple = fruits[0]; // Apple (2) ['Apple', 'Banana'] 배열을 이용한 반복처리 방법 .. [Javascript]자바스크립트 Object활용법 정리 [Javascript]자바스크립트 Object활용법 정리 안녕하세요 미나라이입니다. 이번포스팅에서는 자바스크립트의 Object활용법을 정리해보았습니다. 선언방식 // literal syntax const obj1 = {}; const obj = { name : 'hong', age : 20}; // constructor syntax const obj2 = new Object(); Object항목추가 방법 Object변수를 선언하고 추가하고싶은 key값을 obj변수 뒤에 붙혀서 추가하면 됩니다. const obj = new Object(); obj.name = 'hong'; obj.age = 20; 위와 같은 경우에는 key값(name등)이 코딩 시점에서 확정이 났을 경우에는 활용이 가능하지만 처리 중간에.. [Javascript]자바스크립트 함수 정리 [Javascript]자바스크립트 함수 정리 안녕하세요 미나라이입니다. 이번포스팅에서는 자바스크립트의 함수의 종류 및 활용법을 정리해보았습니다. 기본 형태 및 호출 방법 자바스크립트의 기본적인 함수 사용법과 호출 방법입니다. function print() { console.log("Hello"); } // 함수 호출 방법 print(); 파라미터 자바스크립트 함수의 파라미터는 변수와 마찬가지로 데이터 타입을 가변으로 받을 수 있습니다. function printName(obj) { console.log(obj.name); } function changeName(obj) { obj.name = 1; } // 문자열로 선언 const change = {name : 'name'}; printName(chang.. [Javascript]자바스크립트 변수 정리 + Hoisting [Javascript]자바스크립트 변수 정리 + Hoisting 안녕하세요 미나라이입니다. 이번에는 자바스크립트의 변수 개념에 대해서 정리 해 보았습니다. let let은 ES6에서 새로 나온 변수 개념입니다. Block Scope를 사용 할 수 있습니다. Hoisting이 일어나지 않습니다. (선언 후에 값 대입을 해야함) 현업에서 자주 사용되어지고 있습니다. { let name = 'tom'; console.log(name); } // Block밖에서 사용하면 에러! console.log(name); var ES6이전부터 사용되어 온 변수 개념입니다. Block Scope를 무시합니다. Hoisting이 일어납니다. (값 대입 후에 선언 해도 에러 안남) 현업에서는 최근에 사용 빈도가 많이 줄었다고 .. [Javascript]외부 자바스크립트 파일을 링크 하는 방법 정리(async, defer) [Javascript]외부 자바스크립트 파일을 링크 하는 방법 정리(async, defer) 안녕하세요 미나라이입니다. 이번에는 HTML파일에 외부 자바스크립트 파일을 링크하는 방법 및 링크 위치에 따라 처리가 어떻게 되는지 간단하게 정리해보았습니다. 링크 방법 동일 경로에 파일이 존재 할 경우 js라는 폴더 안에 있는 자바스크립트 파일을 링크 할 경우 상위 경로에 있는 자바스크립트 파일을 링크 할 경우 링크 위치에 따른 처리 순서 동기처리 동기처리중에는 스크립트의 다운로드, 실행 및 Body Parsing을 순차적으로 실행합니다. Header에 링크 추가 HTML Header에 스크립트 링크를 추가 했을 경우입니다. 처리 순서 먼저 스크립트 파일을 다운로드 받고 실행시킵니다. 그리고 나서 HTML의 요.. [JQuery/Bootstrap]부트스트랩 Modal로 Alert,Confirm창 만들기(프로미스 사용) [JQuery/Bootstrap]부트스트랩 Modal로 Alert,Confirm창 만들기(프로미스 사용) 안녕학세요 미나라이 입니다. 프로젝트를 진행하면서 Alert메세지를 이쁘게 써보자는 이야기가 나와서 Bootstrap Modal 기능을 이용해서 Alert,Confirm창을 꾸며 보았습니다. Confirm Modal안에서 Alert Modal창을 띄우려고 할 때 타이밍이 안맞아서 첫번째 팝업창만 보이는 현상이 있었습니다. setTimeout을 이용하는 방법도 있지만 이부분은 프로미스 기능을 이용해서 순차적으로 표시 할 수 있도록 수정 해 보았습니다. 대신 연속으로 Alert메세지 팝을 띄울 경우 Alert메세지의 확인 버튼을 누르면 다음 Alert메세지 창을 띄우는 효과는 구현하지 않았습니다. 주의사.. 이전 1 2 다음
