목록Mixin (2)

초보 개발자

scss ( nesting, mixin, extend )

css를 보다 편리하게 사용하기 위해서 scss를 작성한 뒤 sass를 사용하여 css로 변환을 시킬 수 있다. 즉 scss파일만 작성해서 html에게 보내주면 html은 읽지 못한다. ( scss말고 css를 내놔 ) 그럼 scss를 어떻게 css로 바꾸냐? gulp라는 것을 사용하여 바꿀 수 있다. scss 그렇게 하는게 더 복잡해 보일 거같은데 라는 생각을 할 수도있다. gulp는 파이프를 사용하여 전에 수행된 것을 그대로 인자로 받아서 수행을 하고 다시 다른 파이프로 넘기는 식의 패턴을 사용한다. 먼저 아래와 같이 필요한 모듈을 받아온다. 그리고 routes를 통해 우리가 접근하고자 하는 diretion을 정해 둔다. style이라는 함수가 scss를 css로 변환시켜주는 것이다. 먼저 gulp...
css/css master 2022. 2. 24. 14:27
4-2 템플릿 pug

2021.09.11 - [RECAP - WETUBE] - 4-1 템플릿 pug 4-1 템플릿 pug 우리는 지금까지 res.send('메시지')를 보내왔다. 이번에는 HTML문서를 response해보려고한다. 물론 이렇게 해도 html형식으로 잘 전달이 되는 것을 확인할 수 있을 것이다. 본문에 h1태그 하나만 썻는데 taehyeki.tistory.com 이번에는 재사용성이 좋은 점에 대해서 설명해보겠다 먼저 pug는 상속을 받을 수 있다. extends 를 이용해서 다른 pug의 내용을 전부 받아 올 수 있다. 또한 부분적으로도 가져올 수 있다. header, footer, nav등 필요한 부품을 끼워 맞출 수 있는 레고같은 역할이다. 우리는 base.pug라는 기본 틀과 footer.pug 라는 부품..
RECAP - WETUBE 2021. 9. 11. 15:47
이전 Prev 1 Next 다음