본문 바로가기

분류 전체보기169

팝업소스 메인 페이지 내용 ============================================================================== 팝업 스크립트 ============================================================================== 팝업하단 ============================================================================== 오늘 하루동안 이창을 열지 않음         [창닫기] 2015. 8. 17.
모바일 웹일 때 주소창이 사라지게 설정하는 법 2015. 1. 29.
미디어쿼리(media queries) 디바이스 사이즈에 따라서, 화면이 변경 미디어쿼리(media queries) 디바이스 사이즈에 따라 변경되는 화면 소스 타이틀 28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. 28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. 28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과 함께 직장인들과 유쾌한 시간을 보냈다. 28일 밤 방송된 KBS 2TV 예능프로그램 '투명인간'에는 진세연이 출연해 강호동, 정태호, 하하, 김범수, 강남, 박성진과.. 2015. 1. 29.
미디어쿼리(media queries) 적용 미디어쿼리(media queries) 인터넷 익스플로어 8이하 버전에서는 미디어 쿼리를 적용할 수 없다.​ 모바일에서는 미디어 쿼리를 전부 지원한다.​ portrait는 height > width 때 적용(세로길이가 더 길때, 폰에서는 폰을 세로로 봤을 때를 의미) @media all and (orientation:portrait){ #article {background:#000;} } landscape는 height < width 때 적용(화면을 가로로 돌렸을 때) @media all and (orientation:landscape){ #article {background:#000;} }​ screen의 width가 640px 이하일때 아래와 같은 옵션을 적용 @media screen and (max-.. 2015. 1. 29.
em 적용방법 12px을 em으로 변경하려면 12 % 16 = 0.75이고 이값은 0.75em 혹은 75%가 된다. 16은 일반 웹 브라우저에서 100% 글자 크기인 16px을 말한다. px이 em으로 변경되어 나온 표가 있는 사이트 주소는 http://pxtoem.com 반응형 핵심기법3가지(필수) •Fluid Grid - ​width값을 %로 주어, 디바이스 크기에 맞게 자동으로 조정할 수 있도록 하는 기법 •Flex Images -​ width나 height값을 px등의 고정값으로 하는게 아니라, 역시 %를 사용하는 기법 •Media Queries - ​웹페이지를 각 상황에 맞게 출력할 때 사용한다. 2015. 1. 29.
div 안에 div 중앙정렬 위의 소를를 적용하면 아래와 같이 나온다 상단에서 스페이스를 원할경우 1. a 레이어 안쪽 여백인 padding-top값을 주면된다. #a {width:680px;height:300px;background:#580303;position:relative;margin:0px auto; padding-top:20px;} #b {width:300px;height:100px;background:green;margin:0px auto;} 2. b 레이어에 position:relative; 값 적용 후 top:20px; 로 해결해도 된다. (상대값 적용) #a {width:680px;height:300px;background:#580303;position:relative;margin:0px auto;} #b {wid.. 2015. 1. 29.
CSS3 우선순위 우선 순위는 1. Inline style(inside an HTML element) - ​태그 안쪽에 써주는게 가장 우선 순위가 높음 2. Internal style sheet(in the head section) - 에 넣어주는게 두번째 3. External style sheet - ​외부스타일 시트에 적용된것이 3번째 4. Browser default - ​브라우저 기본 태그 곁에 써준것이 적용 우선순위가 가장 높기 때문에, 아무리 외부 스타일 시트에서 적용해줘도 먹히지 않는다 dfsdfsdfdsfsdfsdf. sdfjskdjfklsdf 이런 경우를 Multiple Style Sheets 라고 부릅니다. 적용 우선 순위는, 외부에서 불러온 스타일(external style sheet) 시트보다는, i.. 2015. 1. 28.
CSS3 태그 선택자와 클래스 선택자 ​CSS3 태그 선택자와 클래스 선택자 같은 종류의 태그들 중에, class 명이 있는 태그를 선택하는 방법 ​ 밑에 태그가 4개가 있다. 그중에서 클래스명이 introductio인 태그만 선​택하는 방법은 ​ li.introduction{background:black; color:red;} 이다.​ ​ ​ 배경색과, 글자색을 지정 배경색과, 글자색을 지정 배경색과, 글자색을 지정 배경색과, 글자색을 지정 2015. 1. 28.
CSS3 후손 선택자 ​ ​ ​ ​ title CSS연습 CSS연습2 ​ ​ ​ title CSS연습 CSS연습2 ​ ​ 주의사항 ​ 위와 같은 선택자는 #header 태그의 후손에 위치하는 h1태그를 선택하고 일반적인 h2태그를 선택합니다. ​ 만약 #header 태그의 후손에 위치하는 h1태그와 #header 태그의 후손에 위치하는 h2태그를 선택하고 싶다면, ​ 다음과 같이 사용해야 합니다. ​ 2015. 1. 28.
CSS3 클래스 선택자 CSS3 클래스 선택자 . - 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자 입니다. ​ 태그 하위에 ​블로그 입니다. ​가 있습니다. ​ class="introduction"​을 선택하려면, .introduction​ 라고 해주시면 됩니다. ​ ​ ​여러개의 class 선택자에 같은 속성을 지정할 경우에는 각각의 class를 쉼표로 구분합니다. ​ ex) ​ .inst​ruction, instruction2, instruction3{ ​background : black; color : red;​ }​ ​ ​ 모니터 속 세상 모니터 속 세상 모니터 속 세상 모니터 속 세상 2015. 1. 28.
CSS3아이디 선택자 #​ div 레이아웃 ​ ​ Header aside content footer CSS3아이디 선택자 #​ - ​​id속성을 가진 태그를 선택해서, 원하는 속성을 부여한다. ​​ 아래 소스 본문을 보면, body태그안의 id가 header인 div를 선택했다. ​ 태그안에서 다음과 같은 형식으로 속성을 지정해줬다. ​ #header { ​ width: 680px; ​ margin: 0 auto; /* 가운데 정렬 */ ​​ background: yellow; ​ color: black; /* 글자색 : 검정 */ ​​} 2015. 1. 28.
태양열충전겸용 (MP-S23000) 파워뱅크 23000mAh 낚시를 가면 언제나 곤란한 경우가 일 문제로 전화를 받는다 이럴때면 달려가던 곳이 작은 pc방 이제는 노트북을 항상 소지하고 다니지만 이도 배터리 문제로 여의치 않다. 고민하던중 전원이 없는 곳에서도 충전을 하기위해 태양열 파워뱅크를 찾기 시작했다. 태양전지판넬을 이용면 어떨까 했는데 ... 부피 문제로 아웃~ !! MP-S23000를 발견 하곤 쾌재를 불렀다. 태양열충전겸용 (MP-S23000) 파워뱅크 23000mAh....85wh!!! 입력전원 DC 5-12v 1.2A(max) 태양열 입력 15V 2.1A 출력 Usb 5v 2.1A DC 12v/16v/19v/ 3A ... 대분분의 파워 뱅크들은 덩치도 크고 전원으로 충전을 해서 써야하는 불편함이 있다. S23000은 이런 불편함을 한방에 해서 한,.. 2015. 1. 28.
Lifetrons DrumBass™ III Bluetooth® Wireless Speaker (블루투스 스피커) 스위스에서 디자인된 Lifetrons DrumBass™ III Bluetooth® Wireless Speaker , 최대 거리 10미터의 Bluetooth® 기술 , 우아한 블랙 메탈 처리 , 무선 오디오 재생 최대10시간 ..손 안에 꼭 들어가는 크기로 여행 시 매우 편리 하다. 보통은 스피커의 W를 보고 좋다 나쁘다 하는데 스피커는 우선 들어 봐야 한다 . 와트가 아무리 놓아도 음질이 쓰레기 같은 것 들이 많아서 실망을 하기 마련이다 , 이놈은 심플한 디자인에 반하고, 가벼운 중저음에 또 한번 놀란다. 하단에 음량조절표시가 있다 충전코드와 오디오 연결잭이 동봉된다 하단부에 블루투스와 일반 오디오 연결을 선택할수있다 원통형의 울림은 주위에 퍼지지 않고 근거리에서만 잘 들리도록 디자인 되었다 컴펙트한 케.. 2015. 1. 26.
무선충전기 무선 충전기를 알아보니 케이스와 패드가 필요하다. 요즘은 모듈이라는 것이 나와서, 무선 충전기 케이스를 사지 않아도 케이스 안에 모듈을 장착하면 무선 충전기능이 가능하다... 가격대를 알아보니 충전모듈이나 무선충전 케이스가 별반 차이가 나지 안더라는...충전시 매우 편리하고 충전기 삽이 고장날 일이 없다 일반케이스도 무선 충전기 모듈의 자리가 있다 하지만 원가 절감을 위해 무선 모듈을 삭제하여 따로 구매하도록 한것이다 무선충전 패드에 올려 놓으면 삑하는 소리와 함께 무선 충전이 시작된다 2015. 1. 16.
리뷰안 850X 256GB / 리뷰안 850X mSATA 256GB 노트북 데스크탑 ssd 교체하기 850X 256GB / 리뷰안 850X mSATA 256GB으로 데스크탑과 노트북 하드 교체하기 ~ 1 노트북 하드 ssd교체하기 용량이 작은 울트라북 때문에 가끔 고생을 하다 ssd HD의 가격이 인하 됨에 따라 교체하기로 결정! 리뷰안 850X mSATA 256GB/SM2246/인텔MLC/AS6년 193,000원 z330 의 하단부를 분해한다 분해후 상단은 배터리 왼족 중간은 cpu 오른쪽 중간이 ssd 100G ssd 하드의 나사 2개를 분해후 새로운 ssd 256을 장착한다 장착후 모습이다 장착후 컴퓨터를 부팅하면 위와 같은 화면이 나온다 850X mSATA 256GB가 보인다 문제는 포멧인데 AS센터에서 파는 리커버리 DVD로는 포멧이 되지 않는다 그래서 USB부팅 디스크를 만들어서 (참조 ht.. 2015. 1. 15.
부팅 usb 만들기 윈도우7 usb 부팅디스크 만들기로 2가지 방법을 사용한다 첫째는 Windows 7USB/DVD tool 사용법이고, 두번째로는 UltraISO사용방법이다. 2번째 방법은 시디에서 바로 부팅 USB를 만드는것이 가능하고, 첫번째 방법은 윈도우 7 ISO를 준비해야 한다. 첫째는 Windows 7USB/DVD tool 사용법 우선 첫번째 방법은 윈도우 7 ISO를 준비하고, Windows 7USB/DVD tool 다운 받아 인스톨 한다 인스톨한 Windows 7USB/DVD tool을 클릭해서 실해하면 브라우저라는 버튼이 있다 준비한 윈도우 7 ISO를 선택해 준다 넥스트 버튼 클릭 Usb를 선택하기 위한 버튼이 나오면 선택해 주면 된다 시작버튼을 클릭하면 USB를 깨끗하게 지우라는 메시지가 나온다 클릭~ 포멧하세.. 2015. 1. 10.
[갤럭시노트4] 갤럭시노트4블랙... 기어 s 노트4 기어s 연동하기 ... 블루투스로 연동 된다고 하길래..... 그럼 어떻게 운동하면서 먼 거리에서 전화를 받을 수 있을까가 궁금했다 ... 알고 보니, 기어의 전화 번호(3g 번호)가 하나 더 있어서 자동 착신이 된다는 거다 ... 노트4의 해상도는 차원이 다른 슈퍼하몰레드 디스플레이를 제공한다 우선 속도면에서는 빠르다 디자인도 심플하고.... 다른 설정을 하지 않아도 노트4와 컴퓨터는 연동된다 이렇게 바로 뜬다 메모리 카드를 넣으면 핸드폰과 메모리 카드, 2가지 폴더를 볼수 있다 카메라 모드 사용하기 노트4의 동영상 크기는 엄청나다 ... 굳이 고프로 같은 액션캠을 살 필요가 없을듯 하다 급하다면, 드론에 바로 붙여서 촬영이 가능할 정도의 해상도다 일반 적으로 카메라를 사용시 오토에 놓고 촬영을.. 2015. 1. 5.
한국관광공사 여행관련 앱 ~ 위시빈, 티카, 예약왕, 일용이네, 샘포스트 한국관광공사 관광정보를 활용한 우리 여행을 더욱 완벽하게 만들어주는 완소 어플이 나왔습니다. 이벤트 진행중~ 여행에 도움이 되는 어플을 사용해보고 후기를 남겨주시고 주변 친구들에게 소문내주세요. "시간은 있는데, 교통편이 걱정이야" "떠날 준비는 끝났는데 같이 갈 사람이 없어"라는 당신에게 여행과 카풀이 만나 새로운 여행이 시작되는 곳 티카/ "여행이 코앞인데 뭘 해야할지 막막하네. 여행 계획은 언제 세우지?"라는 당신에게 전 세계 2만여 개의 여행일정이 당신을 기다리는 곳. 위시빈/ "저 푸른 초원 위에 그림 같은 집~에서 즐기는 여행이 최고야"라는 당신에게 전국의 숙박시설 검색부터 예약까지 한 번에 해결되는 곳 예약왕 / "여행지에서 나만의 감성을 특별하게 간직하고 싶어"라는 당신에게스마트폰으로 찍고.. 2014. 12. 13.
target 쓰는 법 프래임 구조상 상위 프래임의 주소를 바꾸게 하려면 예제)------------------------------------------------------------ -------------------------------------------------------------------------------------------------------------- 모바일 페이지 사이즈 자동조절 ** 디바이스가 다른 해상도에 맞춰 100%로 최적화 되도록 보여줌. ** 전화자동걸기 태그 방지. 전화번호 형식의 경우 자동전화걸기로 연결되는데 이를 방지. ** webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 body { -webkit-text-size-adjust: none; } http://t.. 2014. 11. 17.
페이지 이동 할때 사용 location.replace / location.href 의 비교 -1 -2 ​ 이렇게 해서 함수안에 기술해서 쓰던지 ㅋㅋ location.href 와 location.replace 둘다 다른 페이지로 이동 할 때 사용 하지만 location.href = 'url' 는 새로운 페이지로 이동 시키는 것 -> 뒤로가기 O / 주소 히스토리 기록 O location.replace('url') 는 현재 페이지에 새로운 페이지로 덮어 쓰는것 -> 뒤로가기 X / 주소 히스토리 기록 X 모바일 용 이동 경로 ................................................................................... ================================.. 2014. 11. 17.