본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ

전체 글485

[jquery] 팝업 창(윈도우) 크기 변경 (window.innerHeight window.outerHeight) 자바스크립트에서 팝업 창을 띄울 수 있다. 그런데 그냥 띄우기만 해서는 의미가 없을 수도 있다. 팝업창의 사이즈가 일정하면 훨씬 깔끔하게 출력이 가능하며, 원하는위치에 배치 할 수록 더 깔끔하기 때문이다. 이를 jQuery를 이용하여 구현할 수 있다. 자바스크립트의 width, height 변경은 웹표준 문제 때문에 웹 개발자들이 꺼려하는 부분 중 하나다. 자바스크립트에서 지원되는 크기 관련 속성은 clientHeight, innerHeight, outerHeight, screenHeight 등 여러가지가 존재 하는데, 가장 문제가 되는 부분은 브라우저별로 각 속성의 값이 다르게 해석 된다는 점이다. 게다가 같은 브라우저에서도 버전에 따라 서로 다른 속성과 계산법이 사용되기 때문에 작업을 완료 하더라도 .. 2018. 10. 7.
substring과 substr의 차이점 문자열을 잘라서 써야 할 때 쓰는 함수가 2개 있다. 물론, 다른 함수들도 많이 있지만, 대표적으로 많이 사용되는 함수가 substring과 substr 이다 이 두개의 함수는 문자열을 자르는 공통점이 있으나 차이점도 있다. 아래를 보면 이해가 쉽다. 1 2 3 4 var str = "abcdefg"; alert("substr : " + str.substr(2,4)); // 첫번째 예시 alert("substring : " + str.substring(2,4)); // 두번째 예시 substr을 했을 때, 위 처럼 문자열이 잘린다. (몇 번째부터, 얼마나) 이런 뜻이다. substring을 했을 때, 위처럼 문자열이 잘린다. (몇 번째부터, 몇 번째까지) 이런 뜻이다. 2018. 10. 7.
execute / executeQuery / executeUpdate 차이 Statement 객체는 SQL문을 데이터베이스로 전송하는데 사용한다. 실제로 다음과 같은 세종류의 Statement 객체들이 있고 모두 주어진 접속상에서 SQL문들을 실행하기위한 컨테이너들로써 동작한다. Statement Statement로부터 상속받은 PreparedStatement PreparedStatement로부터 상속받은 CallableStatement 이러한 것들은 특정 형태의 SQL문들을 전송하기위해 분화되어졌다. Statement 객체는 매개변수 없는 간단한 SQL문을 실행하는데 사용되며, Statment 인터페이스에는 SQL문들을 실행하고 결과들을 검색하기 위한 기본적인 메쏘드들이 있다. PreparedStatement 객체는 IN 매개변수를 가지거나 가지지 않는 프리컴파일된 SQL문을.. 2018. 10. 7.
parent가 http이고 child가 https일 때 발생하는 현상들 이 글에서: parent: 탑(혹은 메인) 프레임, body 내에 iframe을 갖는 페이지를 뜻한다. child: parent의 body 내에 있는 iframe을 뜻한다 child나 parent에서 서로의 자바스크립트 객체나 DOM 객체에 접근 불가 동일 출처 정책 위반으로 브라우저가 차단함. parent와 child간 상호작용은 거의 불가능하다고 봐야 한다. 1 2 3 4 5 // 교차 출처인 윈도우의 프로퍼티(변수, 함수, 브라우저 객체 등)에 접근 불가 window.frames[0].history; // SecurityError: Permission denied to access on cross-origin object window.frames[0].foo; // SecurityError: Per.. 2018. 10. 7.
input name 차이 구분하기 위 태그는 XHTML 1.0 Strict 유효성을 통과한다. name이나 id 속성을 넣어줄 필요가 없다. 그러면 name이나 id는 왜 쓰는걸까?? 이는 특정 요소에 스타일이나 동적 변화에 대한 대상이 되게 하려고 쓰는 것이다. 또한 페이지 전환 시 데이터 전송을 위해서도 쓰인다. 그런데 name 이나 id는 보통 같은값으로 하는 경우가 많다. 두 속성이 같은 기능을 하는것은 아닌데, 왜 그러는 걸까?? 그럴려면 name과 id의 기능을 먼저 알아야 한다. name - image, div, table 등 다양한 요소에 사용 가능 - form 태그를 이용하여 다른 페이지로 값을 전달할 때 사용 - checkbox의 값을 전달할 때 배열로 전달시킴 - 자바스크립트의 getElementsByName을 활용할.. 2018. 10. 7.
[css] radio, checkbox 이미지 바꾸기 2 폼입력 컨트롤중 하나인 라디오버튼(radio)과 체크박스(checkbox)를 CSS의 선택자와 백그라운드 속성을 이용하여 디자인을 입히는 방법을 찾아 변경하는 방법을 정리해본다. HTML에서 다음과 같이 label을 이용하면 된다. ㄹㄹㄹㄹ 1 2 3 4 남자 CSS의 경우 HTML과 달리 기존과 달리 추가해주어야 하는 곳이 많다. IE에서는 적용되지 않게 하기위한 :not 선택자, 라디오버튼(radio)과 체크박스(checkbox) 비활성화와 체크여부를 알기위한 :disabled, :checked 선택자등 CSS3에서 추가된 가상선택자등이 사용되었다. 1 p>input[type="checkbox"], p>input[type="radio"] { position:relative; top:-1px; vert.. 2018. 10. 7.
[css] radio, checkbox css 바꾸기 원하는 radio, checkbox 를 구현하는 방법은 두가지가 있다. 1. 이미지를 넣어서 라디오 버튼과 체크 박스에 내가 원하는 이미지를 넣는 방법. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 /*css*/ input[type="radio"], input[type="checkbox"] { display:inline-block; width:20px; height:20px; vertical-align:middle; background:url(radio_n.png) no-repeat 0 0; appearance: none; -moz-appearance: none; /* Firefox */ .. 2018. 10. 7.
font 태그 속성 모음 태그 예시 내용 내용 내용 색상을 “RED”로 변경 내용 색상을 “16진수 색상코드”로 변경 내용 내용 폰트를 “궁서”체로 변경 내용 내용 내용 내용 내용 내용을 폰트 5사이즈로 변경 내용을 기본 폰트 사이즈 3에서 +1 만큼 변경 내용을 기본 폰트 사이즈 3에서 -1 만큼 변경 내용을 폰트 사이즈 15pt 으로 변경 내용을 폰트 사이즈 15px 으로 변경 폰트사이즈 비교 points (pt) pixels (px) ems (em) percent (%) 6 8 0.5 50 7 9 0.55 55 8 11 0.7 70 9 12 0.75 75 10 13 0.8 80 11 15 0.95 95 12 16 1 100 13 17 1.05 105 14 19 1.2 120 15 21 1.3 130 16 22 1.4 140.. 2018. 10. 6.
나눔고딕,나눔바른고딕 웹폰트 적용하기 기본 폰트를 지정해놓으면 그냥 쓸때보다 훨~씬 깔끔해 보인다. 설정해놓기 좋은 폰트 중에 무료폰트인 나눔고딕을 적용하는 방법을 알아보자. 1. 나눔고딕 웹폰트를 사용하려면 웹폰트로 만들어진 폰트 파일을 서버에 올립니다. 아래링크를 클릭해서 다운로드 하면 된다. 보통 웹폰트는 용량이 크면 안되기 때문에 ttf를 쓰지 않고 woff, eot 파일을 사용한다. woff : Web Open Font Format의 약자로 W3C권고 표준이고, 파이어폭스, 사파리, 오페라, 크롬, IE 9이상에서 지원 eot : Embeded Open Type의 약자로, 표준형식은 아니지만, IE6~8버전에서는 eot만을 지원하기 때문에, woff, eot 모두 필요 2. CSS에서 다음과 같이 정의함으로 폰트를 적용할 수 있습니.. 2018. 10. 6.

티스토리툴바