본문 바로가기

HTML

[univerous] 자바스크립트, CSS, HTML Beautifier(Prettifier) 안녕하세요, 유니버러스 입니다. '아이참.. 소스 참조하려니 이거 외계코드네.. ㅋㅋ''minify 되어 있어서 보기 힘들잖아.. ' 분명 이렇게 말씀하시는 프로그래머나 기타 사이트 관리 하시는 분들이 있을거에요뭐 특별한 기능은 없지만, 간단하게 유니버러스에서 준비해 봤습니다. 이제 여기저기 찾아다니지 마세요 ^^일명, Beautifier, Prettifier, formatter 라고 불리우는 코드 정리 프로그램입니다. **주의 엄청 긴 코드를 넣으면 브라우저 뻗어버리니 조심하세요, ㅋㅋ 접속 URL JS 코드 정리 https://www.univerous.com/Tools/JsBeautifierCSS 코드 정리 https://www.univerous.com/Tools/CssBeautifierHTML 코드.. 더보기
[자바스크립트] 객체를 만들어보자! 객체 만들기 ▶▷ 알아두면 좋은 것들 관련글 자바스크립트는 객체지향적인 언어입니다. 자바나 다른 언어처럼, 객체도 만들 수 있고, 상속 등등이 가능한데요. 다른 언어를 통해 생성자를 이해하고 계시다면, 별다른 설명 없어도 밑의 소스를 보시고 이해하실거라 생각합니다. 어떻게 만들 수 있는지 한번 보실까요? 1. student 함수 정의 function student(name, id) - 생성자가 될 사용자 정의의 함수 입니다. - 두개의 매개 변수를 통해, this 키워드를 이용해서 해당하는 객체에 name과 id 값을 설정합니다. 2. student 함수 정의 student.prototype.getName = function() - prototype 이란 프로퍼티는 해당 객체가 가지고 있는 모든 인스턴스.. 더보기
[자바스크립트] '레이블', 반복문을 제어하자! 레이블(label) ▶▷ 알아두면 좋은 것들 반복문(for, for/in, while, do while), break, continue 관련글 레이블을 이용한 반복문 제어를 이번 글에서 해볼까 합니다. 레이블이 그렇다면 무엇이냐? 맞습니다. 알고있는대로 이름표 정도로 생각해 두시면 좋을 것 같은데요. 이 레이블로 원하는 위치에 접근을 할 수 있습니다. 레이블을 사용한 예로 들자면 switch 문의 case 와 default 정도가 되겠네요. 여기서도 레이블을 사용해서 조건에 맞게 명령문이 실행됩니다. 보통, 레이블은 반복문에서 쓰입니다. 그것도 break와 continue 문과 같이 쓰이게 되죠. 어떻게 쓰이느냐. 다음과 같이 쓰입니다. break 레이블명; continue 레이블명; 기존의 쓰던 방법은.. 더보기
[자바스크립트] 'typeof', 데이터 타입을 알아보자! typeof 연산자 ▶▷ 알아두면 좋은 것들 document.write() 관련글 다들 'typeof' 라는 연산자에 대해서 알고 계신가요? "그거 함수가 아니냐?" 라고 하시는 분들은 이미 연산자를 사용해 보셨거나, 한번 즈음은 보신 분이라 생각합니다. typeof 는 연산자가 맞습니다. 물론 typeof()의 형태로 쓸 수 있기 때문에 함수라고도 볼 수 있죠. 1. typeof 변수 or 값 2. typeof(변수 or 값) 네 위와 같이 쓸 수 있습니다. 그렇다면, 도대체 typeof 연산자는 무엇을 하는 연산자일까요? 'typeof'의 연산자는 피 연산자, 즉, typeof 다음에 위치하게 되는 변수나 값이 어떤 타입(Type)을 가지는지 식별하여 보여줍니다. 이와 유사한 것으로 instanceo.. 더보기
[자바스크립트] 'Array', 배열 및 다차원 배열 선언에 대해 알아보자! Array & Multi-dimensional Array ▶▷ 알아두면 좋은 것들 Document.write(), 배열에 대한 이해 관련글 [자바스크립트] 배열의 리터럴 선언, 또다른 배열 선언 방법! 이 글은 배열에 대한 개념을 이해하고 있다고 가정하고 쓰기 때문에, 배열에 관한 내용은 다른 글을 참고해 주세요. 자바스크립트에서 배열(Array)을 사용하기 위해서는 자바와는 비슷하지만 다른 방식으로 접근을 해야하는데요~ 특히, 다차원 배열 즉, 2차·3차 배열을 선언할 때 주의깊게 봐야합니다. 우선, 1차원 배열을 선언하는 방법에 대해서 알아볼게요. 1. var arr = new Array(); 2. var arr = new Array(3); 3. var arr = new Array("가", "나", .. 더보기
[자바스크립트] 배열의 리터럴 선언, 또다른 배열 선언 방법! Array 리터럴 ▶▷ 알아두면 좋은 것들 document.write(), 배열의 기본 선언 방법 관련글 1. [자바스크립트] 'Array', 배열 및 다차원 배열 선언에 대해 알아보자! 다들 배열 선언 방법에 대해서 알고 계신가요~? 그렇지 않다면, 관련글 1번을 참고하시고 오시면 좋을 것 같습니다. 이번글에서는 배열의 또다른 선언 방법인 리터럴 선언 방법을 알려드릴까해요~ 우선 선언 방법을 보실까요? var 변수명 = [요소1, 요소2, ... , 마지막 요소]; 자, 눈치 채셨는지도 모르지만, 이 방법은 배열을 생성하고, 초기화까지 동시에 이루어지는 방법입니다. 기본적으로 배열을 생성한다는건 new Array()를 써서 배열을 선언하는 방법을 일컫는데요, 위와 같이 함으로써, 1차배열을 선언할 수 .. 더보기
[자바스크립트] '문자 ↔ 숫자', 타입을 바꿔보자! String(), toString(), ParseInt(), ParseFloat() 간혹, 이런 경우가 있습니다. 1. 데이터형이 숫자형인데 문자형으로 바꾸고 싶다.!! 2. 숫자를 포함하고 있는 문자열인데, 숫자만 뽑아내서 숫자형으로 만들고 싶을때가 있다. 이번 글에서는 위의 필요성으로 다음과 같은 방법들을 소개하고자 합니다. ^^ 숫자에서 문자로 var number = 10; 1. 숫자와 문자를 더한다. 빈 문자열도 가능하다. var myString = number + " 이것은 숫자가 아니오."; var myString = number + ""; 2. toString() 을 쓴다. var myString = number.toString; 3. String() 을 쓴다. var myString = S.. 더보기
[자바스크립트] 이스케이프 시퀀스! 이스케이프(escape) 시퀀스 문자열 내에서 특수 문자를 쓰고 싶은데, 그렇지 못할때까 많죠? 예를 들면 다음과 같은 상황들 말이에요 ^^ 1. You're in the house. 2. 이것은 \500 입니다. 3. 그 소녀의 이름은 "청순녀" 입니다. ..... 제가 하고 싶은 말은, 자바스크립트 내에서 문자열을 나타내고자 할때 입니다. 위에서 문제가 되는것은 1번에서 작은따옴표 ', 2번에서 원화표시 \, 3번에서 큰따옴표 "" 인데요, 더 예를 든다면, / 기호라든지, 아님 상황에 따라서, 탭문자나 줄바꿈 문자 등이 있겠군요. 이것들이 문제가 되는 이유는 각각이 어떤 특별한 역할을 한다거나, 또는 어떤 특별한 기능을 간단한 문자열로 나타낼 수 없을 때에 있습니다. 일례로 작은 따옴표나, 큰 따옴.. 더보기
[자바스크립트] 드롭다운 메뉴를 만들어보자! -1탄 메뉴 만들기 - 1탄 ▶▷ 알아두면 좋은 것들 CSS, 태그 접근법, event-onmouseover, event-onmouseout, 태그관련글 이번 글에서는 메뉴 만들기를 해볼까 합니다. CSS의 visibility 나 display속성을 이용해서 DIV를 감춘다든지 해서 구현을 하는 방법도 있지만, 최대한 CSS를 적게 써가면서 기본적인 이벤트만으로 만들어 볼까해요. 핵심적으로 쓰인 이벤트 속성으로 srcElement와 toElement 프로퍼티가 있는데요. 설명은 다음과 같습니다. fromElement - 이벤트가 일어나기 이전의 요소가 담긴다. srcElement - 이벤트가 일어난 요소가 담긴다.toElement - 이벤트가 일어나고 이동할 다음요소가 담긴다 그리고 메뉴가 구성되는 방법은 다음.. 더보기
[자바스크립트] 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기! onmouseover ▶▷ 알아두면 좋은 것들 BOM, 스타일 시트, event-onmouseover, event-onmouseout, 마우스오버에 대한 개념 이번 글에서는 마우스가 글씨 위에 위치할 시에 마우스 오버 효과로 글씨를 바꾸는 것을 해볼까 합니다. ^^ 사실 이번 효과를 위해서 필요한 이벤트는 'onmouseover' 와 'onmouseout' 이벤트입니다. 'onmouseover' 이벤트는 마우스의 커서가 해당 요소 위에 위치할 때 일어나는 이벤트구요, 'onmouseout' 이벤트는 마우스의 커서가 해당 요소에서 위치하다가 빠져나갈 때 일어나는 이벤트 입니다. 그리고 innerText라는 프로퍼티라는 것을 잠시 살펴볼 것인데요. innerText는 태그와 태그 사이에 존재하는 텍스트 데이.. 더보기

티스토리툴바