STYLESHEET/SCSS5

• 

  [SCSS] text-overflow - 넘치는 텍스트 표기 글자수 제한 및 잘린 문자 ...로 변환 text - overflow - 넘치는 텍스트 표기 *추가로 정리해야할 부분 -webkit-line-clamp , -webkit-box-orient, -moz-box-oreint / 줄바꿈 크로스 브라우징 개념 text-overflow는 white-space를 이용해 줄바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성이다. 속성 clip 넘치는 텍스트를 자름 ellipsis 말 줄임표로 잘린 텍스트가 있다고 표시 표시방법 그림 속성 설명 1. text-overflow: clip; div 너비를 고정시키고 텍스트를 길게 입력했을 때, overflow: hidden과 white-space: nowpre로 설정하게 되면, 넘치는 텍스트는 자르.. STYLESHEET/SCSS 2023. 3. 20.

• 

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

• 

  [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. 들여쓰기 및 선언 순서 ㅇ 중첩마다 들여쓰기 ㅇ 하위 선택자가 시작될 때마다 빈 줄 추.. STYLESHEET/SCSS 2023. 2. 24.

• 

  display - flex영역 display display 속성으로 Flex Container를 정의합니다. 보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많죠. 같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의합니다. 값의미기본값 flex Block 특성의 Flex Container를 정의 inline-flex Inline 특성의 Flex Container를 정의 flex와 inline-flex는 차이는 단순합니다. display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며, displ.. STYLESHEET/SCSS 2022. 10. 7.

• 

  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를 사.. STYLESHEET/SCSS 2022. 7. 13.