본문 바로가기

프로그래밍/HTML, CSS, JavaScript63

자바스크립트 배열의 선언 및 사용법 예제 자바스크립트 배열 배열 변수 선언 var aryFood = new Array(); 배열 값 부여 aryFood[0] = '김치찌개'; aryFood[1] = '된장찌개'; aryFood[2] = '부대찌개'; ※ 변수명[저장위치] = 저장값; ※ 저장위치는 0부터 시작 됩니다. 배열 선언과 동시에 값을 선언 var aryFood = new Array('김치찌개', '된장찌개', '부대찌개'); var aryFood = ['김치찌개', '된장찌개', '부대찌개']; 배열 사용법 예제 코드 0 번째 값 1 번째 값 2 번째 값 ※ aryFood라는 배열(array)을 선언과 함께 값을 선언합니다. 그리고 버튼을 3개를 만들어 클릭 시 각 자리에 저장 된 값을 alert() 함수를 이용하여 표시 해 줍니다. .. 2018. 4. 24.
자바스크립트 배열(array)이란 무엇인가? 배열이란 바로 이것이다. 배열이란 무엇인가 - 배열은 하나의 접시에 여러 반찬을 담아 사용하는 것 입니다. - 여러 데이터를 하나의 변수에 할당하여 사용하는 것 입니다. - 배열은 같은 형태를 지닌 데이터들이 동일한 크기의 순서를 갖고 나열되어 있는 집합입니다. 배열의 모양 - 아무런 모양의 접시에 여러 반찬을 담는것이 아닙니다. - 각각의 장소가 있고 그 장소에 반찬 하나씩을 담는 것입니다. 왜 배열을 사용하는가 - 하나의 접시에 여러 반찬을 관리할 수 있기 때문에 가독성이 높습니다. - 필요한 접시의 수가 줄어든다는 것은 그만큼 담을 때, 볼 때, 찾을 때(사용할때)에 보다 편하다는 것입니다. - 배열에 숫자 값들이 담겨 있다라고 한다면 연산에 아주 편리하게 사용 할 수 있습니다. 배열의종류 - 1차.. 2018. 4. 23.
Margin, Padding 태그를 통한 DIv 여백 설정 알아보기 Div 여백을 설정하려고 보면 한번씩 헷갈릴 때가 있습니다. 그림을 통해 간단하게 Margin, Padding의 범위에 대하여 알아보도록 하겠습니다. Content Div 의 총 너비는 어떻게 될까요? 총 너비는 = Content영역(80px) + Padding좌/우(10px + 10px) + Border좌/우(10px + 10px) + Margin좌/우(10px + 10px) width:80px 설정은 Content 너비이며 Margin, Border, Padding 를 모두 더한 요소의 총 너비는 140px 가 됩니다. 간단하게 CSS Div의 여백 설정 태그인 Margin, Padding 에 대하여 알아 보았습니다. 2018. 4. 14.
CSS hover 효과를 이용한 심플 가로 메뉴 만들기 심플하고 깔끔한 가로 메뉴 만들기 CSS로 심플하고 깔끔한 가로 메뉴를 만들어 보도록 하겠습니다. 또한 hover 등을 이용하여 간단한 효과를 주도록 하겠습니다. 먼저 예제의 결과는 아래와 같습니다. ●이런아이티 ●이런육아 ●이런여행 ●이런맛집 ●이런책 ●이런말 HTML 부분은 div 안에 ul 안에 li로 구성 됩니다. 이런아이티 이런육아 이런여행 이런맛집 이런책 이런말말말 다음은 CSS인 style 부분입니다. 메뉴의 모습은 아래와 같습니다. 그리고 마우스를 올리면 다음과 같이 해당 메뉴의 바탕색이 천천히 변경 됩니다. 조금 임팩트를 주길 원한다면 /*-ms-transform:rotate(10deg);*/ /*-webkit-transform:rotate(10deg);*/ /*transform:rota.. 2018. 4. 6.

티스토리툴바