concept/HTML, CSS, DOM
-
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..