728x90 300x250 SMALL Front-end319 비쥬얼 스튜디오 코드 Live Sass Compiler Live Sass Compiler에 대한 설명은 지난 포스팅에서 참고 하세요 비쥬얼 스튜디오에 Live Sass Compiler를 셋팅하려면 먼저 Live Server가 설치되어 있어야 합니다. (아래 포스팅 참고) https://moo-you.tistory.com/155?category=308020 Visual Studio Code 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기] Visual Studio 비쥬얼 스튜디오 설치 및 환경설정 변경하기 [무료 코드 편집기] 목차 1) Visual Studio Code 비쥬얼 스튜디오 코드 설치하기 2) 비쥬얼 스튜디오 코드 한국어로 변경하기 3) 색 테마 변경 moo-you.tistory.com Live Sass Compiler 설치 1. 비.. 2021. 10. 30. css 변수 기본 사용법 css 변수란? css의 중복되는 값들을 미리 정의해서 여러곳에 사용할 수 있도록 한 것을 css변수라고 합니다. css 변수 기본 사용법 변수 앞에 -- 이중 하이픈을 추가해서 변수를 선언합니다. 변수는 대소문자를 구별합니다. :root - 가상선택자 :root를 이용하면 html문서 전체에 정의되는 전역변수를 만들 수 있습니다. 특정 element 를 사용하여 해당 element에만 변수값을 지정해 줄 수도 있습니다. 지정한 변수를 사용할때는 var(변수명) 형식으로 사용합니다. .contents { border: 2px solid #555; } .contents-tit { color: #555; } .contents-tit::before { content: ""; display: inline-blo.. 2021. 10. 27. css 전처리기(Preprocessor)란? CSS 전처리기란 간단히 CSS파일을 만들기 위해 미리 처리를 하는 것을 말한다. SCSS(SASS)와 CSS의 차이에 대해서 포스팅할 때 SCSS의 유일한 단점으로 꼽았던 것 SCSS(SASS) 파일은 브라우저가 바로 인식할 수 없기 때문에 브라우저가 인식할 수 있는 CSS로 변경하기 위한 컴파일 과정을 거쳐야만 하는 것이라고 했었는데 https://moo-you.tistory.com/368 SCSS(SASS) CSS 차이 SCSS의 필요성 CSS의 단점 1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. 2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다. .SCSS 사 moo-you.tistory.com 예전에는 이 과정이 다소 복잡.. 2021. 10. 26. SCSS와 SASS 차이 SCSS와 SASS 차이 결론적으로 말하면 SCSS와 SASS는 같은거라 볼 수 있다. SASS가 먼저 생겼고 SASS와 SCSS는 서로 호환이 가능하다. 따라서 SASS라고 말해도 그것이 SCSS를 지칭하는 것이라 볼수 있다. .SASS 예시 /*.SASS*/ .contents padding : 10px .boxArea border:1px solid #ddd color:#ccc .box margin:4px background:#f7f7f7 .SCSS 예시 /*.SCSS*/ .contents { padding : 10px; .boxArea{ border:1px solid #ddd; color:#ccc; .box { margin:4px; background:#f7f7f7; } } } 위에 예시를 보면 알겠.. 2021. 10. 25. 이전 1 ··· 55 56 57 58 59 60 61 ··· 80 다음 728x90 반응형 LIST