primavera

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 속성을 한번에 다 적을 수 있다.

- 이미지 삽입할 때 사용하는 기법. 자연스럽게 만들어줌. - layout을 만들 때도 사용한다. float:left를 적용하면 오른쪽과 같이 나타난다. 사진 오른쪽에 글이 적힌다. 두번째 p 태그는 사진 옆에 보이지 않고 사진 이후에 보이게(기본) 하려면? 수정 전: 이미지에 float:right을 주게 되면 이미지 이후에 나오는 모든 요소에 대해 왼쪽에 보여진다. 그 설정을 피하고 싶으면 그 요소에 clear:both를 써주면 된다. 수정 후: clear에 올 수 있는 속성의 값으로는 both, left, right가 있다. clear:right는 right float를 없애는 것, cler:left는 left float를 없애는 것이다. both는 둘 다 없애는 것. holy grail layout..

미디어(컴퓨터, 휴대폰 등등)의 상태에 따라 다른 디자인을 보여줌. 미디어에 적합한 디자인을 보여준다. 반응형 디자인 4: 모바일에서도 반응형 디자인을 사용할 수 있게 함. 결과: holy grail layout과 결합 초기 코드: 생활코딩 html css javascript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda i..