본문 바로가기

공부

스크롤 높이에 반응해 클래스 추가 삭제하기 스크롤이 일정 부분 움직였을 때 원하는 곳에 클래스를 추가 삭제하는 방법을 알아보겠습니다. $(function(){ var fixScroll = 0; $(window).scroll(function(event){ var scroll = $(this).scrollTop(); if (scroll > 600){ //스크롤 높이 설정 $("header").addClass("fix"); } else { $("header").removeClass("fix"); } fixScroll = scroll; }); }); 위 코드를 사용하면 스크롤 높이를 600 이동했을 때 header에 fix 클래스를 추가하고 스크롤이 제일 상단 탑으로 돌아갔을 때 fix 클래스를 삭제할 수 있습니다.

[메일폼] Google Apps Mail 이용해서 HTML form 메일보내기 서버없이 메일 보내기 php, python, ruby, java, node 같은 백엔드 서버 없이 HTML form을 이용해서 메세지를 보낼 수 있는 방법입니다. 지금부터 작성 할 내용을 따라하면 순수 html과 자바스크립트만 사용해서 간편하게 메일 보내기를 할 수 있다고 하니까 활요할 일이 많을 듯 합니다. (참고로 Google API는 하루에 보낼 수 있는 메일 수가 제한 돼있으니 메일 보내기 기능이 빈번하게 일어나는 사이트라면 이 방법은 적합하지 않을 수 있습니다.) 1. 샘플 스프레드시트를 복사하기 https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy 위 주소에 접속하면 "HTML Form..

툴팁넣기 : css만 사용하기 (tooltip) css만 사용해서 툴팁넣기 퍼블리싱을 할때 도움말을 넣어야할때 툴팁을 넣는 방법으로 alt나 title이 있는데, title을 사용하면 아무래도 소스가 정신없어지는 경우가 많아서 css만을 활용하여 툴팁넣는 방법을 포스팅 해볼까 합니다. html 파일과 css 파일을 따로 정리해 올리고 결과값 이미지를 첨부하였으니 확인해 보시고 제일 하단에 참고 사이트에 가시면 라이브로 소스 수정과 테스트가 가능하십니다. html title1 title desc title2 title2 desc2 title3 title3 desc3 tooltip example... css #tooltip_wrap {} #tooltip_wrap > ul { padding: 0;} #tooltip_wrap > ul:after { conte..

패럴랙스 스크롤링 (parallax scrolling) 패럴랙스 스크롤링 (parallax scrolling) css로 구현하기 패럴랙스 스크롤링은 마우스 스크롤링에 따라서 웹에 여러가지 효과를 주기 때문에 유동적인 사이트를 만들때 많이 활용하는 기법인데요. 패럴랙스는 관련 js 소스도 많이 나와있어서 활용이 용이하지만 오늘은 그보다도 간단한 CSS를 이용해서 패럴랙스 효과를 줘보려고 합니다. 바로 background-attachment:fixed; 로 백그라운드를 고정하고, 그위에 텍스트나 이미지 등을 올린다면 하단의 백그라운드라 올라올때 시각적으로 패럴랙스 스크롤링 효과를 주는 것인데요. 예제 소스는 아래에 첨부하도록 하겠습니다. 01 . 02 . 03 . 위의 소스를 적용한 화면은 아래 이미지를 참고해 주세요.

레이아웃 잡기 : 다단 멀티컬럼 (multi column) 멀티컬럼으로 레이아웃잡기 해상도가 계속 커지는 환경속에 가독성을 높여주는 레이아웃 스타일이 있어서 가져왔습니다. 멀티 컬럼의 속성으로는 column-count, column-width, column-gap, column-rule-style, column-rule-width, column-rule-color, column-span 등이 있는데 자세한 내용은 하단 예시를 통해서 보여드리겠습니다. 사람이 가지고 있는 일곱 가지 감정인 기쁨(喜)ㆍ성냄(怒)ㆍ근심(憂)ㆍ두려움(懼)ㆍ사랑(愛)ㆍ미움(憎)ㆍ욕심(欲)을 이르는 칠정(七情)은 예술 작품 안에서 자유롭고 다양하게 표현되고 있다. 그중에서도 인간의 어두운 내면세계의 가장 깊숙한 곳에 자리 잡은 두려움, 공포라는 감정은 그로테스크에서 비롯되는데, 파격적이고 ..

flex 로 레이아웃 정렬하기 css flex로 정렬하기 flex는 메인정렬과 교차정렬 개념이 필요합니다. justify-content는 메인정렬, align-item은 교차정렬을 뜻합니다. display:flex; justify-content: center; align-items: center; 위처럼 작성하면 수평과 수직으로 중앙에 정렬하게 됩니다. display:flex; 를 사용하면 직계자식요소들도 영향을 받게 되는데 flex 대신 inline-flex를 사용하면 직계자식요소들을 감싸는 부모요소가 inline 요소가 됩니다. flex 전에는 display:table;과 table-cell을 사용해서 수평, 수직 정렬을 하기도 했는데요. 아직 ie 7,8,9 에서는 지원하지 않아서 크로스브라우징에 문제되는 부분이 많음에도 불구하..

grid 로 레이아웃 잡기 css grid로 레이아웃 잡기 grid는 반응형 페이지 레이아웃을 잡을때 용이하게 사용되지만 ie 버전 11 이상만 지원하고 이전 버전은 지원하지 않는 단점이 있습니다. 언젠가 최적화 될것이라 믿으면 레이아웃 잡기 끝판왕 grid를 공부해 볼까요?! 참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/grid 테스트 사이트 http://cssgridgarden.com 아래 이미지는 테스트 사이트로 적어놓은 GRID GARDEN ( http://cssgridgarden.com )이라는 사이트인데, GRID GARDEN 사이트에 가면 간단한 게임을 통해서 GRID를 쉽게 익힐 수 있으니 먼저 접속해서 GRID를 경험해보시면 좋을 것 같아요. #garden { di..

퍼센트와 픽셀 혼용 계산법 (calc) calc의 퍼센트와 픽셀 계산법 퍼센트 작업중에 일정한 픽셀값을 빼서 계산하고 싶을 때 calc를 이용하면 간편하게 화면을 그려낼 수 있습니다 예를 들어 div 에 width 값이 100%일 때 50px 만큼만 빼고 싶은 경우를 가정해 보겠습니다. div {width:calc(100% - 50px);} 이렇게 calc를 이용해서 간단하게 표현이 됩니다. calc는 예제에서 처럼 %,px 말고도 em, pt 등 모든 단위 사용이 가능하며 빼기 뿐만 아니라 더하기(+), 곱하기(*), 나누기(/)도 사용이 가능합니다. div {width:calc(100% + 50px);} div {width:calc(100% * 2);} div {width:calc(100% / 2);} div {width:calc(100%..

브라우저 드래그 색상 적용 (::selection) 브라우저 텍스트 드래그 시 색상 적용해주기 ::selection {background:#ff0000; color:#ffffff;} ::-moz-selection {background:#ff0000; color:#ffffff;} ::-webkit-selection {background:#ff0000; color:#ffffff;} 스타일시트에 위 코드를 적용해주면 하단 이미지 처럼 파란색 디폴트 색상이던 드래그 색상이 설정해준 색상으로 변경이 됩니다. 원하는 색상 코드를 background에 적용해주시면 브라우저 드래그 시 색상으로 설정되는데 rgba로 알파값 적용도 가능합니다. 여기서 color는 브라우저 드래그 했을 때 텍스트 색상입니다. 거의 대부분의 브라우저에 지원이 가능한 css 이지만, 익..

오브젝트 뒤집기 : 뒷면과 앞면을 정하는 속성 (backface-visibility) backface-visibility 로 요소 뒤집는 효과 요즘 웹 화면을 보면 마우스를 올렸을 때라든지 오브젝트가 한 축을 기준으로 뒤집어지면서 flip 되는 애니메이션을 많이 보여줍니다. 이때 필요한 css 속성이 backface-visibility 입니다. backface-visibility 는 요소 앞면과 뒷면을 어떻게 보여줄지 정하는 속성으로 하단과 같은 값을 가집니다. 기본값 : visible visible : 뒷면이 보이게 합니다. hidden : 뒷면이 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.

움직이는 햄버거 메뉴 버튼 만들기 모바일 메뉴에서 빼놓을 수 없는 햄버거 버튼에 마우스를 올리거나 클릭 시 X자 형태의 닫힘 형태로 transform 시켜서 닫힘 버튼을 만들 수 있습니다. 가장 좋은 방법은 샘플 소스를 읽어가는 방법이겠죠? 하단에 html, css, jquery 소스를 예시로 적고 간략한 설명을 주석으로 달아보겠습니다. 예시) html 작성 //메뉴 클래스에 빈 span을 3개 그려넣습니다. 예시) css 작성 /*기본 css*/ .menu, .menu span { display : inline-block; transition : all 0.4s; box-sizing : border-box;} .menu { position : relative; width : 44px; height : 44px;} .menu sp..

table 말줄임 효과 적용 안될 때 예전에 css 말줄임 효과에 대해서 포스팅한적이 있는데, 테이블에 넣었을때는 추가해야할 부분이 있어서 오늘은 그부분을 포스팅해볼까 합니다. 먼저 말줄임 효과는 css에 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 넣어주시면 지정한 영역을 넘어가는 부분은 말줄임표 표시로 설정이 되는데요! 만약 div나 span 태그들에서 말줄임표가 적용이 안되면 width값이 설정이 안된걸거에요! (width값을 지정해주세요) 근데 가로값을 아무리 세팅해줘도 table에서는 적용안될때가 있는데요 (테이블과 테이블랩, td에도 가로값 다 잡아줘도 안됬던 1인..) 이유는 테이블 레이아웃을 고정시켜줘야해서 입니다. 테이블 레이아웃을 고정시키려면 table태그 s..

텍스트 수직 정렬 (vertical-align) vertical-align 으로 텍스트 세로 수직 정렬하기 텍스트의 가운데 정렬은 text-align을 사용하고 세로 수징 정렬은 vertical-align 을 사용합니다. 텍스트의 정렬은 table 에서 먹기 때문에 vertical-align 을 사용하려면 꼭 display 설정을 해줘야 합니다. height: 200px; display: table-cell; vertical-align: 속성; ※ vertical-align 속성 baseline 기본값. 부모 요소 기준선에 정렬 top 라인에서 제일 위에 맞춰서 정렬 middle 부모 요소의 중간에 정렬 bottom 라인에서 제일 하단에 맞춰서 정렬 ※vertical-align 주의할 점 - float , position 속성이 있으면 display를..

특수기호, 특수문자 사용하기 HTML 작성 시 특문 사용법 html 작성을 하다보면 공백이나 괄호, 따옴표 등을 표현할때 html태그로 인식을해서 특수기호를 사용해줘야 합니다. 각 문자별 특수기호는 아래와 같으니 참고해주세요. 화면 특수기호 공백 & & > " " ' ´ | | ( ( ) ) , , - -

em, rem 개념과 차이 상대적인 크기로 표시하는 em 고정단위 em은 상대적인 크기로 부모요소에서 지정한 폰트크기 1em으로 놓고 상대적인 값을 계산해서 다른 요소들의 글자 크기를 조절하는데 지정한 크기가 없다면 16px을 기본값으로 합니다. 3em 크기제목 1.6 크기 텍스트 16px 크기 텍스트 em 단위는 부모요소 크기를 기준으로 하기 때문에 를 중복해서 사용할 경우 부모 요소의 크기가 계속 달라지면서 자식요소의 글자 크기도 점점 커지는 문제점이 발생합니다. 1.5em크기 텍스트 ->16X1.5 = 24px 1.5em크기 텍스트 -> 24X1.5 = 36px 1.5em크기 텍스트 -> 36X1.5 = 54px 이러한 문제를 바로잡기위해 나타난게 rem! rem을 사용하면 중첩 상관없이 기본이 되는 크기를 기준으로 사이즈가..

상대단위, 절대단위 개념 (pt, px, em 등) 수치를 정하는 속성의 크기단위는 상대단위와 절대단위로 구분됩니다. 상대단위로는 em, ex, px가 있는데 이는 기종 간, 플랫폼 간의 호환성을 유지하는데 좋고 절대단위로는 in, cm, mm, pt, pc가 있으며 출력장치의 물리적 속성을 아는 경우에만 효율적이라고 합니다. 절대단위 cm : 센티미터 mm : 밀리미터, cm 의 1/10 pc : 1pc 는 12 pt pt : 12pt 는 16px in : 1in 2.54cm 상대단위 px : pixel, 모니터에 따라서 상대적인 크기를 갖음 em : font-size, 일반적으로 해당 폰트의 대문자 M의 너비를 기준으로 함 ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함 % : 브라우저 기본 글꼴 크기를 100% 하고 상대적 크..

input (placeholder) 스타일 넣기 placeholder에 스타일 넣기 input type text에 placeholder라는 속성이 있는데, placeholder를 지정해주면 입력값을 적지 않았을때 value를 설정했을때 처럼 표기가 됩니다. 여기서 value와 placeholder의 차이점은 입력값을 넣을때 value는 value에 지정해넣은 텍스트를 지우고 입력값을 넣어야하지만, placeholder는 입력값을 넣을때 자동으로 지정해 놓았던 placeholder값이 사라지로 입력값이 작성된다는 점입니다. 이 placeholder에는 글씨 색상이 들어가 있는데 이를 수정해 주시려면 하단의 코드를 적용해주세요. input::-webkit-input-placeholder { color:red; } //크롬, 사파리 브라우저 input::-..

jQuery 자식 요소 반환 (:not 예제) 제이쿼리 자식요소 반환 parent()와 children()의 이용하면 자식요소와 부모요소의 손쉬운 선택이 가능한데요. 이때 자식요소 내에서 특정한 선택자만 반환하여 제외시키는 것을 알아볼까합니다. 바로 .children(':not(반환요소)') 를 사용해 주시면 되는데요. 바로 예제 보여드리겠습니다. 클릭 1 2 3 4 5 위처럼 작성을 하시면 click을 클릭했을때 test 클래스 자식요소에 on클래스를 추가하는데 click 클래스만 제외시키라는 명령이 됩니다. 이때 .children(':not(.click)') 가 아닌 .children()를 썼다면 클릭까지 모든 텍스트가 빨간색으로 출력되게 됩니다.

jQuery 메서드 이벤트 정리 제이쿼리 메서드 이벤트 정리 ※ append(), prepend(), appendTo(), prependTo(), after(), before(), insertAfter(), insertBefore() $(A).append(B) //A 뒤에 B 추가 $(A).prepend(B) //A 앞에 B 추가 $(A).appendTo(B) //A를 B 뒤에 추가 $(A).prependTo(B) //A를 B 앞에 추가 $(A).after(B) //A 뒤에 B 추가 $(A).before(B) //A 앞에 B 추가 $(A).insertAfter(B) //B 영역 다음에 A 추가 $(A).insertBefore(B) //B 영역 앞에 A 추가 테스트 $(function(){ $('입니다').insertAfter('.tex..

제이쿼리 반응형 슬라이드 (swiper) 제이쿼리 슬라이드 SWIPER는 IE10 이상을 지원하는 반응형 슬라이드 입니다. 사용방법 https://github.com/nolimits4web/swiper/releases 위 깃허브에 접속해서 최신버전 반응형 슬라이드 swiper 를 다운받습니다. 파일을 다운로드하여 압축을 풀고 html에 연결합니다. css 파일과 js 파일은 pakage 폴더 안에있으니까 거기서 찾으시면 됩니다. Slide 1 slide 2 slide 3 slide 4 슬라이드 안에 내용은 swiper-slide로 감싸고 그 상위는 swiper-wrapper로 감싸고 제일 위에 swiper-container 로 감싸주세요. new Swiper('.swiper-container'); 마지막에 자바스크립트에서 swiper..

이전 1 2 3 4 5 6 다음

티스토리툴바