웹 컴포넌트 스타일링 관리 (CSS-in-HTML, CSS-in-CSS, CSS-in-JS) 웹 개발에서 CSS를 적용하는 방식은 프로젝트의 구조와 요구 사항에 따라 다양하게 선택할 수 있으며, 주요 스타일링 접근 방식으로는 CSS-in-HTML, CSS-in-CSS, CSS-in-JS가 있다. CSS-in-HTML인라인 스타일링을 말하며, HTML 요소에 style 속성을 사용해서 해당 요소에 직접 스타일을 적용하는 방식이다.소규모의 간단한 스타일을 적용할때 사용할 수 있으며, 해당 요소에만 영향을 준다.별도의 css 파일이 필요없다. 하지만 html 태그와 style 코드가 혼재되어 유지보수가 어려우며 재사용이 안되기 때문에 동일 스타일을 여러 요소에 적용하기 위해 중복코드가 발생할 수 있다. ..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 08. react-slick으로 슬라이드 만들기 (customPaging 옵션 방식)
customPaging 옵션을 이용한 작업방식입니다. 슬라이드 2개로 페이징을 구현하려면 새로 작성한 글을 참고해주세요! 사진첩 작업을 하기위해 react-slick 라이브러리를 활용해보겠습니다. 그냥 slick을 쓴 경험은 있지만 react에서는 강의를 보고 예제 코드 만들어 본 이후 처음이네요.ㅎㅎ 라이브러리 설치를 먼저 해주시구요. npm i react-slick 대충 테스트해보기위해 slick 사이트에 있는 예제를 가져와서 간단히 뚝딱 만들어보겠습니다. 아래 사이트에서 docs를 확인해보세요. https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 예제코드..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 02. wifi 애니메이션 만들기 (styled-components)
(강의내용과 큰 상관없습니다. 강의 듣고 결과물 만드는 작업 중입니다.) 작업물에 wifi 애니메이션이 필요해서 제작해보기로했습니다. 뭐 대충 이런거.. 딱히 기능은 없고 css 애니메이션으로만.. codepen.io에서 간단한 코드를 발견해서 크기만 수정해서 사용하기로 했습니다. 감사합니다 ㅎㅎ 코드 출처입니다. https://codepen.io/roncallyt/pen/GymuE Wifi signal, pure CSS Português: Fazendo um sinal de wifi usando somente CSS e animações CSS3 através da regra @keyframes. English: Making a wifi signal using only CSS and ... codepe..