ougi FE

오늘은 취업 동아리에서 후배가 질문하는 것을 우연히 들었는데 이 부분은 왜 스타일이 적용되지 않는 걸까요?라는 질문을 하는 것을 보고 더 자세한 이유가 궁금해져 Cascading에 대해서 이렇게 글을 쓰게 되었습니다Cascading이란?CSS의 약자는 Cascading Style Sheets입니다오늘은 제일 앞에 있는 Cascading에 대해서 알아보려 하는데 뜻은 스타일 규칙이 계단식으로 적용되는 방식을 말합니다 일반적으로 여러 개의스타일이 한 html 요소에 적용될 수 있는데, 이 때 어떤 스타일을 우선으로 할지 결정해야 합니다이게 바로 Cascading에 개념인데 규칙이 구체적일수록 우선순위가 높아진다고 합니다Origin, Context먼저 origin에 대해서 알아볼 것인데 출처라는 뜻으로 이 ..

카테고리 없음 2025. 5. 15. 18:16

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

CSS 2024. 11. 5. 17:48

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

CSS 2024. 9. 16. 03:18

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

CSS 2024. 9. 2. 23:41