분류 전체보기 (14) 썸네일형 리스트형 [스터디] 그래픽 디자인 스타일 기법 명칭 알아보기- 01 :: 레트로 퓨처리즘 디자인은 트랜드를 매우 중요시하는데요, 막상 실무에 오랜시간 몸담고 있으면 이 일에 익숙해지면서 나태해지기 쉬워지는 것 같아요^^;; 바로 제 모습인데요. 디자인이라는게 딱 정답이 없고, 새로운 디자인에 대한 일반인들의 시선은 생각보다 보수적인지라 설득을 하려면 일단 많이 알아야 하는 것 같더라구요. 요즘에 많이 보이는 디자인이라 예뻐 보이기는 하는데 막상 레퍼런스를 찾으려고하니 디자인 스타일 기법을 알지 못해 검색도 어렵고.. 레퍼런스를 찾다보니 이런스타일도 예쁘고 저런스타일도 예뻐서 결과적으로 디자인이 방향성 없이 틀어지는 경우도 많이 발생하곤 합니다. 그래서 시작합니다. 디자인별 스타일 기법 알아보기 첫번째 시간! 레트로 퓨처리즘 :: retrofuturism (복고미래주의) 레트로(과거, 거슬러 .. 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 2 다음
