본문 바로가기

공부

제이쿼리 슬라이드 (bxSlider) 제이쿼리 슬라이더 플러그인 bxSlider 사이트를 만들다 보면 기본적으로 많이 사용하는 이미지를 슬라이드 시키는 슬라이더나 메뉴, 레이어 팝업 등은 사용하는 플러그인들이 픽스가 되는데요~!! 오늘 부터 제가 자주 사용하는 플러그인들을 하나씩 소개해 드릴까 합니다. 먼저 소개해드릴 제이쿼리 플러그인은 슬라이더인데요~ bxSlider는 옵션도 깔끔하고 반응형으로도 확장이 가능해서 자주 사용하고 있습니다. bxSlider는 Steven Wanderski라는 분이 2014년에 제작한 제이쿼리 슬라이더로 http://bxslider.com 에서 자세한 설치방법과 markup을 확인하실 수 있습니다. (영어 울렁증 주의요망.. 또르르) 그럼 지금부터 사이트 가서 보기도 귀찮다~~ 싶으신분들을 위해서 하단에 플러그..
input 스타일 ios 초기화 input type 스타일을 button 혹은 submit 으로 주고 신나게 css로 디자인을 추가해줬습니다. PC에서 봤을 때 아무 문제가 없어서 안심하고 있다가 아이패드로 확인하고 css 디자인이 하나도 적용되지 않아서 깜짝 놀랐습니다. 아이패드에서 전용 브라우저 사파리는 물론 크롬을 깔고 봤는데도 같은 현상이 일어나는 것을 보니 ios 기본 버튼 스타일이 출력되는 듯했습니다. ​ 다이렉트로 스타일을 줘도 먹지 않아서 갑갑해하고 있던 상황이었는데, ios 스타일 초기화를 한 줄 추가로 할 수 있는 팁이 있어서 공유해보려고 합니다. input,button {border-radius:0; -webkit-appearance:none}
input (체크박스, 라디오버튼) 스타일 설정 및 디자인 입히기 input type css 퍼블리싱을 할때 심심한 체크박스나 라디오버튼같은 인풋타입을 꾸며주고 싶을 때가 있는데요! 이미지를 이용해서 체크박스, 라디오버튼에 디자인을 입혀주는 방법을 보여드리려고 합니다. option 위처럼 코딩을 하고 아래쪽에 정리된 스타일 시트를 적용해 주면 됩니다. css 스타일 원리를 알려드리면 input[type="radio"]:not(old) 에서 투명도를 빼서 기존 디자인을 지워주고 input[type="radio"]:not(old) + label과 input[type="radio"]:not(old):checked + label 라벨에 백그라운드 이미지를 넣은 후에 투명해진 인풋 라디오로 마진값을 주는 원리입니다. ​ 여기서 input[type="radio"]:not(old)..
색상 상속하기 (currentColor) currentColor currentColor는 CSS3에서 도입된 개념으로 currentColor 키워드가 설정되면, color 값이 상속으로 처리됩니다.
position 속성 position position은 단어 뜻 그대로 위치를 나타내는 요소에 대한 위치를 의미합니다. 디폴트 값은 static 이며, 세부 속성은 아래 표를 참조해 주세요. static top,right,bottom,left 속성값이 적용 안됨 relative 요소 안에서 적용 absolute 부모 요소 안에서 적용 fixed 요소 안이 아니라 브라우저 기준으로 적용 inherit 요소의 부모에 대한 속성을 적용
반응형에서 가로 세로 비율 고정하는 방법 반응형으로 퍼블리싱을 할 때 퍼센트를 활용해서 영역을 잡는데요. 가로 너비에 맞게 유동적으로 세로 높이 비율을 유지하는 방법을 공유해 보려고 합니다. 퍼센트로 세로값을 고정할 수 없기 때문에 패딩, 마진을 활용해서 만들 수 있습니다. 위처럼 높이를 0으로 지정하고 padding-bottom을 퍼센트로 가로 세율 비율을 세팅해 줄 수가 있습니다. 가로 세로 1대1 정사각형으로 비율을 고정하고 싶다면 padding-bottom 값에 100%를 넣어주면 됩니다.
반응형에서 꼭 필요한 미디어쿼리 미디어쿼리 디바이스 규격이 다양화된 요즘에 빼놓을 수 없는 것이 반응형. 반응형 웹디자인을 하기위해서 꼭 알아두어야하는 미디어쿼리에 대해서 공부해보려고 합니다. ​ 여기서 반응형 웹이란 디바이스 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되어 출력되는 웹페이지로써 스마트한 웹페이지 구현이 가능합니다. 미디어쿼리 기본구조 아래처럼 미디어쿼리를 작성하면 가로 넓이가 200px에서 400px 일때만 screen의 텍스트 칼라가 레드로 나타나게됩니다. @media 미디어유형 and 조건 and 조건 @media screen and (min-width:200px) and (max-width:400px) { div {color:red;} } ​ 하단 소스를 활용하면 화면 비율에 맞춰서 적용되는 미디어쿼리도..
홈페이지 링크 시 뜨는 미리보기 섬네일 설정하기 홈페이지 URL을 여기저기 링크하다 보면 미리보기 섬네일 이미지가 함께 뜹니다. 이때 메타태그로 대표 이미지가 설정 돼있지 않다면 홈페이지에 제일 상단에 위치한 이미지가 대표 이미지로 인식돼 노출되게 됩니다. 효과적인 활용을 위해서 홈페이지 대표 이미지 설정을 한번 해보도록 합시다! meta property 속성 중에 og:image 만 넣어도 홈페이지 미리보기 이미지 설정이 가능하지만 다른 property 속성도 함께 작성하여 사이트에 정보를 명확하게 정의해 주는것이 좋습니다.
풀스크린 슬라이드 제작 (css만 사용하기) 마우스를 스크롤 했을 때 전체 화면 단위로 스크린이 넘어가는 풀스크린 스타일의 슬라이드 레이아웃을 구현하려면 제이쿼리를 사용해야 했는데요. 이제는 scroll-snap-type 을 이용해서 간단하게 제작이 가능합니다. 안그래도 사용하던 풀스크린 슬라이드들이 유료화 되면서 난감했는데, 천만다행 느낌 ㅠ_ㅠ) 01 02 03 04 05 각 페이지를 묶는 wrap 에다가 scroll snap type를 선언해주고 각 페이지에 scroll snap align을 선언해 줍니다. 위 소스를 하단에 첨부하니 궁금하신 분들은 다운받아서 브라우저에서 돌려보세요~
스크롤 디자인 꾸미기 스크롤 디자인을 바꾸고 싶을 때 사용하는 소스를 공유하도록 하겠습니다. 화면 전체 디폴트 스크롤을 바꾸는 방법과 원하는 영역 스크롤을 바꾸는 방법을 나눠서 작성하였습니다. 전체 디폴트 스크롤 설정 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/} ::-webkit-scrollbar-thumb { background-color: #000; /*스크롤바의 색상*/ border-radius: 10px; /*스크롤바 라운드*/} ::-webkit-scrollbar-track { background-color: #eee; /*스크롤바 트랙 색상*/ border-radius: 10px; /*스크롤바 트랙 라운드*/ box-shadow: inset 0px 0px 5px rgba(0..
링크 이미지 테두리 없애기 이미지에 a 태그를 이용해서 링크를 걸면 이미지 주변에 테두리가 생길때가 있습니다. 이럴경우 간단하게 테두리는 없애는 방법을 설명해 드리겠습니다. 이미지에 border:0px; 스타일을 추가해주면 링크 테두리가 사라지니까 필요할때 활용해 보세요.
이미지맵 좌표 찍기 (usemap) 이미지에 링크를 걸때 사용되는 이미지맵을 공부해 볼까 합니다. 원리는 이미지를 불러와서 그 이미지를 맵으로 사용하겠다고 usemap 으로 map name을 지정해주고, area에 coords를 찍어서 링크를 연결해주는 건데요. 바로 소스 보여드리겠습니다. 여기서 좀 더 알려드려야 할건 rect, circle, poly 인데요. 위 세아이들은 링크거는 영역의 모양을 뜻합니다. rect는 사각형, circle은 원, poly는 다각형! 좌표인 coords는 포토샵에서 하나씩 좌표를 딸 수도 있지만, 친절하게도 좌표를 따주는 사이트가 있으니 활요하시면 좋을 듯 합니다. 좌표 찍어주는 사이트 보기 좌표 찍는 방법은 아래와 같습니다. 1) 이미지를 upload 해준 후 accept를 누른다. 2) 이미지가 뜨면 ..
오늘 하루 그만보기 팝업창이 뜰 때 쿠키값을 이용해서 오늘 하루 그만보기 속성을 넣어볼까 합니다. 제가 제이쿼리, 스크립트에 약한지라 이전에 서치해서 가지고 있던 소스인데요. 필요하신 분이 계시면 유용하게 사용하시면 좋겠습니다!! 먼저 head 사이에 아래 스크립트를 넣어주세요. 그리고 body 사이에는 아래 소스를 넣어주세요. 오늘 하루 그만보기
커서 손모양 넣기 (cursor:pointer;) a 태그 등을 넣었을때는 링크가 걸려있기 때문에 자동으로 커서가 손모양으로 바뀝니다. 그런데 간혹 onclick으로 액션을 걸어주거나 할때는 커서 모양이 바뀌지 않아서 유저에게 혼란을 줄 수 있는데요! 이럴때 간편하게 커서모양을 바꾸는 방법이 있어서 소개해 드리려고 합니다. /*링크되지 않은 이미지지만 마우스를 올렸을때 마우스 커서가 손모양으로 바뀝니다.*/ 위 예제를 보시면 쉽게 이해될거에요. 바로 스타일에 cursor:pointer; 을 넣어주시는 겁니다.
맨위로 이동하기 원페이지 형식의 사이트나 한 페이지의 내용이 길어질 때 sticky header나 맨위로 이동하기 버튼을 이용해서 유저의 접근성에 편의를 제공하는데요. 오늘은 맨위로 이동하기 버튼을 넣는 법을 포스팅 해볼까 합니다. 맨위로 위 소스는 버튼을 클릭하면 순식간에 top으로 이동하는 소스인데, 추후에 제이쿼리를 이용해서 스무스하게 이동하는 소스도 포스팅 하겠습니다. 눈으로 확인 하시라고 html 파일 하단에 첨부하였으니, 다운받아서 테스트 해보세요~
사이트 이동하기 (자동 연결) 사이트를 만들때 다른페이지로 자동연결을 해줘야할 경우가 종종 생기는데요. 간단하게 meta 태그를 이용하여 페이지 넘겨주는 방법을 소개해 드리겠습니다. 위의 소스를 에 적어주시면 됩니다.
background 동영상 배경 삽입 영상 위주의 포트폴리오 사이트에서 종종 볼 수 있는 배경에 풀사이즈로 동영상을 삽입하는 방법을 알려드릴까 합니다. 동영상 배경 삽입 방법으로 여러 방법이 있겠지만 제이쿼리를 사용하지 않고 간단하게 html5만을 이용해서 출력하는 모습을 보여드릴까 합니다.
background 속성 오늘은 간혹 헛갈리는 background(백그라운드) 속성에 대해서 정리를 해볼까 합니다. 먼저 백그라운드를 컨트롤 할 수 있는 속성에는 총 6가지가 있습니다. background-color /*색상지정*/ background-image /*이미지 경로지정*/ background-size /*이미지 크기지정*/ background-repeat /*이미지 반복지정*/ background-position /*이미지 위치지정*/ background-attachment /*스크롤 지정*/ background 한줄 작성법 background:red url('이미지경로')no-repeat scroll 0px 20px/100px 100px; background-color background-color:#ffffff;..
video 태그로 웹에 동영상 넣기 html5는 기존의 html보다 미디어컨텐츠 및 애니메이션에 특화되었는데요. 그 중 대표적인 태그가 video 태그입니다. video 태그 기본 설정은 아래와 같습니다. 위 기본태그에 옵션값을 넣으면 컨트롤러 및 재생을 설정할 수 있습니다. 옵션에는 controls, autoplay, loop, poster, width, height, preload="none", preload="metadata", preload="auto" 등이 있으며 자세한 설명은 아래는 하단에 정리해 놨으니 참고바랍니다. controls 미디어에 컨트롤러 표시 autoplay 비디오, 오디오를 다운로드 하자마자 재생 loop 무한 반복 재생 (loop="3" 이라고 쓰면 3번 반복) poster 동영상이 화면에 나타나지 않을 때 표..
audio 태그로 웹에 음악 넣기 오늘 정리할 태그는 audio 태그로 html5에 새로나온 태그입니다. 이전에 wav나 동영상을 삽입할때 embed를 사용했는데 이번에 저도 다른게 있나 찾아보다가 우연히 알게되서 포스팅해보려고 합니다. 오디오 소스에는 총 6가지 속성이 있고요. 이름 값 설명 autoplay autoplay 자동재생 설정 controls controls 오디오 재생에 관련된 컨트롤러 표시 loop loop 무한반복 설정 (loop="3" 이라고 쓰면 3번 반복) src url 오디오 주소 설정 muted muted 음소거 설정 preload auto metadata none 오디오 재생전에 음악파일 모두 불러올지 설정 auto : 웹페이지 여는 순간 바로 다운로드 (기본값) metadata : 메타 정보만 받음 none..

티스토리툴바