STYLESHEET8

• 

  [CSS-이슈] input 자동 완성 기능 사용 시 스타일 변경 회사에서 업무를 하면서, input 자동완성 기능에서 파악하게 된 이슈이다. 이슈 input 태그에 자동완성이 켜져 있을 시, 배경색이 원하지 않게 변경됨 이슈 해결 :autofill을 사용해서 제어 hover나 active와 비슷하게 선택자에 연결해서 쓰인다. input 요소의 값이 자동으로 채워지는 동작을 설정해주는 것이다. // css input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: .. STYLESHEET/CSS 2023. 8. 1.

• 

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

• 

  [참고] 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 .. STYLESHEET/STYLE- 참고 2022. 12. 8.

• 

  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.