본문 바로가기

퍼블리싱

 (179)
오늘 하루동안 열지않기 레이어 팝업 html 오늘 하루동안 보지 않기 CLOSE css #pop{position:absolute; // 이외에는 자기 마음대로 설정} .close div{float:left; text-align:right;} #check{font-size:12px; font-family:'돋움'; padding-left:10px;} #close{float:right; font-size:13px; padding:5px; font-weight:bold;} #close a {color:#fff;} javascript 1.head 태그 안에서 먼저 cookie 세팅을 해줘야한다. 2. 팝업 소스가 적힌 뒤에 적용되어야 하는 script가 있다. 와 사이에 script 로 넣음.
화면이 로드되었을때 delay 후 스크립트 적용 화면이 로드되었을때 무언가 fade in 된다던지, 효과를 넣을때 간단하게 쓸수있는 함수. $('#section_01').delay(200).queue(function(){ $(this).addClass('active1'); }); 이런식으로 선택자에게 delay함수를 써주고, addClass를 해주면 된다. 이때, 미리 css 에서 section_01이 active1 클래스를 가졌을 때 특정 부분의 opacity가 1이 되도록 하고, section1에는 transition: all 1s ease 0.5s 등으로 애니메이션 효과를 준다. 예시) html 나타나는 부분 css #section1 .content{opacity: 0; transition: all 0.3s;} #section1.active .c..
화면 크기(width)에 따라 스크립트 적용 pc버전과 모바일 버전에서 적용되어야 하는 script가 다른 경우가 많다. 이럴때 쓸 수 있는 함수. 스크립트 적용시, 하나의 함수를 선언해서 함수 안에서 적용하는게 훨씬 안정적이다. function 함수이름(){ var winWidth = $(window).width(); if (winWidth >= 1024) { //viewport가 1024보다 클때 적용되는 스크립트 } else { //viewport가 1024보다 작을때 적용되는 스크립트 } } //함수지정 함수이름(); // 함수선언 이런식으로 함수 지정 후 선언해주면 끝 !
css 속성 정렬 바꿔주기 나는 원래 CSS를 모든 속성마다 ENTER를 했다. 그래서 CSS 파일이 정말 끝도없이 길어졌다. 1000줄은 기본으로 넘어가곤 했다. 그래도 난 불편한지 몰랐다. 처음부터 그렇게 작성했으므로. 그러다가 우연한 기회에 반드시 css를 인라인으로 써달라는 홈페이지를 코딩하게 됬는데, 세상에! 신세계 아닌가. CSS를 띄어서 쓰면 각 속성 찾기에는 편할지 몰라도 코드 찾는게 좀 어려웠는데 인라인으로 쓰니 속성이 아무리 길어봤자 1-2줄이면 끝나니까 바로바로 찾을수 있어서 너무너무 편했다. 상대적으로 띄어서 쓰는것이 불편하게 느껴졌다. 처음에는 손에 익은 코딩 방법을 바꾸려니 조금 어색했는데, 이제는 잘 적응해서 CSS를 인라인으로 쓰면서 편하게 코딩하고있다. 문제는 내가 이전에 코딩해둔 CSS파일들. 죄다..
CSS 폰트 아이콘 사이트 모음 http://fontawesome.io/icons/ http://cssicon.space/#/ - 여기는 cdn주소를 쓰는 방식이 아니라 아예 소스를 가져다 쓰는형식. http://ionicons.com/ https://material.io/icons/ 가장 잘 쓰는 것은 역시 fontawesome이지. cdn주소만 링크하면 수백개의 아이콘을 손쉽게 사용할수 있다. CSS 폰트로 제작되어서 색상을 바꾸는것이나 크기 조절도 매우 쉽다.
[기사] CSS의 7가지 단위 Korean (한국어) translation by June H Yeo (you can also view the original English article) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다. 웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 ..
아톰 에디터 단축키 모음 "F11" : 전체 화면으로 본다,"ctrl-," : 아톰 에디터 설정 화면을 연다,"ctrl-shift-n" : 아톰 에디터를 새로 열고 새 창을 생성한다,"ctrl-shift-w" : 아톰 에디터를 닫는다,"ctrl-shift-o" : 새 프로젝트 폴더를 연다."ctrl-o" : 파일을 연다,"ctrl-t" : 최근에 연 파일 목록을 보여준다,"ctrl-n" : 새 창을 생성한다,"ctrl-s" : 저장한다,"ctrl-shift-s" : 다른 이름으로 저장,"ctrl-w" : 창 닫기,"ctrl-z" : 실행 취소,"ctrl-y" : 재 실행,"ctrl-alt-i" : 개발 툴을 연다. "shift-delete" : 라인을 잘라낸다. 선택되었다면 그부분만 잘라내기,"ctrl-insert" : 라인을 ..
[링크] 홈페이지의 얼굴, 썸네일 이미지 설정 https://brunch.co.kr/@jiyeonsongofnt/11 홈페이지 url를 붙여넣어서 누군가에게 보낼때, 그 홈페이지에 대한 미리보기 ( 제목, 설명, 이미지 )가 나오는 경우를 본적 있을것이다. 당황스럽게 내 블로그는......내....얼굴...부분이... 확대되어 나오더라...8ㅅ8 이 이미지를 지정하는 방법 (meta 태그 사용법)에 대해 나와있는 글.
한글 폰트 import 모음 나는 보통 google font를 import 시켜서 사용한다. 영문 폰트와 한글폰트 모두. 트래픽 문제도 있지만, 일차적인 문제는 우리 사수님이 무조건 web font를 사용하시길 원하셔서....ㅎ_ㅎ 그중에서 내가 (최근들어) 제일 자주 쓰는것은 단연 Noto sans CJK kr ! 일전에는 나눔스퀘어나 나눔바른고딕 폰트를 애용했는데, 나눔바른고딕은 font weight를 bold로 줬을때 너무너무너무너무 안예뻐진다는 단점이 있었고 (심지어 부피도 커지더라. 줄바뀜현상 발견) 나눔 스퀘어는........ 처음에 봤을땐 참 예뻤는데 지금 봐서는 폰트가 좀 가볍다는 느낌이 들었다. noto sans는 구글과 어도비가 합작해서 만든 폰트로, 본고딕 이라고도 한다. 한글, 중국어, 일본어가 지원되므로 한국..
텍스트 관련 효과세트 1 1. 버튼 hover 효과 2. 텍스트 지직거리는 효과 3. 글자 깨진 효과 4. 텍스트 바뀌는 애니메이션 5. 텍스트 네온사인 효과 6. 텍스트 쉐도우 여러종류 7. 텍스트에 흐르는 윤곽선 효과 주기
[w3.js] 하나의 버튼으로 Toggle show 하나의 버튼으로 나타나게 했다가 사라지게 했다가 하는 효과를 줄때, 스크립트 짜기가 귀찮을 때가 있다. 그럴때 굉장히 간단하게 할수있는 방법! 먼저 w3.js를 import 한 다음에, Toggle Hide/Show 이렇게 onclick 속성 값으로 w3.toggleShow('컨트롤할 대상') 을 주면 바로 된다 ^______________^ 출처 : https://www.w3schools.com/w3js/w3js_toggle_show.asp
디바이스 해상도에 따라 스크립트 적용 예제소스 // 모바일 브라우저 가로크기 체크 if (document.body.clientWidth
모바일에서 기본적으로 적용되는 css 없애버리기! 가끔 코딩하고 나면 모바일에서 input이나 select가 운영체제에 따라서 안예쁘게 바뀌어 버리곤 한다. 특히 아이폰 기본 select와 input 디자인 쉣.... 이럴때 간단하게 사용할수 있는 css 속성 ! ^__^ -webkit-appearance: none;-moz-appearance: none;appearance: none; 이것만 추가하면 된다 ㅎ.ㅎ
단어 단위로 줄바꿈되기, word-break 속성 업체에서 계속 컴플레인 들어왔던게 단어 단위로 끊어지지 않아서 문장이 자연스럽게 연결되지 않는다는 것이었다. 이 쉬운 속성을 몰랐다니 ! 단어 단위로 끊고싶은 곳에 word-break : option; 만 주면 된다 ^__^
캐싱처리를 위한 파라미터 값 처음 알게된것! 서버에서 직접 작업할때, css에서 어떤걸 수정하고 아무리 f5를 눌러도 적용되지 않아서 답답한 경우가 있다. 캐싱처리가 되지 않아서라고..! css / js파일을 링크하는 head 안에 해당 파일 이름 뒤에 ?m=20170504 이런식으로 날짜를 붙이게 되면, 컴퓨터가 자기가 저장했던 파일을 쓰면 안되고 새로 불러와야 하는구나, 하고 인식하고 리로드 할때마다 새로 불러온단다. 그래서 파일을 수정할때 뒤의 숫자를 꼭 변경해야 한다 ㅎ.ㅎ
제이쿼리 간단한 tab메뉴 HTML 첫번째메뉴 첫번째 탭 내용 두번째메뉴 두번째 탭 내용 CSS ul{list-style:none;} a{text-decoration:none;} .tab_wrap{width: 567px; float:left;} .tab_wrap{position:relative; width: 567px; float:left;} .tab_wrap>li>a { display:block; position:absolute; width:78px; text-align:center; background:#ffffff; color:#555; border:1px solid #dce3e9; border-bottom:0; padding:7px 16px; font-weight:bold; margin-left: 40px;} .tab_wr..
크로스 브라우징 관련 js 윈도우 7의 기본 브라우저가 IE9 버전이다. 심지어 아직 윈도우 xp를 사용하는 사람들도 꽤 많이 있다 ^_ㅠ 그래서 최소한 ie9버전까지는 크로스 브라우징이 가능해야 한다. 물론 크롬과 ie에서 동일하게 보이는것은 말할것도 없고. ie8버전까지 크로스 브라우징 한다면 꽤 많이...힘들다.......ㅠ...... 홈페이지: http://code.google.com/p/html5shiv/ - HTML5 요소를 지원하지 않는 브라우저(IE8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리. - 구버전 IE가 부분에 넣음 홈페이지: http://css3pie.com/ - CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리 - 구버전 IE에서도 둥근 외곽선, ..
jquery cdn주소 제이쿼리 Migrate ( IE하위버전에서 상위버전 jqurey 인식하게 하는것)은 cdn주소를 못찾았다. 폴더에 직접 넣어서 script 경로로 넣어야 할것 같다. Google : https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js MS : https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js CDNJS : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js JSDelivr : https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js jquery : https://code.jquery.c..
레이어 팝업 오늘하루동안 열지않기 나도 아직 테스트 해보지 못한것. 하루 동안 이 창을 열지않음 [닫기] [출처] 레이어팝업_오늘하루 창닫기|작성자 휘성별님
select박스로 페이지 이동하기 (링크걸기) 가끔가다보면 select박스에서 하나의 option을 클릭 했을 때, 페이지가 이동하는 형식이 있다. 보통 family site나 서브페이지 내에서 네비게이션을 이용할때 많이 쓴다. 이 기능을 주는건 굉장히 간단하다. 이동1 이동2 [출처] select 링크 이동|작성자 휘성별님 이렇게 option의 value값에 이동할 페이지를 써주고, select에 onchange="window.open(value,'_self'); 이것만 추가해주면 끝!
맨위로
Total : Today :
728x90

티스토리툴바