본문 바로가기

Web dev/HTML, CSS5

Tailwind CSS 프로젝트에 도입하기 (특징 / 설치) - 이전 팀 프로젝트를 두 회차 진행하며, CSS 스택 후보로 항상 Tailwind CSS 가 등장했었다. 그러나 항상 익숙한 styled-components에 밀려 채택되지 못했다. "다음번에는 도입해봐야지" 생각만 하다, 채용 과제를 진행하며 드디어 적용해보게 되었다. 이번 계기를 통해 tailwind를 사용해보고, 내가 직접 느낀 장단점까지 향후 정리해보고자 한다. - 도입에 앞서, Tailwind 공식 페이지에서 특징을 탐색해보았다. - utility-first / 개발 속도 향상 - Rapidly build modern website without ever leaving your HTML -> 퍼블리싱 작업을 하면 class 나 기타 CSS 선택자를 신경쓰며 HTML 구조가 있는 파일과 CSS를.. 2023. 7. 1.
CDD / CSS in JS / Styled Components 1. CDD 란? Component Driven Development, 컴포넌트 주도 개발. 레고처럼 조립해나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어나가는 개발 방법론. Bottom-up 방식 2. CSS in JS 태블릿, 데스크탑, 모바일 등 다양한 디바이스 환경에서 인터넷을 사용하기 시작하면서, CSS 작성 방식도 꾸준히 변화하고 있다. 프로젝트 규모와 복잡도가 커지고, 디바이스 환경이 다양해지면서 효율적인 CSS 작업을 위해 CSS 구조화에 대한 필요성이 대두되었다. 다양한 방법론이 있지만, 중요한 지향점은 코드의 재사용 코드의 간결화 (유지 보수 용이) 코드의 확장성 코드의 예측성 (클래스 명으로 의미 예측) 이정도로 정리해볼 수 있다. 이러한 방법론들을 거쳐 캡슐화하여 컴포넌트 기반으로.. 2023. 1. 3.
HTML, CSS 02 계산기 목업 만들기를 위한 CSS 속성을 알아보자_02 1. 현재의 무드: 이태원 참사 뉴스를 보고 아침부터 쭉 기분이 다운이다. 정신적으로 꽤 충격을 많이 받아서 ... 좀 회복할 시간을 줘야할 것 같다. 그래도 해야 할 일은 해야하니까 블로깅 간단하게 정리하고 자려고 한다. 2. 오늘 학습한 내용 중 키워드: CSS 속성들 3. 오늘 학습한 내용 요약 4. animation: 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 애니메이션을 나타내는 CSS 스타일, 그리고 애니메이션의 중간 상태를 나타내는 @keyframes 로 이루어진다. mdn 문서에 따르면, 자바스크립트를 이용한 애니메이션보다 세 가지 장점이 있다고 한다! 1. JS몰라도 간단한 애니메이션을 만들 수 있음 2. JS를 이용한 애니메이션은 잘 만들어졌더라도 .. 2022. 10. 31.
HTML, CSS 02 계산기 목업 만들기를 위한 CSS 속성을 알아보자_01 1. 현재의 무드: 오늘은 계산기 목업 만드려고 레이아웃을 짜는데, 후에 CSS 적용해서 만들 생각을 하니, 클래스명, id명을 큰 그림을 짜고 시작하는게 좋겠다 싶었다. 그리고 아직 어떤 결과물을 만드는 과정을 거쳐본 적이 없으니, 그 과정이 꽤 버겁게 느껴졌다. 그치만 오늘 매칭되신 페어님께 같이 예제 보면서 구조를 분석해보고, 참고로 목업 구조 짜는게 어떻냐 제안드렸다. 그렇게 같이 HTML, CSS 모두 예제 구조를 보니 훨씬 이해가 잘 되어서 감을 어느 정도 잡았다! ㅎㅎ 그리고, CSS 속성 중 처음 보는 것들을 정리해서 같이 블로깅 한 후, 공유하기로 했음. 역시 같이 하는게 최고! 그래서 오늘은 해당 예시에 있는 CSS 속성 중, 정확히 모르는 것들에 대해 정리해볼 예정! 2. 오늘 학습한.. 2022. 10. 30.