웹(Web)51 CSS 뛰어넘기 CSS는 뛰어난 언어입니다. 하지만 CSS가 모든 면에서 좋을수는 없습니다. 그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데요. 이런 도구를 preprocessor이라고 합니다. 여기서는 이런 도구들의 개념과 간단한 사용법을 알아봅니다. 아래는 대표적인 preprocessor들입니다. http://lesscss.org/ (온라인 변환기) http://sass-lang.com/ http://stylus-lang.com/ (온라인 변환기) 아래는 이런 도구들에 대해서 비교한 사이트입니다. https://csspre.com/compile/ preprocessor란 무엇일까요? 대.. 2021. 4. 16. 코드 경량화 CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify 도구입니다. 여기서는 코드를 경량화하는 방법을 알아보겠습니다. http://adamburgess.github.io/clean-css-online/ clen-css nodejs 설치 이름 뒤에 min이 붙어있으면 경량화된 코드다 node js는 javascript를 서버 쪽에서도 사용할 수 있게 하는 언어 2021. 4. 16. link,import 외부로 파일을 빼는 방법은 크게 두가지입니다. 1. 2. 여러 개의 웹페이지가 있으면 그것을 전부 수정할 수는 없다 그러면 초기 디자인을 바꾸는 것이 불가능해진다 중복이 많이 있을때 우연히 같은 부분을 바꾸려다가 실수할 수가 있다 css파일을 다운로드 받아서 적용한다 이것도 용량을 많이 잡아먹지만 경제적인 이유는 임시파일은 캐시에 저장되기 때문이다 별도로 뺀 css 파일에서도 @import url("style.css")를 사용할 수 있다 link_1.html page2 style.css h1{ color:red; } 2021. 4. 16. 전환 전환은 효과가 변경되었을 때 부드럽게 처리해주는 CSS의 기능입니다. 이와 관련된 것으로는 아래와 같은 속성들이 있습니다. transition-duration transition-property transition-delay transition-timing-function transition Click 클릭했을 때는 active 선택자를 쓴다 transform은 inline이거나 inline-block일때만 동작하므로 display값을 inline-block을 준다 transition-property:all로 하면 모든 효과에 대해서 변화가 일어났을 때 변화가 일어난다는 속성이다 transition-duration:1s는 1초동안 전환이 일어난단 뜻이다 전환의 심화내용 transition-duration.. 2021. 4. 15. 이전 1 2 3 4 5 ··· 13 다음