Simple Is Best

안녕하세요! 이번 포스팅에서는 지난 포스팅에서 다루었던 animation 에 대해서 몇 가지 알고 넘어 가면 좋은 점들을 알아보도록 하겠습니다. HTML/CSS 를 공부하면서 한창 애니메이션에 대해서 학습하였으니 아래 링크를 참고하고 오시면 본 포스팅을 더욱 잘 이해할 수 있으실 겁니다 ^^ https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com Animation 제작 원칙 애니메이션의 기본 제작 방식..

이번 포스팅에서는 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 덮어쓰기에 대해서 알아보겠습니다. 스스로 짠 코드가 아닌 기존에 존재하는 코드들을 덮어쓰기 하려면 CSS에 적용되는 우선순위에 대해서 알아야 합니다. 우리가 이전에 [CSS selector]를 학습했던 내용들을 리마인드 하겠습니다. CSS Selector 1. tag에 대해서 적용 (tag명{}) p{ } 2. class에 대해서 적용 (.class명{}) .class{ } 3. id에 대해서 적용(#id명{}) #id명{ } CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?) 1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 중요! 스타일링을 위해서는 ..

이번 포스팅에서는 z-index 에 대해서 알아보도록 하겠습니다. https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org MDN 사이트를 참고하여 작성하였습니다. z-index란? : CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. 네, 하..

배경색을 섞어서 넣고 싶다.... 바로 이럴때 사용 하는 것이 linear-gradient입니다. 이번 포스팅에서는 linear-gradient에 대해서 알아 보겠습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() 을 참고하였습니다. linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an obj..

안녕하세요~ 데이터미널입니다. 이번 포스팅에서는 아이콘 삽입 에 대해서 공부해 보겠습니다. 웹사이트에서 이런 아이콘을 추가하려면 어떻게 해야 할까요? 아이콘에 대한 학습을 하지 않았던 저는 처음 떠올린 방법은 태그 삽입이었습니다. 물론 포토샵으로 이미지를 직접 제작하거나 잘 만들어진 이미지를 다운받아서 img 태그를 사용해도 무방합니다. 이 과정은 매우 귀찮은데 꽤 쓸법한 라이브러리를 소개할까 합니다. font-awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawe..

이번 포스팅에서는 제작하는 문서 내에서 다양한 글씨체(font-family)를 사용하는 방법에 대해서 알아 보겠습니다. 나에게 맞춤 폰트(이하 커스텀 폰트)를 적용하는 방법은 크게 두가지가 있습니다. 1. 오픈소스로 열려있는 .ttf .woff .eot 등 확장자를 가진 파일 다운 받기 https://github.com/moonspam/NanumSquare moonspam/NanumSquare 나눔스퀘어 웹폰트 (NanumSquare Webfont). Contribute to moonspam/NanumSquare development by creating an account on GitHub. github.com ▷우선 이 링크에 들어가서 Download ZIP을 합니다. 다운을 받아보면 ● .ttf :..

이번 포스팅에서는 [Pseudo-class]에 대해서 알아보겠습니다. Pseudo-class .클래스명:예상동작{ } 개념을 나열하는 식이 아닌 실제로 만들어보면서 알아보겠습니다. 예제1. 버튼 색상 변경 버튼은 유저가 누르고 싶게 끔 만들어야 한다. 1. 원래의 버튼 상태입니다. 2. 버튼에 마우스 커서를 가져다 올렸을 때 색깔을 변하게 합니다. (hover) 3. 버튼에 마우스 커서를 클릭하고 손가락을 떼기 이전까지 색을 설정합니다. (active) 4. 손가락을 뗀 이후, 버튼의 색상 변경입니다. (focus) CSS .btn-style { padding: 20px; background-color: coral; color : white; border-radius: 5px; border:none; f..