안녕하세요.
이 시간에는 탁월한 CSS 프리프로세서의 기능을 살펴보겠습니다.
먼저 CSS 프리프로세서를 설명해 드리면 프리프로세서란 CSS와 유사한 언어를 사용하지만 일반 CSS 스타일 시트에서 불가능한 것을 할 수 있는 개별 문서를 말합니다.
프리프로세서를 사용해야 하는 이유는 반복을 줄임으로써 워크플로우를 빠르게 진행하기 위해서입니다.
좋습니다.
일반 CSS에서 보통 동일한 CSS 속성 즉, 색상, 크기, 위치 등을 반복적으로 사용하게 되는데요.
이제 프리프로세서에서 제공하는 다양한 기법을 통해 이 반복 작업을 줄일 수 있습니다.
이 시간에 자세히 살펴보겠습니다.
일반 CSS 시트도 있어야 하는데 수작업이 필요합니다.
CSS 시트를 생성하기 전에 무언가를 해 볼 텐데요.
이름 그대로 CSS를 프리프로세싱할 것입니다.
그러면 이 사이트를 사용하여 작업해 보겠습니다.
Dreamweaver로 돌아가 어떻게 정리되어 있는지 확인해 보죠.
이것은 완성된 사이트 구조이며 현재 개발자 모드에 있습니다.
또한 Dreamweaver에서 사이트를 정의해 놓았으므로 이 프로젝트의 파일을 관리할 수 있습니다.
이 튜토리얼을 잘 따라 하시기 바랍니다.
사이트를 만들려면 사이트에서 새 사이트를 선택합니다.
현재 사이트 정의에 대한 다른 튜토리얼이 제공되고 있으므로 도움이 될 것입니다.
현재 소스 코드에서 HTML이 열려 있는데요.
관련 문서 파일에서 styles.css로 전환해 보죠.
이것은 일반적인 CSS 시트입니다.
여기를 보면 이 색상이 흰색으로 설정되어 있는데요. #fff가 102줄에 사용되고 있고 역시 116줄에도 사용되고 있습니다.
이렇게 강조 표시하고 찾기로 이동하여 찾기 및 바꾸기를 선택합니다.
그러면 이 요소가 총 12번 사용되었음을 알려줍니다.
이렇게 간단한 사이트의 경우 많이 사용된 편이죠.
여러 번 반복되고 있는데 프리프로세서를 통해 깔끔하고 간단하게 정리할 수 있습니다.
이 파일을 닫아보겠습니다.
이 파일은 완성된 버전이죠.
이제 스타일 파일을 살펴보죠. rendered-index.html을 열고 브라우저에서 잠시 확인해 보겠습니다.
이 버전에서 텍스트를 보면 상단에도 검은색이고 가운데에도 검은색이고 바닥글에도 모두 검은색입니다.
이제 텍스트의 색상을 흰색으로 변경해 보면서 새로운 프리프로세서 기능을 사용해 보겠습니다.
프리프로세서라는 이름이 발음하기가 어렵네요.
Dreamweaver로 돌아가 먼저 해야 할 것은 CSS 프리프로세서를 만드는 것입니다.
시작하기 전에 이 파일 폴더를 보면 기본 사이트임을 알 수 있습니다. index 페이지와 styles.css가 있고 폴더 몇 개가 있습니다.
이 두 파일이 기반이 됩니다.
그러면 이제 CSS 프리프로세서를 만들고 어떻게 되는지 확인해 보죠.
파일에서 새 파일로 이동하면 여러 옵션이 표시됩니다.
LESS, SCSS, Sass를 선택할 수 있습니다.
세 옵션 모두 동일한 기능을 합니다.
모두 앞서 설명드린 내용에 부합하지만 구문이 다릅니다.
이 시간에는 최신 버전인 SCSS를 사용해 볼 텐데요.
이 언어가 일반 CSS와 가장 유사하기 때문에 웹 디자이너에게 가장 익숙할 것입니다.
이제 만들기를 클릭하고 저장합니다.
이름을 scss-styles.scss라고 지정해 보죠.
원하는 이름으로 지정해도 됩니다.
저장을 누릅니다.
알아두어야 할 점은 여기에 생성한 파일이 있고 이 CSS 파일이 자동으로 생성된다는 것입니다.
정말 멋진 기능인데요.
모든 기초 작업을 자동으로 컴파일해 줍니다.
처음 이러한 프리프로세서를 접했을 때 이 기능을 이해하고 가치는 인정했지만 여러 옵션을 설정하는 것이 복잡했습니다.
명령줄 컴파일러의 경우처럼요.
모든 옵션이 제 기능을 하도록 구성하는 것이 조금 어려웠습니다.
하지만 이제 수월해졌습니다.
이 CSS 시트를 사용하면 되는데요.
많은 요소가 제 기능을 하도록 이미 설정되어 있습니다.
이 시간에는 사이트를 구성할 때 이 CSS 시트를 사용하지 않고 먼저 SCSS 시트를 사용하고 컴파일된 이 파일을 사용해 보겠습니다.
그러면 이제 두 파일을 함께 실행해 보겠습니다.
먼저 해야 할 것은 변수를 만드는 것입니다.
변수는 간단합니다.
앞에 $ 기호를 입력하여 만들면 됩니다.
원하는 대로 지정할 수 있는데요.
이때 빈 칸을 띄우거나 특수 문자는 사용할 수 없고 숫자와 문자를 붙여쓰고 끝에 콜론을 입력해야 합니다.
이 변수를 색상으로 지정해 보겠습니다.
이 경우 #fb00b4로 지정해 보죠.
구문은 CSS와 유사하므로 매우 쉽습니다.
이전에 이 변수를 사용한 적이 없는 경우 이제 이 색상 코드는 $primary-color가 되는 것입니다.
이와 같이 변수를 지정하면 사이트에서 제한 없이 사용할 수 있습니다.
간단하게 한 줄로 정의하면 됩니다.
이제 한 번만 변경하면 변수가 사용된 모든 위치가 변경됩니다.
찾기 및 바꾸기 기능이 따로 필요 없죠.
아직 변수의 기능이 뭔지 확신이 들지 않는다면 직접 사용해 보면서 이해할 수 있습니다.
먼저 스타일을 지정해야 하는데요.
HTML로 이동해 보죠. hero라는 class에 있는 모든 텍스트에 스타일을 지정해 보겠습니다.
여기에 있네요.
이 안의 모든 텍스트를 검은색에서 변수로 설정한 다른 색상으로 변경해 보죠. footer에도 동일하게 적용해 보겠습니다.
SCSS 시트로 돌아가 마침표를 입력한 다음 class인 hero와 중괄호를 입력합니다.
다음으로 color를 입력하는데요. color는 글꼴 색상임을 기억해 두십시오.
그런 다음 콜론을 추가합니다.
이때 색상 피커를 사용해 새로운 색상을 선택할 수도 있지만 이 시간에는 반복 작업을 줄이는 방법을 살펴보고 있으므로 변수를 사용해 보겠습니다.
위에 있는 $ 기호를 입력하고 primary-color를 입력한 다음 세미콜론으로 끝냅니다.
그러면 이 변수가 자리 표시자의 역할을 합니다. $primary-color 변수가 사용되는 위치는 변수로 정의한 이 색상 코드로 변경됩니다.
이것이 바로 Dreamweaver의 컴파일 기능입니다.
현재 SCSS 시트가 열려 있는데요.
이제 컴파일되어 완성된 CSS를 살펴보겠습니다.
이 파일을 선택하면 CSS 시트가 열립니다.
이 파일은 SCSS 시트에서 자동으로 컴파일한 것입니다.
일반 CSS 시트를 생성하는데 웹 브라우저에서 사용할 수 있습니다.
색상 코드는 자리 표시자의 위치에 적용됩니다.
현재 CSS 시트가 열려 있는데요.
이제 페이지로 이동하여 편집해 보겠습니다.
HTML로 이동해 보죠.
상단을 보면 이것은 이전에 생성한 CSS 시트이고 여기에 다른 CSS를 추가할 수 있습니다.
이 구문 아무 곳에 커서를 두고 Mac의 경우 Command + D를 누르거나 PC의 경우 Ctrl + D를 눌러 복제합니다.
그런 다음 이 부분을 삭제하고 새로운 CSS를 입력합니다.
이제 두 개의 CSS가 연결되었는데요.
위에는 기본 CSS 시트이고 아래는 프리프로세서를 통해 생성된 새로운 버전입니다.
이것은 실제 SCSS 시트가 아니고 Dreamweaver에서 컴파일된 파일로 이름은 같지만 확장명이 css입니다.
브라우저에서 확인해 보죠.
바뀌었네요.
강렬한 분홍색이죠.
현재 검은색인 바닥글도 동일하게 해 보죠.
프리프로세서로 이동하여 동일한 색상으로 변경해 보겠습니다. footer id를 입력하고 글꼴 색상을 입력해 보죠.
이때 변수를 사용할 것입니다.
오타가 나지 않게 이것을 복사하고 붙여넣어 보겠습니다.
이제 브라우저에서 확인해 보면 분홍색으로 바뀌었습니다.
지금까지의 과정을 요약해 보죠.
현재 SCSS 시트를 사용하여 이 CSS 시트를 생성하고 있습니다.
이와 같이 색상 코드가 깔끔하게 정리되어 있죠.
HTML 페이지에서 사용되고 있습니다.
이 단계를 추가하는 이유를 설명해 드리죠.
실제로 추가 단계는 아니죠.
Dreamweaver에서 자동으로 CSS 시트를 컴파일하고 HTML에 모두 연결해 주니까요.
이 SCSS 시트만 사용하고 있는데요.
지금부터 변수의 진가를 보여드리겠습니다.
간단한 예를 들어 설명해 드렸는데요.
이번에는 무언가를 변경해 보겠습니다.
이 $primary-color를 사용하면 문서에 제한 없이 적용할 수 있습니다.
여기를 보시면 찾기 및 바꾸기를 사용하여 모두 찾지 않아도 한 번에 분홍색으로 변경할 수 있습니다.
이 분홍색을 흰색인 #fff로 변경하고 저장합니다.
그래야 CSS와 실시간 브라우저 미리보기가 자동으로 흰색으로 업데이트됩니다.
여기뿐만 아니라 상단에 있는 머리글도 바뀌었네요.
현재 글꼴 색상만 변경했는데요.
글꼴 모음, 글꼴 간격, 패딩, 여백 역시 가능합니다.
원하는 모든 요소를 변수로 바꾸고 이를 통해 한 번에 많은 것을 제어할 수 있습니다.
변수는 프리프로세서의 멋진 기능 중 하나에 불과합니다.
이번에는 중첩에 대해 살펴보겠습니다.
중첩은 CSS 선택기를 HTML에서 생성한 계층 구조와 일치시키는 방법입니다.
자세히 살펴보기 위해 HTML로 이동해 보죠.
이 소스 코드를 열고 스타일을 지정해 보겠습니다.
이 ul은 비순차 목록으로 상단에 표시되는 이 내비게이션에 해당합니다.
이제 스타일을 변경해 볼 텐데요.
밑줄을 제거하고 대문자로 만들고 흥미로운 것을 해 보겠습니다.
Dreamweaver로 돌아가 보죠.
CSS에서는 복합 선택기를 생성하는데요. a 태그를 li 태그 안에 만들고 li는 ul 안에 만들고 ul은 nav 안에 만듭니다.
프리프로세서에서 이 중첩을 일치시킬 수 있으므로 간편하게 스타일을 지정할 것을 알 수 있습니다.
그러면 SCSS로 이동해 보죠.
이제 HTML에 있던 site-nav에 스타일을 지정해 볼 텐데요.
일반적으로 CSS를 통해 여기에 다른 class를 입력할 수 없지만 SCSS 프리프로세서를 통해서는 가능합니다.
이 안에 ul을 입력하고 그 다음에 list-style-type을 추가하고 none을 선택합니다.
그러면 목록에서 글머리 기호가 제거됩니다.
다음으로 li를 일치시켜 보겠습니다.
HTML로 돌아가 확인해 보죠. li가 ul 안에 있고 ul은 site-nav 안에 있습니다.
다시 돌아가 보면 이 site-nav 안에 ul이 있습니다.
목록 항목인 li는 기본적으로 이 비순차 목록에서 글머리 기호로 되어 있죠.
다시 중괄호를 입력합니다.
이것도 중첩되어 있는데요. li는 ul 안에 있고 ul은 site-nav에 있습니다.
아래쪽 여백을 3.75em으로 설정하고 저장합니다.
이제 CSS가 어떻게 생성되어 있는지 살펴보죠. rendered-index.html로 이동하고 생성한 scss-styles 시트를 선택하여 어떻게 생성되었는지 보죠.
이 부분이 생성되었네요. ul이 .site-nav 안에 있고 이 구문도 생성되었습니다. li가 ul 안에 중첩되어 있으므로 복합 선택기가 만들어졌죠.
아래쪽 여백이 추가되어 있네요.
이것이 웹 사이트에서 필요한 CSS입니다.
탁월한 점은 SCSS 시트가 이 CSS를 자동으로 컴파일하고 생성한다는 것입니다.
이와 같이 HTML에서 사용된 구조를 사용할 수 있습니다. li은 ul 안에 있고 ul은 .site-nav 안에 있죠.
마지막으로 한 가지 더 살펴보죠.
SCSS 시트로 돌아가 a 태그에 스타일을 지정해 보겠습니다.
이 태그는 메뉴가 클릭될 때 이동하는 위치를 정의하는 데 사용됩니다. li 안에 중첩된 a 태그에만 스타일을 지정해 볼 텐데요. li는 ul 안에 있고 ul은 site-nav 안에 있죠.
이 li 안에 있는 요소에 스타일을 지정해 보겠습니다.
닫는 중괄호 앞에 a를 입력하고 중괄호를 입력합니다.
이제 몇 가지 스타일을 설정해 볼 텐데요.
먼저 font-size는 1.15em으로 설정하고 text-decoration은 이 경우 none으로 설정합니다.
그러면 기본으로 지정되어 있는 밑줄이 제거됩니다. letter-spacing은 0.15em으로 설정하고 text-transformation의 경우 모든 텍스트를 대문자로 만들기 위해 uppercase를 선택합니다.
다음으로 transition color를 설정해 보죠. transition을 입력하고 color를 입력한 다음 .3s로 설정합니다.
이것은 새로운 속성으로 Webkit 버전을 생성하게 될 것입니다.
커서를 이 안의 아무 곳에 두고 Command + D 또는 PC의 경우 Ctrl + D를 누릅니다.
Webkit 브라우저 접두어를 추가하고 저장합니다.
한 가지 알아두어야 할 것이 있는데요.
현재 4개의 계층 구조가 만들어졌죠. a는 li 안에 있고 li는 ul 안에 있고 ul은 site-nav 안에 있습니다.
계층 구조는 4개 이상 만들지 않는 것이 좋습니다.
너무 많으면 읽기 어려울 수 있고 사이트 속도에 영향을 줄 수 있습니다.
이제 브라우저에서 어떻게 표시되는지 확인해 보죠.
밑줄이 사라지고 대문자이고 줄 간격도 있습니다.
그런데 텍스트 색상을 설정하지 않았는데요.
흰색으로 변경해 보죠.
다시 Dreamweaver로 이동하여 color를 입력합니다. color는 글꼴 색상을 말하죠.
이때 흰색을 입력할 수도 있지만 이번에는 앞서 사용한 유용한 변수를 입력해 보겠습니다.
색상을 입력하지 않고 입력할 것은 상단에서 정의한 $primary-color입니다. $primary-color를 입력하고 저장합니다.
브라우저에서 확인해 보죠.
흰색으로 바뀌었네요.
다시 강렬한 색상으로 변경해 보겠습니다.
Dreamweaver로 돌아가 변수를 빨간색으로 변경하면 멋지게 바뀝니다.
사소한 기능처럼 보일 수도 있지만 하나의 변수 변경으로 CSS에 영향을 준다는 사실이 대단합니다.
훌륭합니다.
이제 다시 흰색으로 변경해 보죠.
마지막으로 프리프로세서의 뛰어난 기능인 mixin을 살펴보겠습니다.
그럼 한 번 해 보죠.
먼저 mixin이란 여러 CSS 속성을 그룹화하여 간편하게 사용하는 것을 말합니다.
긴 CSS 속성 목록을 반복해야 하는 경우 mixin을 사용합니다.
따라서 긴 목록을 반복하는 번거로운 작업을 줄일 수 있습니다. mixin으로 여러 속성을 그룹화하고 이 간단한 mixin을 대체 항목으로 사용할 수 있습니다.
좋은 예로 CSS 그레이디언트를 들 수 있는데요.
이 사이트를 살펴보죠.
아래로 스크롤하면 그레이디언트가 사용되고 있습니다.
아래로 내려가 오른쪽에 있는 아트웍 설명을 보면 배경이 그레이디언트로 되어 있습니다.
약간 더 내려가면 아트웍 뒤에도 그레이디언트가 적용되어 있고 바닥글도 그레이디언트로 되어 있습니다.
그러면 이 사이트에 있는 그레이디언트를 사용해 보겠습니다.
이 그레이디언트에 대한 CSS를 확인해 보겠습니다.
Dreamweaver로 이동해 보죠.
이 완성된 코드에서 설명해 드리겠습니다.
HTML에서 CSS로 이동해 보죠.
상단에 있는 class는 첫 번째 그레이디언트를 설명합니다.
이 부분을 보면 사용할 그레이디언트가 설명되어 있습니다.
자세히 살펴보면 background-image가 있고 linear-gradient와 각도가 설정되어 있습니다.
각도가 있고 시작하는 색상과 끝나는 색상이 있죠.
이렇게 그레이디언트가 정의되어 있는데 문제가 있습니다.
이 CSS 속성은 새로운 것이라서 여러 브라우저에 동일하게 표시되지 않습니다.
그래서 브라우저마다 다르게 설명해야 하는데요.
이 접두어를 사용해야 합니다.
Firefox의 경우 moz로 설정한 다음 그레이디언트를 설명하고 Webkit 브라우저의 경우 webkit을 입력하는데 대표적인 예가 Chrome입니다.
그리고 Microsoft 브라우저의 경우 ms를 입력합니다.
이제 이러한 속성을 반복해야 하는데요.
코드가 다소 길죠.
아래로 내려가 여러 번 반복해야 합니다.
이 두 번째 그레이디언트를 설명해야 하고 더 내려가 바닥글에도 정의해야 하죠.
이 Mozilla, Webkit, Microsoft 브라우저의 접두어를 계속 반복해야 합니다.
이제 mixin을 사용하여 이것을 간단하게 정의해 보겠습니다.
그러면 이 코드를 모두 삭제해 보죠. footer에 있는 이 코드를 삭제해 보겠습니다.
이 코드를 삭제할 때 footer 이름을 기억해 두십시오.
나중에 다시 사용할 것입니다. footer를 기억하고 이 코드를 삭제합니다.
다른 코드를 찾아보죠.
여기 있네요.
이름을 보면 .artwork-3 .artwork-piece로 되어 있습니다.
나중을 위해 이 이름도 기억해 두어야 하는데요. mixin에서 사용할 것입니다.
마지막으로 .artwork-1 .artwork-description을 기억해 둡니다.
그레이디언트를 제거한 다음 파일을 보죠.
아래로 내려가면 흰색 상자가 있는데요.
원래 그레이디언트로 되어 있었죠.
더 내려가 보면 이 부분도 그레이디언트로 되어 있었고 바닥글도 마찬가지였죠.
모두 그레이디언트가 제거되었네요.
이제 다시 돌아가 mixin을 사용해 보겠습니다.
SCSS 파일을 열고 아래에서 mixin을 만들어 보죠.
먼저 @ 기호를 입력하고 mixin을 입력합니다.
한 칸 띄우고 mixin에 이름을 지정해야 하는데요.
원하는 이름을 지정하면 됩니다.
이 경우 gradient라고 해 보죠.
중괄호를 입력하고 이 CSS 속성들을 붙여넣고 Tab을 누릅니다.
이 속성들은 CSS 시트에서 조금 전에 삭제한 것으로 이 시트에서 사용할 것입니다. mixin을 생성하고 이름을 지정한 다음 속성들을 붙여넣었습니다.
이 긴 CSS 속성은 그레이디언트를 설명하고 있죠.
이제 이 속성을 사용해 볼 텐데요.
먼저 이전에 기억해 둔 class 이름을 입력합니다.
CSS 시트에서 모든 그레이디언트를 삭제했었죠.
첫 번째 상자인 .artwork-1 .artwork-description을 입력하고 중괄호를 입력합니다.
이제 긴 그레이디언트 설명을 작성하지 않고 이 mixin을 반영할 것입니다. @include를 추가한 다음 이 이름을 추가합니다.
그러면 새로운 CSS 시트가 자동으로 생성됩니다.
확인해 보죠.
소스 코드인 HTML로 이동하고 자동으로 생성된 scss-styles.css를 선택하면 이렇게 생성되어 있습니다. @include 부분이 background-image로 바뀌었네요.
브라우저에서 확인해 보죠.
이전에 흰색이었던 부분에 이제 그레이디언트가 적용되어 있습니다. mixin을 다시 활용하여 mixin을 재사용할 때의 이점을 보여드리겠습니다.
다시 Dreamweaver에서 SCSS 시트로 돌아가 보죠.
그레이디언트가 적용되었던 다음 상자를 입력해 보겠습니다. .artwork-3 .artwork-piece를 입력하고 중괄호를 입력합니다.
모든 속성을 입력하지 않고 @include를 사용합니다. gradient를 입력하면 CSS가 생성됩니다.
브라우저를 확인해 보죠.
아래로 스크롤하면 첫 번째 그레이디언트가 있고 두 번째 그레이디언트가 있네요.
이와 같이 mixin의 진가를 확인할 수 있었습니다.
SCSS에서 긴 코드를 mixin으로 그룹화한 다음 include로 사용하는 것이 가능합니다.
그런데 문제가 하나 있는데요.
이 상자의 색상이 이 상자와 같습니다.
원래 두 상자의 색상이 다른데요.
색상을 다르게 설정하기 위해 변수를 추가해 보죠.
앞서 변수를 살펴보았는데요. mixin에 변수를 추가하여 두 상자에 다른 색상을 적용해 보겠습니다.
다시 Dreamweaver로 돌아가 보죠.
여기를 보면 색상 코드가 복잡하게 되어 있는데요. mixin에 이러한 색상이 정의되어 있습니다.
아래를 보면 이러한 색상이 반영되죠.
이제 이러한 색상을 변수로 변경하면 나중에 아래에서 색상을 조정할 수 있습니다.
그럼 한 번 해 보죠.
두 변수를 생성해 보겠습니다. mixin에서 gradient 다음에 생성해야 하는데요.
괄호를 입력하고 앞서 한 것과 같이 이 안에 변수를 의미하는 $ 기호를 추가하고 이름을 $gradient-color1이라고 지정해 보죠.
이것은 그레이디언트의 첫 번째 색상을 나타냅니다.
그레이디언트는 한 색상에서 다른 색상으로 옮겨가는 것이므로 첫 번째 색상과 두 번째 색상이 필요합니다.
두 번째 그레이디언트 색상을 위해 쉼표를 입력하고 $gradient-color2를 입력합니다.
이제 이 두 변수를 사용하여 어떻게 되는지 확인해 보죠.
이 색상을 변경해 보겠습니다. rgb와 모든 좌표를 삭제하고 괄호를 입력한 다음 변수를 붙여넣습니다.
두 번째 색상도 똑같이 해 보죠.
모두 제거하고 괄호를 입력한 다음 1을 2로 변경합니다.
이 코드는 다른 브라우저에서도 반복되는데요.
계속 반복되므로 복잡한 rgb를 변수로 바꾸고 이 rgb도 바꾸고 두 번째 색상 부분도 바꾸고 이것도 바꾸고 이것도 바꿉니다.
이제 해당 색상을 입력해야 하는데요.
아래에서 @include를 사용하여 변수를 추가해 보겠습니다.
변수는 해당 색상을 나타냅니다.
그러면 괄호를 입력하고 첫 번째 색상인 이 rgb 분홍색 좌표를 입력한 다음 쉽표를 입력하고 두 번째 색상인 연한 분홍색을 입력합니다.
이 include는 gradient mixin을 사용하고 있으므로 하나의 변수만 사용하면 됩니다.
약간만 변경하면 되는데요. color1에 해당하는 색상을 입력합니다. color2도 마찬가지죠.
아래를 보면 이것이 color1에 해당되고 이것이 color2에 해당됩니다.
브라우저에서 확인해 보죠.
잘못되었네요.
다시 Dreamweaver로 돌아가 보죠.
현재 .artwork-1에 대한 첫 번째 include는 완성했는데 .artwork-3에 대한 include는 완성하지 않았습니다.
그럼 완성해 보죠.
괄호를 입력하고 시작 색상인 파란색과 쉼표를 입력한 다음 끝나는 rgb 색상을 입력합니다.
브라우저에서 확인해 보죠.
아래로 스크롤하면 첫 번째 상자가 있는데요.
분홍색-살구색 그레이디언트가 적용되어 있고 다음 상자는 파란색-보라색 그레이디언트로 되어 있네요. mixin으로 설정한 것이죠.
이제 마지막으로 바닥글에 적용해 보겠습니다. footer는 HTML의 사전 정의된 태그이므로 앞에 마침표를 입력하지 않습니다.
중괄호를 입력하고 이 코드를 복사하여 붙여넣고 이 두 rgb 코드로 바꿔 그레이디언트를 생성해 보겠습니다.
이제 브라우저에서 확인해 보죠.
확인해 보면 여기에 그레이디언트가 있고 여기도 있고 아래에도 있습니다.
지금까지 mixin의 강력한 기능을 살펴보았는데요.
변수를 추가하여 이러한 mixin을 제어할 수 있습니다.
CSS 프리프로세서는 정말 탁월합니다.
지금까지 살펴본 세 가지 멋진 기능을 요약해 보죠.
상단에 있는 변수는 깔끔하고 간단합니다.
가장 많이 사용하는 기능이기도 하죠.
다음으로 중첩을 살펴보았는데요. class 안에 class를 포함시킬 수 있습니다.
아래로 내려가면 mixin을 사용해 보았는데요.
긴 코드를 한 줄로 간추릴 수 있습니다.
이 모든 것은 일반 CSS에서 할 수 없지만 Dreamweaver에서 컴파일하고 일반 CSS에 삽입해 줍니다.
CSS를 살펴보죠.
이것은 최종적으로 생성된 것인데요.
변수가 제 위치에 적용되고 모든 복합 선택기가 프리프로세서에서 만든 중첩을 통해 생성되어 있습니다.
아래에 있는 긴 코드는 이러한 class를 반영합니다.
SCSS 파일에서 한 줄로 생성한 것이죠.
강력한 Dreamweaver는 모든 명령줄 컴파일러와 구성 항목을 해결해 주므로 작업이 수월합니다.
지금까지 CSS 프리프로세서를 살펴보았는데 매우 탁월한 기능입니다.
