[css] cursor

[css] cursor

Cursor 모양 지정 개발을 하면서 드래그인 드롭 리스트에 대한 커서를 어떤식을 표현하면 좋을지 고민하다가, cursor의 종류에 대해서 다시한 번 찾아보게 되었습니다. 이후에도 알맞는 커서를 선택해 사용하기 위해서 포스팅을 해보았습니다. 요즘은 커스텀한 커서도 많이 사용하고 있어서, 시간이 된다면 커서를 커스텀하는 방법에 대해서 다뤄보겠습니다. Property Values Value Description 사용방법 alias 커서가 생성될 항목의 별칭을 나타냄 cursor: alias; all-scroll 어떤 방향으로든 스크롤 할 수 있음을 나타냄 cursor: all-scorll auto 디폴트값, 브라우저가 커서를 설정 cursor: auto; cell 셀(또는 셀 집합)을 선택할 수 있음을 나타..

  • format_list_bulleted STYLESHEET/SCSS
  • · 2023. 3. 13.
  • textsms
[SCSS] 기본설정

[SCSS] 기본설정

SCSS 내용 파악 1. 폴더 구조 ㅇ Root/src/ 외에는 자유롭게 관리한다. 2. 파일 구조 common ㅇ _base.scss : resetCSS 모음 ㅇ _vaiables.scss : 변수 모음 ㅇ _mixins.scss ㅇ _placeholder.scss : extend 모음 ​ lib ㅇ 외부 라이브러리 모음 ​ ​ 3. 인코딩 ㅇ 모든 scss 파일에 charset 를 선언한다. ㅇ 컴파일 후에 charset 선언은 하나만 남게 되므로 여러 파일에서 작성해도 문제 없음. ㅇ 공백 없이 최 상단에 작성한다. ㅇ 쌍따옴표를 사용한다. ​ ​ 4. 중첩 ㅇ 최대 3뎁스 중첩까지 사용하는 것 권장 ​ ​ 5. 들여쓰기 및 선언 순서 ㅇ 중첩마다 들여쓰기 ㅇ 하위 선택자가 시작될 때마다 빈 줄 추..

  • format_list_bulleted STYLESHEET/SCSS
  • · 2023. 2. 24.
  • textsms
[참고] display:none일 때, transition 불가

[참고] display:none일 때, transition 불가

display:none 일때는, transition으로 효과를 넣어도 생각한대로 작동되지 않는다. 원인은? transition을 이용한 애니메이션의 특징 transition은 이전 프로퍼티의 상태와 이후 프로퍼티의 상태를 비교해서 그 차이를 부드럽게 이어준다. 일반적으로 숫자 연산 가능한 속성에 사용한다. 그러나 display와 visibility는 숫자로 연산이 안된다. 따라서 이 둘은 transition 효과도 불가능. 주요 렌더링 경로 Critical Rendering Path 인터넷 브라우저가 화면 상에 코드를 그릴 때 내부적으로 여러 단계를 거친다. 이 일련의 단계들을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 관련 내용은 4단계로 나눌 수 있다. - Dom, C..

  • format_list_bulleted STYLESHEET/STYLE- 참고
  • · 2023. 2. 3.
  • textsms
[참고] display:flex 사용할 때 justify-content가 적용 안됨

[참고] display:flex 사용할 때 justify-content가 적용 안됨

flex로 row, column 정렬을 할 때 justify-content가 적용되지 않음 #container { dispaly: flex; justify-content : space-between; } conclude flex 내부 items이 고정되고 난 후에도, items을 묶고 있는 container에 여백이 있어야 justify-content가 잘 작동된다 이유 - if your flex items are all inflexible (flex: noone or flex: 0 0 auto), and smaller than the container. - if your flex items are flexible, But can't grow to absorb all the free space, due ..

  • format_list_bulleted STYLESHEET/STYLE- 참고
  • · 2022. 12. 8.
  • textsms
css clip-path code / 모서리 짜르기

css clip-path code / 모서리 짜르기

css clip-path 코드 만들어주는 사이트 https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com cf. 참고 clip-path hover clip-path를 사..

  • format_list_bulleted STYLESHEET/SCSS
  • · 2022. 7. 13.
  • textsms
따라하기 - 햄버거 메뉴 만들기

따라하기 - 햄버거 메뉴 만들기

따라하기 See the Pen 햄버거 메뉴 만들기 by JIWON CHOI (@jiwonch) on CodePen. 참고 사이트 https://designer-ej.tistory.com/entry/Navbar-%ED%96%84%EB%B2%84%EA%B1%B0-%EB%A9%94%EB%89%B4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%981-Html-CSS-JS [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS ⭐햄버거 메뉴 애니메이션 1 2nd bar는 투명하게 사라지고, 1st, 3rd bar가 회전하며 X표시. See the Pen ExNKxGR by Eunji Jeon (@emcjrl) on CodePen. body { display: flex..

  • format_list_bulleted web_dev
  • · 2022. 6. 1.
  • textsms