ougi FE

저는 Tailwind를 이용해 웹페이지를 구현할 때동적인 스타일링을 구현하기 위해서 종종 삼항 연산자를 사용해왔습니다.하지만 이 방법은 코드가 너무 지저분해진다는 문제가 있었습니다. 오늘은 그 문제를 해결해 줄 수 있는 classnames 라이브러리를 소개해 드리겠습니다.❓ classnames란?classnames 라이브러리는 조건부로 CSS 클래스를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.여러 개의 CSS 클래스를 간편하게 결합하거나 특정 조건에 따라 클래스 이름을 동적으로 추가할 수 있습니다.Tailwind 또는 CSS Modules와 많이 쓰인다고 합니다.장점코드 가독성이 높아집니다.동적 스타일 적용이 쉬워집니다.라이브러리 크기 작아집니다.단점기본적으로 타입이 정해져 있지 않아서..

저는 얼마 전 여러 강의를 보다가 우연히 트랜지션이라는 것을 접하게 되었습니다 부드럽게 움직이는 요소들을 보고 아!! 나도 저렇게 부드러운 움직임 구현해보고 싶다! 라는 생각이 들어서 공부를 해보려고 이렇게 글을 쓰게 되었습니다!❓ 트랜지션(transition) 그게 뭘까?CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다속성transition-property: 원하는 애니메이션 속성(color, border-radius, postion) transition-duration: 애니메이션 효과가 실행되는 시간(ms, s) transition-timingfunction: 애니메이션이 적용되는 속도(linear, ease(기본값), ease-in, ease-out, ease-in-out) t..

저는 소프트웨어마이스터고등학교 4개가 모이는 토크콘서트를 얼마 전 다녀왔습니다 그 곳에서 친구들과 명함을 주고 받다가 친구의 명함에 Tailwind CSS라는 것이 있는 것을 보곤 무엇인지 궁금증이 들어 이렇게 글을 써보게 되었습니다📌 Tailwind CSS란?Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크입니다이미 만들어진 유틸리티 클래스를 이용하기 때문에 시간을 많이 절약할 수 있습니다유틸리티란?유틸리티는 특정한 작업이나 기능을 수행하도록 설계된 작은 코드 조각을 의미합니다. CSS에서는 요소의 스타일을 간단하게 정의하는 단일 속성 클래스를 지칭하며, 이를 통해 반복적인 스타일링 작업을 간편하게 처리할 수 있습니다.ex)// css...

저는 요즘 반응형 웹에 대한 유튜브 강의를 듣고 한번 더 정리하면 좋은 반응형 웹을 만들 수 있을 것 같아 이렇게 글을 쓰게 되었습니다 일단 반응형 웹이 무엇인지 먼저 알아보겠습니다!! 반응형 웹이란?간단히 말하자면 화면 크기에 실시간으로 반응하며 레이아웃이 변화하는 웹을 말합니다하나의 코드로 모든 화면 크기에 최적화된 웹이라고 할 수 있습니다유동적입니다하나의 URL을 기반으로 화면이 바뀝니다 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 반응형 웹이라고 부르지 않습니다장점검색엔진 최적화에 유리해 검색 결과에서 상위권에 나타나게 할 수 있습니다 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능합니다반응형 웹 외에 다른 웹에 비해 모든 플랫폼에서 일관된 콘텐츠 경험을 줄 수 있습니다단점반..

저는 얼마 전 디자인을 가져오고 있는데 UI가 이상해져서 CSS 코드를 살펴보다가position: absolute;이런 코드가 가져와지는 것을 봤습니다. 예전에 강의에서 본 적은 있지만 너무 가볍게 넘어가 코드를 수정하는데 많은 시간 소모되었습니다. 그래서 position 속성에 대해 정확히 짚고 넘어가고 싶고 알게 된 같이 사용하면 좋은 z-index도 설명하고 싶어 이렇게 글을 쓰게 되었습니다!Position?보통 자신이 원하는 정확한 위치에 위치시키기 위해 사용합니다top, bottom, left, right 속성과 함께 사용합니다장점쉽게 위치 조정을 할 수 있습니다정밀하게 위치를 조정할 수 있습니다단점많이 사용하게 되면 코드가 복잡해집니다반응형 디자인을 할 때 문제가 생길 수도있습니다 static..