primavera

1 2563번: 색종이 https://www.acmicpc.net/problem/2563 이 문제는 첨 봤을 때 모든 사각형의 넓이를 구한 후 겹친 부분을 빼서 푸는 건줄 알았다. 근데 더 좋은 풀이가 있었다. 전체 넓이가 크지 않기 때문에 그 전체 넓이에 해당하는 만큼을 배열로 만들어놓고, 사각형에 해당하는 부분을 표시하면 된다. 표시된 부분이 최종 결과가 된다. 2 17299번: 오등큰수 https://www.acmicpc.net/problem/17299 블로그 글들을 보면서 코드를 이해하긴 했는데 도대체 이런 생각은 어떻게 해야하는걸까? 나는 첨에 이 문제를 while 루프를 돌면서 풀었다. 그랬더니 시간초과가 떠서 다른 방법으로 풀어야 하는거구나 까지는 생각을 했다. 근데 스택으로 풀 수 있을거라..

preprocessor 프리프로세서는 문법과 컴파일러 두 가지로 이루어져 있다. 프리프로세서 = 지금 존재하는 문법보다 더 간단하고 쉬운 문법(문법) + 그 쉬운 문법을 해석하는 소프트웨어(컴파일러) sass, less, stylus가 있다. https://stylus-lang.com/ Stylus Expressive, robust, feature-rich CSS language built for nodejs stylus-lang.com 폰텔로 특정한 문자가 특정한 이미지로 사용되는 것. https://fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets..

1. 웹사이트에서 clean-css online adamburgess.github.io 2. vs code에서 - minify 확장프로그램 설치함 - 원본 파일에서 Fn+F1 키를 누른 후, minify 입력 - 원본 파일이 style.css라면 style.min.css이라는 minify된 파일이 생김

여러 개의 웹페이지가 같은 css를 사용한다면 중복을 제거할 수 있다. 별도의 .css 파일을 만들고, html에서 그 파일을 link한다. link import link와 import의 기능은 같다. link: html 안에서 css를 로딩할 때 사용 import: css 안에서 다른 css를 로딩할 때 사용

전환. 여러 효과들의 전환을 부드럽게 한다. (7) transform은 적용할 요소가 block 이거나 inline-block일 때 동작한다. 따라서 display: inline-block으로 설정함. (8) transition-property: 전환을 어느 효과에 줄지 (11) a:active 요소 a를 클릭했을 때 발생할 효과 결과: * 8~9를 합쳐서 한 줄에 쓸 수 있다. 이렇게 쓰면 각 효과에 대해 시간을 다르게 설정할 수 있다는 장점이 있다. transition: font-size 1s, transform 0.1s transition-delay 설정한 시간 후 효과가 나타난다는 뜻 transition-timing-function 전환 속도를 균일하지 않게 설정 ease가 linear보다 자연스..

회전, 비틀기 등의 효과를 주는 것 원본: transform:scale 주의. transform 여러 개를 사용하면 뒤에 있는 효과가 앞에 있는 효과를 덮어씀. 다음 코드에서 scaleX는 나타나지 않음. scaleY가 덮어썼기 때문에. 그래서 transform 여러 개를 사용하려면 한 줄에 써줘야 함. 라인 12는 transform: scale(2, 3);로 바꿔도 똑같음. https://codepen.io/vineethtrv/pen/XKKEgM Css3 Transform CSS3 Transform models ... codepen.io transform-origin left top, 즉 왼쪽 위를 기준으로 scale을 적용함. https://codepen.io/search/pens?q=transfor..

필터: 이미지 하나에 대해 효과를 줌 블렌드: 여러 개의 이미지에 대해 효과를 줌 background-blend-mode hover mix-blend-mode mix-blend-mode를 설정한 요소와 배경을 합성한다. https://codepen.io/search/pens?q=blend CodePen Search codepen.io

이미지를 흑백으로/뿌옇게/... https://bennettfeely.com/image-effects/ Image Effects with CSS A collection of CSS snippets to create fast, complex image effects for websites bennettfeely.com 원본: grayscale, blur hover, transition hover: 마우스를 올렸을 때 실행되는 것 transition: 애니메이션 (라인6) transition:all 모든 효과가 2초에 걸쳐서 실행됨 https://codepen.io/search/pens?q=filter CodePen Search codepen.io

background-repeat background-color와 background-image를 같이 사용할 수 있다. 이미지가 반복해서 보이는데, 이게 싫다면 background-repeat:no-repeat를 추가하면 된다. repeat-x: x축만 반복 / repeat-y: y축만 반복 background-attachment background-image가 움직이지 않게 함. background-size background-position left top이 디폴트 right top, right bottom, center bottom, center center등으로 사용할 수 있다. background 속성을 한번에 다 적을 수 있다.