검색결과 리스트
전체에 해당되는 글 249건
- 2014.03.18 meta 태그, base 태그, map 태그, fieldset 태그
- 2014.03.18 Table 태그 CSS
- 2014.03.18 수정된 정보를 다시 부모창으로 넘겨주기, 부모에서 자식 창으로 넘겨주기
- 2014.03.18 Form안 Json 만들기
- 2014.03.18 가운데 정렬, 중앙 이미지 고정, absolute 이용한 중앙 정렬, body 요소 가운데
- 2014.03.18 while-space, workd-break, word-wrap, text-overflow
- 2014.03.18 클로져 활용법
- 2014.03.18 Html 이미지 없는 라운드 테이블 만들기
- 2014.03.18 Tab키 이동순서 정하기
- 2014.03.18 Static 키워드
글
meta 태그, base 태그, map 태그, fieldset 태그
<meta http-equiv="Refresh" content="60"> - 60초 마다 새로고침
<meta http-equiv="Refresh" content="5; url=주소"> - 주소로 5초 후 이동
* http-equiv=name (대소문자 구별 X)
: 'name' 속성대신 사용하며, HTTP 서버들이 HTTP 반응 메세지 헤더의 정보를 수집하기 위하여 사용.
렌더링 엔진 지정
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-> IE 브라우저에서는 무조건 최신 버젼으로 해석하라.
<meta http-equiv="X-UA-Compatible" content="IE7" />
-> 'IE7' 버젼으로 렌더링
-------------------------------------------------------------------------------------------
<base target='_blank'>
이렇게 페이지 윗 부분에 선언해 놓으면 이 base태그 다음에 나오는 링크들이 target 속성은 모드 _blank가 된다.
* 주로 base 태그는 프레임에서 많이 사용하기도 한다.
<base target='mainFrame'> 이런식으로 왼쪽 프레임에서 사용해주면 링크 클릭시 모든 타겟이 mainFrame로 가게 된다. ( mainFrame 은 아마 <frame> 태그 인듯 함. )
또 다른 하나의 기능 <base href='http://www.sdlfkn.com'> 이렇게 선언해주었을 경우
<img src='/img/test.gif'>의 주소는 <img src='http://www.sdlfkn.com/img/test.gif' />와 마찬가지로 인식하게 된다.
-------------------------------------------------------------------------------------------
map 사용
map 태그에 대한 정리
영역을 3가지 유형이다. shape=(rect, circle, poly)
<img src='이미지경로' usemap='#이름'>
<map name='이름'>
<area shape='rect' coords='x1, y1, x2, y2' href=링크주소 >
</map>
<area shape='circle' coords='(x1, y1, r)' href=링크주소 >
<area shape='poly' coords='x1, y1, x2, y2, x3, y3, x4, y4, x5, y5' href=링크주소>
-------------------------------------------------------------------------------------------
fieldset에 사용방법
(그룹박스)
<fieldset> <legend align='center'> 패널 </legend> 안녕하세요 <br/> <input type='button' value='확인' /> </fieldset>
* 참조
IE fieldset 태그에 배경색 깔끔 설정
fieldset {
background-color : #af0;
position : relative;
margin-top : .5em;
padding-top : .5em;
}
legend {
position : absolute;
top : -.7em;
left : .5em;
}
'H > Html' 카테고리의 다른 글
| HTML: How to make a submit button with text + image in it? (0) | 2014.06.23 |
|---|---|
| parent.location 해당 a name 으로 이동 (0) | 2014.03.19 |
| Html 이미지 없는 라운드 테이블 만들기 (0) | 2014.03.18 |
| Tab키 이동순서 정하기 (0) | 2014.03.18 |
| URL 최대길이 (0) | 2012.03.22 |
글
Table 태그 CSS
- 서로 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현
border-collapse : collapse;
- 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현
border-collapse : separate;
'C > CSS' 카테고리의 다른 글
| CSS zoom 오브젝트를 확대 시켜 주는 속성 (0) | 2014.03.19 |
|---|---|
| CSS로 심플라인 테이블 (0) | 2014.03.18 |
| div에서 vertical-align : middle 적용하기 (0) | 2014.03.18 |
| 가운데 정렬, 중앙 이미지 고정, absolute 이용한 중앙 정렬, body 요소 가운데 (0) | 2014.03.18 |
| while-space, workd-break, word-wrap, text-overflow (0) | 2014.03.18 |
글
수정된 정보를 다시 부모창으로 넘겨주기, 부모에서 자식 창으로 넘겨주기
자식 -> 부모
A.html
function modal_pop(){
retVal = window.showModalDialog("B.html", window, "옵션");
alert(retVal);
}
B.html
function set_retValue(){
var result = "잘 생겼다 잘생겼다";
window.returnValue = result;
}
<body onUnLoad="set_retValue()">
부모 -> 자식
A.html
var test1 = '123'; var test2 = '234';
window.open('B.html?name=' + test1 + '&hobby=' + test2, "페이지 별칭", "옵션");
B.html
function getParameter(p){
if(p) r = location.search.match(new RegExp('[&!]' + p + '=(.*?)(&|$)'));
return r && r[1] ? r[1] : null;
}
alert(getParameter('name')); alert(getParameter('hobby'));
'J > Javascript' 카테고리의 다른 글
| Script async와 defer (0) | 2014.03.19 |
|---|---|
| ShowModal, ShowModaless Dialog (0) | 2014.03.18 |
| Form안 Json 만들기 (0) | 2014.03.18 |
| 클로져 활용법 (0) | 2014.03.18 |
| javascript arguments를 array로 변환하기 (0) | 2014.03.16 |
글
Form안 Json 만들기
var obj = null;
try {
if(this[0].tagName && this[0].tagName.toUpperCase() == 'FORM'){
var arr = this.serializeArray();
if(arr) {
obj = {};
jQuery.each(arr, function(){ obj[this.name] = this.value; });
}
}
} catch(e) {
alert(e.message);
} finally {}
return obj;
참고
json 형태는 이렇다.
{ "pe" : [{"f"" : "value" }] }
'J > Javascript' 카테고리의 다른 글
| ShowModal, ShowModaless Dialog (0) | 2014.03.18 |
|---|---|
| 수정된 정보를 다시 부모창으로 넘겨주기, 부모에서 자식 창으로 넘겨주기 (0) | 2014.03.18 |
| 클로져 활용법 (0) | 2014.03.18 |
| javascript arguments를 array로 변환하기 (0) | 2014.03.16 |
| JavaScript - Prototype's delay() Function (0) | 2014.03.16 |
글
가운데 정렬, 중앙 이미지 고정, absolute 이용한 중앙 정렬, body 요소 가운데
가운데 정렬
1.
<style>
body {}
.center { background : url(4.png) no-repeat;
width : 700px;
height : 700px;
margin : 0 auto;
}
</style>
2.
<div style="width : 100%; text-align : center;">
<div style="width : 860px; height : 700px; margin : auto;"></div>
< /div>
---------------------------------------------------------------------
중앙 이미지 고정
background : url(*.jpg) no-repeat fixed center center;
---------------------------------------------------------------------
absolute 이용한 중앙 정렬
#gotop {
position : absolute;
left : 50%;
top : 50%;
margin-left : 410px;
background : #ddd;
width : 100px;
height : 1000px;
}
---------------------------------------------------------------------
body 요소 가운데
body {
margin : 0 auto;
width : 930px;
position : relative;
}
'C > CSS' 카테고리의 다른 글
| CSS zoom 오브젝트를 확대 시켜 주는 속성 (0) | 2014.03.19 |
|---|---|
| CSS로 심플라인 테이블 (0) | 2014.03.18 |
| div에서 vertical-align : middle 적용하기 (0) | 2014.03.18 |
| Table 태그 CSS (0) | 2014.03.18 |
| while-space, workd-break, word-wrap, text-overflow (0) | 2014.03.18 |
글
while-space, workd-break, word-wrap, text-overflow
white-space
공백 문자는 어떻게 다룰 것인지 지정하는 코드. (HTML 코드 상에서 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등)
white-space : normal;
기본값, 연속 공백과 줄바꿈 등은 통합해서 표현. (보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인 것처럼 적용됨)
white-space : pre; - 원문 그대로 출력. normal과 반대.
white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함.
white-space : inherit; - 부모 요소의 값을 상속
-------------------------------------------------------------------------------------------
word-break
텍스트가 들어가는 블록 요소의 가로 사이즈에 맞춰 줄바꿈 해줄까. 말까 하는 코드
강제 줄바꿈 방지. 텍스트 길이 제한.
word-break : normal; -> 기본값, 단어단위로 끊어서 줄바꿈.
word-break : break-all; -> 특수문자를 제외하고 강제로 줄바꿈.
word-break : break-word; -> 특수문자를 포함하고 강제 줄바꿈.
word-break : nowrap; -> 줄바꿈하기 싫을 때
word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.
-------------------------------------------------------------------------------------------
word-wrap
텍스트가 들어가는 블록 요소의 사이즈에 따라 줄바꿈 해주는 코드.
word-wrap : break-word;
가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다.
word-break : break-all; 과 같은 결과물
-------------------------------------------------------------------------------------------
Text-overflow
긴 문자열을 잘라주는 형태를 지정
text-overflow : clip;
엘리먼트의 테두리에 맞춰서 글자를 자른다.
text-overflow : ellipsis;
잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)
* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.
* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정해줘야합니다.
-> 일반 인라인 속성이라면 아무리 가로 사이즈를 지정해줘도 못 알아먹습니다.
ex) display : inline-block; text-overflow : ellipsis;
overflow : hidden; white-space : nowrap;
* div나 selection 같은 기본 블록 요소들은 display 지정을 안해도 됩니다.
'C > CSS' 카테고리의 다른 글
| CSS zoom 오브젝트를 확대 시켜 주는 속성 (0) | 2014.03.19 |
|---|---|
| CSS로 심플라인 테이블 (0) | 2014.03.18 |
| div에서 vertical-align : middle 적용하기 (0) | 2014.03.18 |
| Table 태그 CSS (0) | 2014.03.18 |
| 가운데 정렬, 중앙 이미지 고정, absolute 이용한 중앙 정렬, body 요소 가운데 (0) | 2014.03.18 |
글
클로져 활용법
function makerSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = makerSize(12); var size14 = makerSize(14); var size16 = makerSize(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
<a href="#" id="size-12"> 12 </a>
<a href="#" id="size-14"> 14 </a>
<a href="#" id="size-16"> 16 </a>
클로져 : 두개의 이루어진 특별한 오브젝트이다.
첫 번째는 함수이고 두 번째는 그 함수가 만들어진 환경이다.
그 함수가 만들어진 환경을 함수가 만들어질 때 사용할 수 있었던 변수들로 이루어진다.
function makefunc(){
var name = "Mozilla";
function displayName(){
alert(name);
}
return displayName;
}
이 경우에는 displayName 함수와 "Mozilla" 문자열을 포함하는 클로져이다.
var counter = (function(){
var privateCounter = 0;
function changeBy(val){
privateCounter += val;
}
return { increment : function(){ changeBy(1); },
decrement : function(){ changeBy(-1); },
value : function(){ return privateCounter; } };
});
자주 하는 실수 : 클로져
<p id="help"> Help </p>
<p> E - mail : <input type='text' id='email' name='email'> </p>
<p> Name : <input type='text' id='name' name='name'> </p>
<p> Age : <input type='text' id='age' name='age'> </p>
function showHelp(help){
document.getElementById('help').innerHTML = help;
}
function setupHelp(){
var helpText = [{'id' : 'email', 'help' : 'e-mail'}, {'id' : 'name', 'help' : 'name'}, {'id' : 'age', 'help' : 'age'}];
for(var i=0; i<helpText.length; i++){
var item = helpText[i];
document.getElementById(item.id).onfocus = function(){ showHelp(item.Help); }
}
}
setupHelp();
이 코드는 제대로 실행되지 않는다.
이유는 onfocus 이벤트에 지정한 함수가 클로져라는 것이다.
이 클로져는 함수 본체와 setupHelp 함수의 스코프로 이루어져 있다.
세개의 클로져가 만들어졌지만 각 클로져는 하나의 환경을 공유한다.
반복문이 끝나고 onfocus 콜백이 실행될때, 콜백의 환경에서 item 변수는 (세개의 클로져가 공유한다.)
helpText 리스트의 마지막 요소를 가리키고 있을 것이다.
여러개의 클로져를 이용해서 문제를 해결 할 수 있다.
function showHelp(help){
document.getElementById('help').innerHTML = help;
}
function makeHelpCallback(help){
return function(){ showHelp(help); };
}
function setupHelp(){
for(var i=0; i<helpText.length; i++){
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}
setupHelp();
성능 관련해서
클로져가 필요하지 않은 작업인데도 함수 안에 함수를 만드는 것은 스크립트 처리 속도와 메모리 사용량 모두에서 현명한 선택이 아니다.
예를 들면 새로운 오브젝트나 클래스를 만들 때 오브젝트 생성자에 메소드를 정의하는 것 보다 오브젝트의 프로토타입에 정의하는 것이 좋다.
오브젝트 생성자에 정의하게 되면 생성자가 불릴 때 마다 메소드가 새로 할당되기 때문이다.
function MyObject(name, message){
this.name = name;
this.message = message;
this.getName = function(){ return this.name; };
this.getMessage = function(){ return this.message; };
}
||
V
function MyObject(name, message){
this.name = name;
this.message = message;
}
MyObject.prototype = {
getName : function(){
return this.name;
},
getMessage : function(){
return this.message;
}
};
or
function MyObject(name, message){
this.name = name;
this.message = message;
}
MyObject.prototype.getName = function(){ return this.name; };
MyObject.prototype.getMessage = function(){ return this.message; };
위의 두 예제는 상속된 속성은 모든 오브젝트에서 사용될 수 있고 메소드 정의가 오브젝트 생성될 때마다 일어나지 않는다.
* 글로벌 변수는 delete로 지울 수 없다.
ex) // global variable;
var a = 1; // Don't Delete is set
delete a; // false
a; // 1
// normal function;
function f(){} // Don't Delete is Set
delete f; // false
type of f; // "function"
// ressigning doesn't help;
f = 1;
delete f; // false
f; // 1
명기된 속성은 지울 수 있다.
var obj = {x : 1};
obj.y = 2;
delete obj.x; //true
delete obj.y; // true
obj.x; // undefined
obj.y; // undefined
'J > Javascript' 카테고리의 다른 글
| 수정된 정보를 다시 부모창으로 넘겨주기, 부모에서 자식 창으로 넘겨주기 (0) | 2014.03.18 |
|---|---|
| Form안 Json 만들기 (0) | 2014.03.18 |
| javascript arguments를 array로 변환하기 (0) | 2014.03.16 |
| JavaScript - Prototype's delay() Function (0) | 2014.03.16 |
| javascript 파일 저장하기 (0) | 2012.12.25 |
글
Html 이미지 없는 라운드 테이블 만들기
<html>
<head>
<title>title</title>
</head>
<style type="text/css">
.rtop, .rbottom { display : block; }
.rtop *, .rbottom * {
display : block;
height : 1px;
overflow : hidden;
background : #ccc;
}
.r1{ margin : 0 5px; } .r3{ margin : 0 2px; }
.r2{ margin : 0 3px; } .r4{ margin : 0 1px; height : 2px; }
.box { background : #ccc; padding : 5px 10px; font-size : 12px; }
</style>
<body>
<div id="container">
<b class="rtop">
<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
</b>
<div class="box"> 이미지 X 라운딩 표현 </div>
<b class="rbottom">
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
</div>
</body>
</html>
// 라운드 테이블 선
.rtop, .rbottom{ display ; block; }
.rtop *, .rbottom * { display : block; height : 1px; overflow : hidden; }
.r1 { margin : 0 5px; background : #ccc; }
.r2 { margin : 0 3px; border-left : 2px solid #ccc; border-right : 2px solid #ccc; }
.r3 { margin : 0 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }
.r4 { margin : 0 1px; height : 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }
.box { margin : 0; padding : 5px 10px; border-left : #ccc solid 1px; border-right : #ccc solid 1px; font-size : 12px; }
'H > Html' 카테고리의 다른 글
| parent.location 해당 a name 으로 이동 (0) | 2014.03.19 |
|---|---|
| meta 태그, base 태그, map 태그, fieldset 태그 (0) | 2014.03.18 |
| Tab키 이동순서 정하기 (0) | 2014.03.18 |
| URL 최대길이 (0) | 2012.03.22 |
| css로 수직 가운데정렬 4가지 방법 (0) | 2012.03.11 |
글
Tab키 이동순서 정하기
<input type=text tabindex=1 name=1>
<input type=text tabindex=4 name=1>
<input type=text tabindex=3 name=1>
<input type=text tabindex=2 name=1>
Tab key 실행시 name1 -> name4 -> name3 -> name2
'H > Html' 카테고리의 다른 글
| meta 태그, base 태그, map 태그, fieldset 태그 (0) | 2014.03.18 |
|---|---|
| Html 이미지 없는 라운드 테이블 만들기 (0) | 2014.03.18 |
| URL 최대길이 (0) | 2012.03.22 |
| css로 수직 가운데정렬 4가지 방법 (0) | 2012.03.11 |
| 스타일시트 영문 자동줄바꿈 (0) | 2012.02.05 |
글
Static 키워드
1. 클래스를 설계 할 때, 멤버변수 중 모든 인스턴스에 공통적으로 사용해야 하는 것에 static을 붙인다.
- 인스턴스를 생성하면, 각 인스턴스들은 서로 독립적이기 때문에 서로 다른 값을 유지한다.
경우에 따라서는 각 인스턴스들이 공통적으로 같은 유지되어야 하느 경우 static을 붙인다.
2. static이 붙은 멤버변수는 인스턴스를 생성하지 않아도 사용할 수 있다.
- static이 붙은 멤버젼수(클래스 변수)는 클래스가 메모리에 올라갈 때 이외 자동적으로 생성되기 때문이다.
3. static이 붙은 메서드(함수)에서는 인스턴스 변수를 사용할 수 없다.
- static이 메서드는 인스턴스 생성 없이 호출 가능한 반면, 인스턴스 변수는 인스턴스를 생성해야만 존재하기 때문에...
static이 붙은 메서드(클래스 메서드)를 호출할 때 인스턴스가 생성되어 있을 수도 그렇지 않을 수도 있어서 static이 붙은 메서드에서 인스턴스 변수의 사용을 허용하지 않는다.
(반대로, 인스턴스 변수나 인스턴스 메서드에서는 static이 붙은 멤버들을 사용하는 것이 언제나 가능하다.
인스턴스 변수가 존재한다는 것은 static이 붙은 변수가 이미 메모리에 존재한다는 것을 의미하기 때문이다.)
4. 메서드 내에서 인스턴스 변수를 사용하지 않는다면, static을 붙이는 것을 고려한다.
- 메서드의 작업 내용 중에서 인스턴스 변수를 필요로 한다면, static을 붙일 수 없다.
반대로 인스턴스 변수를 필요로 하지 않는다면, 가능하면 static을 붙이는 것이 좋다.
메서드 호출 시간이 짧아지기 때문에 효율이 높아진다.
(static을 안 붙인 메서드는 실행시 호출되어야 할 메서드를 찾는 과정이 추가적으로 필요하기 때문에 시간이 더 걸린다.)
5. 클래스 설계 시 static의 사용 지침
- 먼저 클래스의 멤버변수 중 모든 인스턴스에 공통된 값을 유지해야하는 것이 있는 지 살펴보고 있으면, static을 붙여준다.
- 작성한 메서드 중에서 인스턴스 변수를 사용하지 않는 메서드에 대해서 static을 붙일 것을 고려한다.
추가 사항 정적 내부 클래스 예제
...// staticㅡㅇ로 선언된 변수만 정적 내부 클래스 안에서 쓸 수 있다.
static class StaticNestedClass{ // 정적 내부 클래스 ... }
class Inner{ // 비정적 내부 클래스 }
정적 내부 클래스 쓰기 위한 객체 생성
outer.StaticNestedClass n = new Outer.StaticNestedClass(); // outer 밖에서 생성
StaticNestedClass n = new StaticNestedClass(); // outer 안에서 생성
// 예제
class Outer{
staic int a = 1;
int b = 2;
static void f(){
System.out.println("I'm f()");
}
void a(){
System.out.println("I'm g()");
}
static class StaticNestedClass{
int c = 11;
static int d = 22;
void h(){
System.out.println("나는 정적 내부 클래스다.");
System.out.println(a);
// System.out.println(b); static변수가 아니므로 에러
Outer o = new Outer();
System.out.println(o.b); // 객체 생성해서 쓰면 된다.
System.out.println(c);
System.out.println(d); // 멤버 변수가 static이라도 상관없다.
System.out.println(this.d); // static의 영향이 미치지 않음.
// System.out.println(Outer.this.a); // Outer 멤버 참조 시 this 사용불가
// System.out.println(Outer.this.b);
f();
// g(); static 메소드가 아니므로 에러
static void i(){
System.out.println("I'm i()");
// System.out.println(this.a); // static 메소드에서 this 사용 불가
}
}
}
}
class Test {
public static void main(String[] args){
Outer.StaticNestedClass n = new Outer.StaticNestedClass(); // Outer 객체 없이 생성 가능
n.h();
}
'J > Java' 카테고리의 다른 글
| jackson generic type 관련 (0) | 2014.08.24 |
|---|---|
| URLConnection을 이용한 이미지 추출 프로그램 (0) | 2014.06.28 |
| 자바 제너릭 (1) | 2014.03.16 |
| final 키워드의 중요성 (0) | 2014.03.16 |
| Java 7의 새로운 특징 : Java7에서의 중요한 변화들과 업데이트된 항목에 대한 조사. (0) | 2012.01.24 |
