css33 단어 사이에서 줄바꿈하고 단어길이가 길 경우 줄바꿈 word-break: keep-all 로 단어 사이에서 줄바꿈 하지만 일본어와 같이 단어 사이에 띄어쓰기가 없는 경우 줄이 바뀌지 않고 영역을 넘어 쭉 이어진다.. word-wrap: break-word를 추가해도 변함 없음.... 설마 했는데 width값을 설정하니 해결되었다. width: 100%; word-break: keep-all; word-wrap: break-word; wit.nts-corp.com/2017/07/25/4675 word-break 속성과 word-wrap 속성 알아보기 실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다. 본 내용은 W3C 스펙문서에서 .. 2020. 12. 3. [sass] max, min 사용하기 #{"max(1vw, 20px)"} 이런 식으로 max나 min을 #{}로 감싸줘야 함 sass-lang.com/documentation/syntax/special-functions Sass: Special Functions CSS defines many functions, and most of them work just fine with Sass’s normal function syntax. They’re parsed as function calls, resolved to plain CSS functions, and compiled as-is to CSS. There are a few exceptions, though, which have special syntax sass-lang.com github.. 2020. 11. 16. input 자동완성 css 수정 자동완성하면 배경색, 글자색 등이 바뀐다. 이를 css로 잡을 수 있다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } input뿐 아니라 textarea, select도 가능 www.codegrepper.com/code-examples/whatever/input+internal+autofill+selected+css css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ .. 2020. 11. 12. flex input width auto width 100%로 2020. 11. 9. [css] min() / max() 2개 이상의 대소비교가 가능한 값이 주어졌을 때, 최소값 또는 최대값을 반환 min(100px, 60%) 예를 들어, min(100px, 60%)를 생각해봅시다. 만약 부모 엘리먼트의 크기가 100px이라면 해당 엘리먼트의 크기는 부모의 60%인 60px이 되기 때문에, 60%가 더 작은 값으로 선택이 될 것입니다. 반면, 부모 엘리먼트의 크기가 그 두배인 200px이라면 자식 엘리먼트의 크기도 그 두배인 120px이 되기 때문에, 100px이 더 작은 값으로 선택이 될 것입니다. width: 70%; max-width: 1000px; 위 소스는 아래와 같이 min으로 바꿀 수 있다. min(70%, 1000px); 문제! 최소 padding-top을 만드려면?? 평소에는 padding-top: 20% .. 2020. 11. 4. image-set image-set()기능은 사용자의 장치에 가장 적합한 이미지 해상도를 제공하여 브라우저가 장치 및 설정에 가장 적합한 이미지를 선택하는 이미지 옵션 세트 (각각 관련 해상도 선언 포함)를 제공합니다. background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); developer.mozilla.org/en-US/docs/Web/CSS/image-set image-set() The image-set() CSS function notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily .. 2020. 10. 27. css position : 반응형에서 absolute 초기화 요소에 position: absolute; top, left 값을 줬다가 반응형에서 빼야 할 경우 position: static 사용 static 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. stackoverflow.com/questions/19351151/remove-positionabsolute-attribute-by-adding-css Remove position:absolute attribute by adding css I have a html element with id="#item" I have a UI event that programaticaly alters the css fo.. 2020. 10. 7. auto와 inherit의 차이 ? auto - 기본값, 높이 자동으로 지정 inherit - 부모의 값을 물려받음 aboooks.tistory.com/336 [css] height 속성 [css] height 속성 어제는 요소의 너비를 설정할 때 쓰는 width 속성을 배웠습니다. 오늘은 height 속성으로, 요소의 높이를 설정할 때 사용합니다. width 속성과 마찬가지로 height 속성은 인라인 요소, ta aboooks.tistory.com 2020. 10. 6. css animation 마지막 상태 유지, 반복 횟수 애니메이션이 끝난 후에도 마지막 상태 유지 animation-fill-mode: forwards; 애니메이션 반복 횟수 설정 animation-iteration-count: infinite; pro-self-studier.tistory.com/108 CSS 애니메이션 구현 - @keyframes 와 animation 속성을 이용하여 안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 애니메이션과 @keyframes 에 대해서 알아보도록 하겠습니다. 1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타 pro-self-studier.tistory.com 2020. 9. 29. 이전 1 2 3 4 다음
