Front-End(Web)/HTML, CSS
-
[CSS/Side Lib.] Emotion.jsFront-End(Web)/HTML, CSS 2022. 7. 21. 00:35
🧐 서론 작년, React 개발을 막 시작할 때 Styled-Components 라이브러리에 대해 포스팅하면서 CSS-in-JS를 같이 언급하였다. CSS-in-JS는 말 그대로 스타일 정의를 css파일이 아닌 JS로 작성된 컴포넌트에 삽입하는 기법이다. 그렇기에, 컴포넌트 단위로 개발하는 모던 프레임워크에서 각광받는 기법이며, Styled-Components, Emotion.js 등이 대표적인 CSS-in-JS 라이브러리로 사용되고 있다. CSS-in-JS는 컴포넌트 단위 개발 외에 아래와 같은 장점들, 그리고 trade-off성 단점들을 가지고 있다. [장점] 컴포넌트 내에 CSS를 작성하므로, 별도의 stylesheet 파일을 관리할 필요가 없다. CSS 모델을 Global 레벨이 아닌 컴포넌트 레..
-
[HTML] 이메일 폼 퍼블리싱Front-End(Web)/HTML, CSS 2022. 3. 30. 03:06
현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다. 우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리셔님이 제작해주신 이메일 폼 코드를 공유받았고... 충격에 빠지게 되었다!! 자주 사용해보지 않았던 태그의 등장.... 납득하기 힘든 Inline CSS....!! 매우... 매우 당혹스러웠다...🤪🤪 위 문법을 준수하여 작업하더라도, 이전에 왜 이렇게 작업되어야 하는지 그 취지를 이해해야겠다는 생각에 이메일 폼 퍼블리싱에 관한 글들을 참고하게 되었고, 나와 비슷한 피해자(?)들은 조금이라도 이 길을 쉽게 지나갈 수 있는 가이드같은 포스팅을 작성하고자 글을 시작하게 되었다. 📙 배경 주로, 서비스를 사용하는 회원에게 관련..
-
[HTML+JS] window.postMessage() - <iframe> 과의 통신Front-End(Web)/HTML, CSS 2022. 2. 24. 22:27
현재, 회사의 서비스 분리 및 병합 등이 이루어지는 과정이어서, 선배 개발자님과 통합 멤버십 페이지를 개발하고 있다. 지금은 멤버십 개발 및 QA는 마무리된 상태이며, 이를 각 서비스에 연동하는 과정이며 여기서 많은 정책의 변화가 수반되고 있다. 그 중 하나가, 서비스에서 본인인증이 필요할 시, 멤버십 본인인증 창을 외부 팝업(일종의 모달) 형태로 띄우고자 하는 것이다. 팝업을 띄우는 다양한 방법이 있겠지만, 태그를 통해 내부에 웹페이지를 삽입하는 형태를 구상했다. 이 때, 내부 페이지의 X버튼을 클릭하면 외부 페이지가 이를 인식하고 창을 닫는 로직이 필요했으며, 이를 위해 window.postMessage() 라는 브라우저 이벤트 및 리스너를 활용하게 되었다. 내부에 웹을 띄우는 방법은 다방면에서 적용..
-
[CSS/Side Lib.] Tailwind CSSFront-End(Web)/HTML, CSS 2022. 1. 23. 20:20
오랜만에 React에서 사용할 수 있는 Style 라이브러리를 토이 프로젝트와 함께 공부해보고 사용한 경험을 정리하고자 글을 쓴다. 바로, Tailwind CSS(이하 테일윈드) 이다! 많은 사람들이 어느 정도 알고 있는 라이브러리일 것이라 생각한다. 테일윈드는 React뿐만 아니라, Vue, Svelte 등 다양한 프레임워크에서 활용할 수 있으며, 또한 요즘 각광받고 있는 CSS 라이브러리 중 하나이다. npm trends 그래프를 가져와봤는데, 확실히 최근에 출시했음에도 불구하고 많은 Stars와 신속한 업데이트 속도를 보여주고 있다. 이렇듯, 테일윈드가 각광받고 있는 차별점은 아무래도 간단한 싱글라인 스타일이라고 생각한다. className 안에 테일윈드가 제공하는 속성 클래스들, 혹은 본인이 co..
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..
-
[CSS/Side Lib.] Styled ComponentsFront-End(Web)/HTML, CSS 2021. 1. 24. 21:53
2차 개인 프로젝트에서 디자인을 위해 Sass(SCSS) 외에 다른 라이브러리를 사용하려고 한다. 바로 'Styled-Components'!! 초기 세팅에 앞서, Styled-Components 개념공부, 설치 및 사용법을 간단히 학습하고자 포스팅을 시작했다.🧐🧐 📘 CSS-in-JS 란? Styled-Components 는 스타일을 가진 컴포넌트를 만들도록 도와주는 React의 대표적인 CSS-in-JS 라이브러리이다. CSS-in-JS 의 개념을 먼저 정리한다면, 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹 개발은 HTML - CSS - JS 각각 별도 파일로 분리하는 것이 기본적인 컨셉이었다. 하지만, React, Vue 등 모던..
-
[CSS/Side Lib.] SASS, SCSSFront-End(Web)/HTML, CSS 2020. 12. 29. 15:40
오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다. 🧑💻 Session : Sass - Sass 란? Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다. Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss) 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다. 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다. * CSS 전처리기 3대장 :..
-
[CSS] Position / Display(block) / FloatFront-End(Web)/HTML, CSS 2020. 12. 14. 22:14
🤔 서론 여기선 스타일링의 Layout 및 Box-model에서 주로 사용되는 위 세 가지 속성에 대해 포스팅하고자 한다. 🚀 Check Point Assignment 그 동안 배운 것을 정리할겸 아래의 사이트에서 학습을 완료해주세요. - http://learnlayout.com/ - https://poiemaweb.com/css3-layout - https://poiemaweb.com/css3-box-model 그리고 블로그를 작성해야 합니다. 블로그를 작성할 때는 아래 사이트, replit 뿐만 아니라 youtube, 다른 좋은 블로그 등 여러 자료를 참고하고 작성해주시면 됩니다. 각자 편한 블로그 채널(티스토리, velog, medium 등)에 포스팅을 아래의 주제로 작성해 주시고, Google C..