CSS HTML JS (6) 썸네일형 리스트형 <table><th><td>에 대각선 사선 순수 CSS만 이용해서 넣기 디자인을 하다보면 생각치도 못한 사항을 요청하는 고객사들을 종종 만날 수 있다. 이번에는 HTML 표의 테이블에 사선을 그어줄 수 있냐는 요청을 받았다. 그래서 찾아봤다. 역시나 HTML이나 CSS에서 직접적으로 제공해 주는 부분은 없고 편법을 이용해야하는데, 아래와 같은 3가지 방법을 찾아볼 수 있었다. 1) SVG를 활용하여 백그라운드에 그리는 방법 2) border값을 이용하는 방법 3) background-image의 linear-gradient를 사용하는 방법 1)과 2)번으로도 테스트를 해본 결과 사선을 매우 잘 나타낼 수 있었다. 그중 백그라운드를 활용한 방법은 테이블의 칸 사이즈 조절에 상관없이 대응이 가능하다. 그러나 나는 어떠한 소스도 필요 없이 순수 CSS만을 사용할 수 있는 장점을 .. CSS로 스크롤바 디자인 바꾸는 방법 :: Edge, Chrom, Opera AND Firefox까지! 디자인을 하다보면 우측에 자동으로 생성되는 스크롤의 컬러가 거슬릴 때가 있다. 그레이 색상에 투박한 네모가 기본 디자인이니! 분명 신경쓰이지 않을때는 아무렇지도 않다. 하지만 한번 눈에 밟히면 계속 거슬리는게 디자인이라. 누군가의 눈에 거슬릴 수 있는 회색 색상의 기본 스크롤바 디자인을 수정해보려고 한다. 아래 소스를 보시라. See the Pen Untitled by kihyun (@hidesigner2) on CodePen. 스크롤바 부분별 자세한 명칭 알아보기 디자인을 수정하기에 앞서 명칭을 먼저 파악해 이해력을 쑤욱 올려보자. 스크롤바 디자인 바꾸기 for Edge, Chrom, Opera [ ::-webkit- ] 위 소스에서도 보시다시피 접두어가 붙는 것을 보니, 지원하는 브라우저가 한정적이다.. 움직이는 애니메이션 png, APNG 이란? 요즘 디자인을 벤치마킹하기위해 자주 들어가는 사이트 중 하나인 Toss를 방문하는 중에 신기한 애니메이션을 발견했어요. 웹디자이너로서 개발자도구(F11 혹은 Ctrl + i)를 열어 이것저것 뜯어보는 일이 자주 있는데요. Video 혹은 gif라고 생각했던 이미지가 .png 였습니다. PNG가 움직이다니! 오늘은 움직이는 png에 대해서 알아보고자 합니다. 움직이는 PNG :: APNG APNG(Animated Portable Network Graphics)는 PNG를 확장한 이미지 파일 포맷입니다. 이 포맷은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여 줍니다. APNG 파일의 첫 프레임을 설정할 수 있으며, APN.. CSS Flex 기본 개념 정리 Flex는... 자식요소와 이를 감싸고 있는 부모요소가 있습니다. 부모요소를 플렉스 컨테이너라고하며, 자식요소는 플렉스 아이템이라고 합니다. 부모요소의 CSS 에 display:flex를 정의함으로서 flex를 사용할 수 있습니다. HTML :: 기본구조 // flex의 부모요소 플렉스 컨테이너. 이곳에 display : flex 를 정의 1 // flex의 자식요소. 플렉스 아이템 2 3 ... div.container에 CSS에 display:flex를 정의 하면 div.item들이 정렬됩니다. CSS :: 부모 요소 속성들 한눈에 보기 부모요소(플렉스 컨테이너)에 사용하는 CSS 속성. div.container { /* 0) flex를 정의하는 속성으로 시작 */ display: flex; disp.. 스크롤 이동시키는 방법 :: $(window).scrollTop() :: scrollTo() jQuery ✔ 맨 위로 스크롤 이동시키는 방법 : $(window).scrollTop(0); javaScript ✔ 50px로 스크롤 이동시키는 방법 : Window.scrollTo(0 , 50) // Window.scrollTo( X좌표, Y좌표) - Y로 50px 만큼 이동 .scrolltop() 이란? .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. // 기본구조 $(selector).scrollTop() // 웹브라우저 전체의 스크롤바 위치를 0px로 이동한다. $(window).scrollTop(0); // div 요소의 스크롤바 위치를 위에서 500px로 이동한다. $('div').scrollTop(500); 예시 ) $( '.btnGo.. 순수 HTML CSS만을 이용한 타이핑 애니메이션 효과 만들기 안녕하세요! 자바스크립트가 포함되지 않은 순수 HTML과 CSS를 이용한 타이핑 효과를 만드는 방법을 알려드리려고 합니다 인터넷에 나온 수많은 방법 중에 하나로 제가 찾은 코드 중에 가장 쉬우면서도 간단한 코드입니다! 풀소스 아래로 자세한 설명 이어가겠습니다. 먼저 풀 소스 입니다! Hi, Designer HOW TO STEP 01. 먼저 기본 Doctype HTML 파일을 준비해줍니다. STEP 02. HTML에 태그를 넣어줍니다. 이 효과를 적용하기 위해 필요한 요소는 HTML에서 Typing이 직접 들어가는 태그( 예 : hi, designer) 와 이를 감싸주는 태그( 예 : hi, designer 이전 1 다음
