JSON이란 JavaScript에서 객체를 만들 때 사용하는 표현식을의미합니다. JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식을 일컫는 말입니다. 즉, JSON는 Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷입니다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐입니다. 1 var obj={}; cs 위에서 설명했듯이 JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다. JSON 안에는 마찬가지로 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있습니다. ..
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 Document // 미로 길을 배열로 만들기 var map = [ [1, 1..
박스 모델의 여백인 마진과 패딩을 조절해 디자인하는 방법에 대해 알아보도록 하겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다. margin과 padding은 두 속성 다 여백을 주는 의미에서는 같지만 분명 다른 점도 존재합니다. margin은 Object와 화면과의 여백(외부 여백)을 말하며 Padding은 Object내의 내부 여백을 의미합니다. margin이란 현재 요소 주변의 여백을 뜻하며 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 따라서 마진을 이용하면 한 요소와 다른 요소 사이에 간격을 조절할 수 있습니다. 마진 속성은 나열한 손서대로 요소의 바깥 위쪽 마진, 오른쪽 마진, 아래쪽 마진, 왼쪽 마진을..
링크는 웹문서가 다른 문서와 구별되는 가장 큰 특징입니다. 클릭만 되면 연결된 곳으로 즉시 이동해 웹 사용을 더욱 편리하게 해 주기 때문입니다. 단순해 보이는 이 기능에도 여러 속성을 이용해 선택할 수 있는 사항들이 있습니다. 이 기능에도 여러 가지 속성을 사용할 수 있는 사항들이 있습니다. 태그, href속성-링크 만들기 우리가 흔히 보이는 웹사이트에서 클릭했을 때 다른 페이지로 넘어가는 요소가 이 태그와 속성에 해당됩니다. 이러한 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다. 따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다. 1 2 3 4 ..
웹문서에서 자료를 정리할 때 자주 사용하는 요소가 입니다. 표는 행(row)과 열(column)로 이루어져 있고 행과 열이 만나 이루는 영역을 셀(cell)이라고 부릅니다. 표를 만들려면 행과 열두 가지를 고려해야 하므로 하나의 표를 만들기 위해서는 여러 개의 태그가 사용됩니다. , , , 태그 기본적인 표의 모습은 가로 행과 세로 열이 있고 그 안에 내용이 입력되는 형태입니다. 순서를 기억해두면 표 만들기가 쉬울 것입니다. 우선, 구조적으로 HTML 테이블은 태그로 시작하며 가장 먼저 입력합니다 두 번째, 각 테이블 행은 태그로 정의합니다. 세 번째, 각 테이블 셀은 태그로 정의합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 ..
:가 붙으면 특정 이벤트마다 적용할 스타일을 설정할 수 있습니다. 가상 선택자는 웹 문서 소스에는 존재하지 않으나 필요에 의해 임의로 지정하여 사용하는 것을 말합니다. 이미지 위에 마우스를 올렸을 때 발생하는 이벤트가 대표적인 사용 예입니다. :link 선택자 방문하지 않은 링크를 선택하고 스타일을 지정하는 역할을 합니다 이미 방문한 링크의 스타일은 지정되지 않습니다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 a:link { background-color: yellow; color: red; text-decoration: underline; } } 네이버 방문하기 다음 방문하기 Colored by Color Scripter cs 방문하지 않은 링..
CSS에서 선택자는 스타일을 지정할 요소를 선택하는 데 사용되는 패턴입니다. 이를 통해 특정 요소를 선택하여 스타일을 적용할 수 있게 됩니다 [속성] 선택자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a[target] { background-color: yellow; } naver.com daum.net president.go.kr Colored by Color Scripter cs a태그의 [target] 속성을 선택합니다. = daum.net president.go.kr [속성=값] 선택자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 a[target="_blank"] { background-color: yellow; } a[target="..
length(); length()는 메서드(함수)로, 문자열의 길이를 알고자 할 때 사용됩니다. 즉 글자의 수를 알고자 할 때 사용합니다. 자바는 16비트 유니코드를 사용하기에, 모든 글자들이 한글이든 영문이든 항상 1개로 간주됩니다. 아래는 length()과 length의 차이입니다. 1 2 3 4 5 String a = "abcd1234"; System.out.println(a.length());// String 문자의 길이 String[] b = { "abc", "def", "ghi", "12", "34"}; System.out.println(b.length);// 배열원소의 개수 cs 8 5 length; length는 배열의 길이를 알고자 할 때 사용됩니다. 아래 그림과 같이 arr 배열에 인덱..
