concept/HTML, CSS, DOM
-
Headless UI 가 핫하다는데.. Radix UI vs shadcn/ui 어떤 것을 사용할까?concept/HTML, CSS, DOM 2024. 11. 24. 14:28
To. 프론트엔드 팀.비즈니스 방향성 변동으로 기획이 늦어지고 있습니다.하지만 디자인 시스템은 미리 만들어 두셨으면 좋겠어요.그런데 아직 브랜드 컬러랑 방향성 아무것도 정해져 있지는 않은 상황이에요.디자인 없이 UI 디자인 시스템 구축을요..?......하지만 우리는 K-직장인월급을 받고 있다면 무엇이든 해내야만 하지그러던 중 요즘 핫하게 떠오르는 키워드가 머릿속을 스쳤다."Headless UI"Headless UI 란?스타일이 없는 대표적인 UI 컴포넌트 라이브러리Headless UI는 스타일이 입혀지지 않은 형태의 다양한 UI 컴포넌트들을 제공하는 라이브러리Headless UI는 대표적인 스타일링 라이브러리 중 하나인 Tailwind CSS와 함께 사용할 수 있도록 개발되었습니다. 참고로 Headle..
-
emotion 100% 활용하기concept/HTML, CSS, DOM 2023. 12. 13. 16:27
이 전 포스팅에서 emotion과 styled-components의 차이점을 알아보았다. 결론은 근소한 차이로 emotion의 승리! https://o-yeon.tistory.com/222 styled-components VS emotion 과연 어떤 차이가 있을까? 목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승 o-yeon.tistory.com 그래서 이번 포스팅에서는 emotion을 100% 활용하는 방법에 대해서 알아보고자 한다. 설치하기 # with npm npm i @..
-
styled-components VS emotion 과연 어떤 차이가 있을까?concept/HTML, CSS, DOM 2023. 12. 7. 00:56
목차 emotion 라이브러리의 종류 알아보기 @emotion/react @emotion/css @emotion/styled emotion 과 styled-component 비교하기 다운로드 순위 비교 번들 사이즈 비교 패키지 의존성 비교 속도 비교 결론은 emotion의 승리 CSS-in-JS로 처음 입문하게 된 Styled components. 그런데 현업과 사이드 프로젝트에서는 emotion을 더 많이 사용하고 있었다. 그런데 쓰는 방법만 보면 스타일드 컴포넌트와 차이가 없어보이는 것..? styled-components는 7년 전, emotion은 6년 전에 등장한 라이브러리로서 emotion이 더 최근에 등장해 점점 사용성이 높아지고 있다고 하는데 정확한 차이는 모르고 그저 사용하고 있던 나....
-
scrollHeight, clientHeight, offsetHeightconcept/HTML, CSS, DOM 2022. 11. 10. 23:45
웹페이지와 요소의 높이값을 얻는 속성은 대표적으로 scrollHeight, clientHeight, offsetHeight 가 있다. 각 속성의 의미는 scrollHeight는 요소에 들어있는 컨텐츠 자체의 전체 높이이다. 패딩과 보더 포함, 마진 제외 clientHeight는 요소의 내부 높이이다. 패딩 포함, 스크롤바, 보더, 마진 제외 offsetHeight는 요소의 높이이다. 패딩, 스크롤바, 보더 포함. 마진 제외
-
DOM 조작하기concept/HTML, CSS, DOM 2020. 10. 11. 21:00
CREATE createDocumentFragment() createDocumentFragment() 메소드는 기존 document 객체에 비해 비교적 "가벼운" 임시 Node 객체를 만들어 줍니다. 즉, 가벼운 document 객체를 임시로 하나 만드는 것입니다. 이후 DocumentFragment 객체에 추가하고 싶은 작업을 진행을 한 번에 진짜 document에 추가할 수 있습니다. // codestates라는 텍스트가 담긴 div 생성 let codestates = document.createElement('div'); codestates.textContent = 'codestates'; // 가상의 document 생성 let fragment = document.createDocumentFrag..
-
DOM 이해하기concept/HTML, CSS, DOM 2020. 10. 9. 22:19
DOM과 자바스크립트의 차이 DOM은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 자바스크립트가 DOM을 통해서 웹페이지에 접근할 수 있습니다. 웹 페이지는 일종의 문서(document)입니다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정 가능합니다. 이 차이에 대해서 조금 더 깊게 알아보고 싶다면 해당 문서를 통해서 공부해보시면 좋겠습니다. 부모 엘리먼트를 찾는 방법 Element.closest() MDN 링크 : 기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 설정해 준 선택자에 만족할 때까지 탐색합니다. (doc..
-
CSS 질문 정리concept/HTML, CSS, DOM 2020. 4. 8. 17:26
다음은 코드스테이츠 오피스아워 때 나온 질의응답 정리 내용이다. Box sizing의 2 가지 속성 * border-box (권장!) : border를 기준으로 box size가 잡히기 때문에 padding, margin 값에 따라 content 크기는 변하지만 전체 크기는 일정하다. * content-box : content를 기준으로 box size가 잡히기 때문에 padding, margin 값에 따라 전체 크기가 변한다. height를 100%로 설정해도 크기가 안 바뀌는 이유? position: absolute를 설정하면 바뀐다! 2분할, 3분할, n분할 하는 방법? width를 %로 지정하고 float를 left로 설정한다! class, id가 중복으로 적용될 때? 뒤에 나오는 class, i..