오늘의 CODE

flex containr 안에 두개의 flex-item 이 존재할 때, 1번 아이템에 내부 컨텐츠(텍스트)가 길어질 경우, 2번은 줄어들지 않고 1번에서만 '...' 표기되게 하려고 한다. 무슨 이유에선지 다른데에서 아무문제 없이 사용되던 코드가 flex-container의 넓이가 충분함에도 불구하고 첫번째 아이템이 ... 처리되었다. 적용한 css는 아래와 같다. .flex-container { display: flex; } .flex-item1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-item2 { flex-shrik: 0; } 크롬에서는 원하는 대로 적용이되는데 유독 safari에서는 위의 첨부한 이미지처럼 ..

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

개발한 모바일 웹의 페이지에서 특정 버튼 클릭 시 input을 포함하고 있는 레이어가 하단에서 위로 슬라이드는 상황 input을 포함하고 있는 해당 레이어는 order-radius: 16px 16px 0 0; width: 100%; height: auto; position: absolute; bottom: -542px; background: #ffffff; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25); transition: all 0.4s ease-in-out; 이렇게 적용되어 있는 상태였고 레이어 오픈 시 bottom: 0; 위의 값이 추가되는 상황이었음. 그런데 안드로이드 폰에서 input에 커서를 활성화했을 때 가상키보드가 생성되면서 레이어가 위로 밀리게 되었고,..

background-clip은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지를 지정함. border-box 배경이 테두리의 바깥 경계까지 차지(Z축 순서 상 테두리 아래 위치함) padding-box 배경이 안쪽 여백의 바깥 경계까지 차지함(테두리 밑에는 배경을 그리지 않음) content-box 배경을 콘텐츠 상자에 맞춰 그림 text 배경을 전경 텍스트 위에만 그림 예시) background: linear-gradient(to right, #8b5ad4, #c760d8, #92ccf5); background-clip : text; -webkit-background-clip: text; color: transparent; * 해당 효과를 적용할 텍스트 요소가 inline-bloc..

/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */ .box:nth-child(7n){ background: red; } /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+22) { color: blue; } /* 1번째 부터 4번째 까지 box 배경색 변경 */ .box:nth-child(-n+5) { background: green; } /* 16번째 부터 19번째 까지 box 배경색 변경 */ .box:nth-child(n+16):nth-child(-n+19) { background: hotpink; } /* 마지막에서부터 순서를 계산 */ /* 마지막(28)에서 부터 3번째 */ .box:nth-last-child(3) { background..

/* Change the color to your own background color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #fff !important; }

resize - 요소의 리사이징 방향을 설정 가능 both - 양방향 horizontal - 수평 vertical - 수직 none - 없음(resizer 자체를 보이지 않게 함) ** resize가 안먹는 경우 인라인 요소 블록 요소인데 overflow:visible값을 가지고 있는 경우

자신의 배경 및 부모와 혼합되는 모드는 지정함 /* 키워드 값 */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturat..

#flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } grid일때와 동일하게 사용할 수 있음. 단, IE에서 지원 X

* matches()가 is()로 이름이 변경됨. /* header, main, footer 어떤 엘리먼트 내부에 속해있던지 p:hover 시 css 적용 */ :is(header, main, footer) p:hover { color: red; cursor: pointer; } /* 아래의 css값과 동일함. */ header p:hover, main p:hover, footer p:hover { color: red; cursor:pointer; } :where()와 거의 비슷한 기능을 갖고 있지만 명시도에서 차이가 난다. :where()이 0의 명시도를 반면 :is()는 구체적인 명시도를 갖는다. :where(section.where, aside.where, footer.where) p { color..