Simple Is Best

안녕하세요. 이번 포스팅에서는 카드 뒤집는 애니메이션에 대해서 구현해보도록 하겠습니다. 어떻게 동작하는지 먼저 알아볼까요? #1. hover 이전 #2. hover 할 때 애니메이션 진행 (뒤집히는 중) 3. hover 할 때, 애니메이션 진행 (뒤집힘) 4. hover를 멈추면 다시 1번으로 돌아감 오늘 위에 해당하는 애니메이션을 구현해보도록 하겠습니다. 1. transform : rotateY( ); 카드를 뒤집었을때의 "반갑습니다." 문구를 정확하게 보이게 하려면 어떻게 해야할까요? 우선 카드 앞면에서 쓰여질 글을 Y축을 기준으로 180도 돌려야 합니다. 뒷면의 결과에 '반갑습니다'가 나오게 하기 위해서는 transform : rotateY(180deg)를 사용하고 카드를 hover하면 다시 tra..

안녕하세요. 이번 포스팅에서는 position : sticky에 대해서 공부하겠습니다. 비슷한 속성으로는 position : fixed 가 존재합니다. 우선 position:fixed와 position: sticky의 차이점에 대해서 알아보도록 하겠습니다. fixed vs sticky [position : fixed] : 사이트 내 전체에 스크롤 되어도 viewpoint 에 고정되어서 처음부터 끝까지 고정 된다. ▷ fixed는 body 태그에 붙어서 처음부터 끝까지 fix됩니다. [position : sticky] : 상위 영역에 의존하여 상위 태그가 스크롤 되어서 사라질 때 까지만 고정된다. ▷ sticky는 상위 태그에 붙어서 상위태그가 스크롤 영역에서 사라질 때 까지만 fix 됩니다. 그럼 sti..

안녕하세요~! 이번 포스팅에서는 이전 포스팅에서 다루었던 CSS Animation에 대해서 심화학습을 진행해보도록 하겠습니다. 이번 포스팅을 보시면서 [CSS Animation-1,2] 를 참고해주시면 도움이 될거에요! https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com https://daterminal.tistory.com/33 18. [CSS] CSS Animation - 2 이번 포스팅은 이해..

안녕하세요. 이번 포스팅에서는 배경에 [video] 를 넣는 방법에 대해서 학습하겠습니다. 유행이 지났지만 이런것도 있구나.. 하면서 넘어가시면 될 것 같습니다. video 삽입 기본 골격 HTML 같은 태그로 삽입하는 방법도 있지만 태그를 이용하는 것이 스타일링에 있어서 더 깔끔하게 다룰 수 있습니다. 태그로 감싸고 그 내부에 태그를 포함합니다. 태그는 비디오의 파일 경로를 지정해줍니다. 태그 속성 ▶ poster : 비디오 안뜰 때 대체 이미지 ▶ autoplay : 자동 재생 ▶ muted : 음소거 ▶ loop : 반복 재생 태그 속성 ▶ src : 비디오 경로 ▶ type : 비디오 파일의 확장자 비디오 중앙정렬 하는 방법 1. position : absolute; (상위요소에서 붕 띄우겠다) ..

이번 포스팅에서는 SCSS 핵심 문법에 대해서 알아보겠습니다. 1. @import : [CSS Nomalize]에 대해서 기억하시나요? CSS 최상단에 기본적으로 적용시키는 CSS 코드를 Nomalize라고 부르는데 이를 CSS 파일을 쓸 때 마다 복사 붙여넣기 하면 가독성도 떨어지고 시간도 많이 소요됩니다. 이러한 CSS Nomalize 내용을 담기 위해서 동일한 폴더 내에 _reset.scss 파일을 생성하였습니다. ▶ test.scss에서 코딩한 내용은 새로고침 할 때 마다, 자동으로 test.css 에 반영됩니다. ★ 참고 : _는 컴파일 금지명령입니다. _reset.scss body { margin : 0px; } div { box-sizing: border-box; } 이를 test.scss ..

이번 포스팅에서는 CSS의 전처리엔진인 SCSS/SASS에 대해서 알아보겠습니다. ▶ SCSS/SASS : CSS의 전처리 엔진 CSS를 더욱 쉽게 작성하게 끔 해주는 tool ▷ SASS 와 SCSS의 차이점 - SCSS가 기존의 CSS와 문법적으로 유사하므로 SCSS에 대한 학습을 진행하겠습니다. SASS : 괄호, 세미콜론 X SCSS : 괄호, 세미콜론 O SCSS로 작성된 문법은 반드시 CSS로 변환하여 HTML 파일에 첨부해야 합니다. 웹브라우저는 오직 [HTML, CSS, JavaScript] 3가지의 언어만 읽을 수 있기 때문입니다. 그럼 SCSS/SASS로 이뤄진 파일은 반드시 컴파일을 해야 하는데 컴파일 하는 방법에 대해서 알아보겠습니다. SCSS 설치법 [수동 설치법] https://..

이번 포스팅에서는 웹 브라우저 내에 숨겨진 부분, 딥한 부분에 대해서 다뤄 보겠습니다. 이번 포스팅은 별로 중요한 내용은 아니니 넘어가셔도 좋습니다 ㅎ Shadow DOM 을 보는 방법 1. 크롬 개발자 도구를 킨 후, 맨 오른쪽 설정 버튼을 클릭한다. 2. Show user Agent shadow DOM을 킨다. 3. 끗 본 내용은 예제를 중심으로 풀어나가는게 맞는 것 같습니다. input 예제를 통해서 Shadow DOM에 대해서 알아보도록 하겠습니다! input의 placeholder에 스타일을 주고 싶습니다. 다음과 같은 코드를 작성하면 당연한 결과로 placeholder가 회색으로 음영처리 되는 것을 볼 수 있습니다. 저는 이 placeholder를 가운데 정렬 & 색깔을 red로 바꾸고 싶습니..

안녕하세요 데이터미널입니다. 이번 포스팅에서는 Pseudo-elements에 대해서 알아보도록 하겠습니다. 아래의 사진에 나온 글씨를 어떻게 스타일링 할까요? HTML 나는 서울대학교 학생입니다. 첨부된 사진을 제작하기 위해서 사용된 HTML 코드는 위의 코드가 전부입니다. 나머지는 모두 CSS를 사용하여 만들었습니다. 이럴 때 사용하는 개념이 바로 Pseudo-elements입니다. 우선 Pseudo-elements는 text클래스의 '처음 글자'와 '마지막 영역'을 담당하여 스타일링 하고 있습니다. CSS 코드를 살펴볼까요? CSS .text::first-letter{ color : blue; font-size : 100px; } .text::after{ content : '사실 아닙니다^^'; co..