CSS21 [CSS] Sass 와 Styled-components 비교 분석 + 직접 사용해보며 느낀점 Sass 와 Styled-components 비교 분석 + 직접 사용해보며 느낀점 [index] 1. Sass 특징 2. Styled-components 특징 3. Sass와 Styled-components 코드로 비교해보기 4. css-in-css vs css-in-js 관점에서 비교해보기 5. 직접 사용해보며 느낀점 | 개인적인 견해 이번글은 주로 css in css와 css in Js의 차이를 중점으로 Sass 와 styled-components를 비교해보려고 합니다. 우선 Sass 와 styled-components 각각의 특징에 대해 간략하게 정리해보겠습니다. 1. Sass 특징 Sass는 CSS in CSS 방식입니다. 흔히 HTML, JS, CSS는 관심사가 다른 개별적 요소로 보고 분리하는.. 2023. 11. 21. [CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점 Tailwind CSS 분석 [index] 1. Tailwind CSS란? 2. Tailwind CSS 장점 3. Tailwind CSS 단점 4.실제로 프로젝트에 적용해보며 느낀점 1. Tailwind CSS란? https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com Tailwind CSS는 utility-first CSS 프레임워크로서 핵심 개념.. 2023. 11. 21. CSS-in-JS Library | styled-components란? ( + 직접 사용해본 후 느낀점 ) styled-components란? [ index ] 1. styled-components란? 2. styled-components의 장점과 단점 3. 왜 styled-components를 사용해야 할까? 4. styled-components를 직접 사용해보며 느낀 장점과 단점 5. 결론 1. styled-components란? https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components is the result of wondering how w.. 2023. 11. 16. [ React ] textarea text 높이 따라 자동으로 높이 조절하기 (with Tailwind css) textarea text 높이 따라 자동으로 높이 조절하기 with Tailwind css 이 글은 비교적 동적 스타일 적용이 번거로운 tailwind css를 사용하는 과정에서 textarea의 높이를 자동으로 조절하는 방법에 대해 다루고 있습니다. tailwind css가 아니라면 이것보다 더 편리한 다른 방법도 있을 것 같습니다만, 우선 해당 조건에서 실행되어야만 하는 상황이기에 최선을 다해 방법을 찾아보았습니다. 이점 참고하시기 바랍니다. onChange 이벤트 리스너를 이용해 scrollHeight를 textarea.style.height에 직접 적용하는 방법 위와 같이 적용 한 후 콘솔로그로 높이를 확인해보면 이렇게 event.target.scrollHeight가 정상적으로 확인됩니다. 그리고.. 2023. 7. 30. JavaScript / button 스크롤 높이 따라 사라지고 나타나도록 하기 자바스크립트로 스크롤 높이에 반응하는 버튼 만들기 완성 모습 HTML 코드 설명 우선 aside 하위로 버튼들을 묶어주었다. 로 버튼을 만든 이유 : 반원 모양으로 버튼을 크게 만들기 위해서 div태그를 사용했다. 태그로 버튼을 눌렀을 때 이동하고자 하는 위치 또는 링크를 지정한다. 태그는 구글 icon소스 링크이다. class name "material-symbols-outlined"은 icon 기본 style 셋팅값이다. CSS 코드설명 _visible이 붙은 class이름으로 스타일을 만든다. (js에서 추가될 class로 이름은 명시적인 것이면 어떤 이름도 괜찮다.) {backgorund-color} 까지는 원하는 스타일(버튼디자인) {position : fixed} : 버튼이 브라우저 화면 상에.. 2022. 6. 26. CSS3 flexible box layout display flex속성을 이용해 요소들을 배치하는 방법주축과 교차축을 기준으로 요소를 정리하는 방법flex-direction 속성을 이용해서 주축과 교차축을 바꿀 수 있다. 이를 이용해서 가로로 혹은 세로로 정렬할 때 float보다 편하게 정렬이 가능하다.flex-direction reverse는 어디에 쓰이는걸까? 굳이 순서를 반대로 해서 정렬할만한 경우가 있는지?flexible box layout플렉스 컨테이너(flex container) : 배치할 요소들을 묶어주는 역할.플렉스 항목(flex item) : 플렉스 컨테이너 안에 위치하는 배치할 요소.주축(main axis) : 플렉스 컨테이너 안에서 요소들을 배치하는 기본 방향. 왼쪽(주축 시작점)에서 오른쪽(주축 끝점)으로 수평방향 →교차축(c.. 2022. 5. 16. CSS display 속성 display:none과 visibility:hidden의 차이display:block과 display:inline-block의 차이display:none 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않는다. (특정 요소를 hover상태에서 노출되도록 할때 사용할 수 있다. )visibility:hidden는 어디에 사용하는가?display 속성화면 보여주는 방식display:none; 화면에서 숨김. 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않음 (삭제의 개념)display:block; 블록레벨요소로 만듬.display:inline; 인라인 레벨로 만듬 / 주로 목록에서 사용 /박스 모델 값이 적용 안됨.display:inline-block; 인라인 레벨로 배치 + 블록 레벨 속성 지정.[화면에.. 2022. 5. 8. CSS속성 transition 시간에 따른 속성 적용 transition-delaytransition-durationtransition-propertytransition-timing-function transition-timing-function 을 이용해서 자연스럽게 효과를 줄 수 있다. ease-in-out transition이란? 시간에 따라 웹 요소의 스타일 속성이 변함transition : transition 속성을 한번에 설정transition-delay: 트랜지션 지연 시간 설정transition-duration : 트랜지션 진행 시간 설정 / [시간]transition-property : 트랜지션 대상을 설정 / [all], [none], [속성 이름] transition-timing-function : 트랜지션 속도 곡선을 설정속도 곡선 종.. 2022. 5. 6. CSS 애니메이션 애니메이션 속성을 이해한다.애니메이션을 이용해 요소를 이동시킨다.애니메이션을 이용해 시간차 효과를 줄 수 있다.애니메이션을 이용해 움직임의 속도를 조절할 수 있다.%단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?애니메이션이란?CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다. Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의. from : 애니메이션의 시작 프레임를 설정함to : 애니메이션의 끝 프레임를 설정. @keyframes keyframesName .. 2022. 5. 5. 이전 1 2 3 다음
