본문 바로가기

CSS36

wrap-overflow vs word-break 차이점

wrap-overflow 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용합니다. .overflow-wrap { overflow-wrap: break-word; } word-break 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. https://developer.mozilla.org/ko/docs/Web/CSS/word-break .word-break { word-break: break-all; // 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외) } 2022. 4. 18.

width가 %일 때, ellipsys로 글자 생략하기

프로필 remseremseremseremseremseremser emseremseremseremseremseremserems eremseremseremseremseremseremse remseremseremseremseremseremsere mseremseremseremseremse &-info { width: 100%; &-class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; display: block; } } 2022. 4. 11.

[CSS] 여러 줄 텍스트. 보이는 줄 제한하기

multiline 제한하기 chrome같은 최신 브라우저에서 지원하는 css 문법. 하지만, IE에서는 지원하지 않음. 크로스 브라우징을 고려한다면, 다른 방법을 찾아야 함. 예로.. 3줄로만, 화면에 보여줘야 한다면, 다음과 같은 방법을 사용해서 문제를 해결함. .multiline { white-space: normal; text-align: left; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; // IE 대응 // line-height: 1.2rem; // max-height: 3.6rem; } IE 대응을 생각한다면, .multiline.. 2022. 2. 8.

[CSS] input width 100% 삐져나오는 현상

문제 input width 100%로 스타일을 주었는데, 아래 그림처름 삐져나오는 문제가 발생했습니다. 해결방법 border-box : width와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. // styled-components 기반으로 작성되었다. const Input = styled.input` width: 100%; box-sizing: border-box; ` 발생 원인 input의 외곽선 너비가 입력칸 너비에 포함되기 때문임. 2022. 1. 4.

[CSS] outline 속성

개요 용도는 선택된 요소를 두드러져 보이게 할 때 많이 사용합니다. border를 사용하게 되면, border가 요소 외부 크기에 영향을 줘서, 다른 요소들의 layout이 영향을 받습니다. 하지만, outline은 다른 요소들의 layout에 영향을 주지 않습니다. 사용방법 outline-style: dashed; // 필수 outline-color: red; outline-width: ; 2021. 12. 30.

[CSS][툴팁]이미지 hover 설정 및 after에 contents 전달

결과물 이미지 hover scale 설정 이미지에 hover기능으로 틀 안에서 이미지가 커지는 설정을 알아보겠습니다. 부모요소에 overflow: hidden을 주면 됩니다. // 📁 index.html // 📁 article.css .grid_item { position: relative; display: flex; align-items: flex-end; width: 23vw; height: 15vw; overflow: hidden; // 👈 이미지가 scale로 커지지만, 이미지를 감싸는 부모 요소가 넘치는 자식 요소를 감춤 border: 1px solid gray; } .filter_img { width: 23vw; overflow: hidden; } .filter_img:hover { // 👈 .. 2021. 7. 18.

[SCSS] 전역으로 SCSS 변수 파일 등록하기

안녕하세요. 야근 중입니다. 새로 들어간 프로젝트에서 마크업과 스타일 작업을 진행하고 있습니다. CSS는 CSS 전처리기인 SASS의 SCSS로 작성하고 있습니다. 많이 사용하는 색깔이나 크기 style들을 변수와 요소 스타일 설정으로 common.scss라는 파일에 모아두고 사용하고 있습니다. 매번, 여러 컴포넌트에서 계속 임포트를 해서 사용하려고 하니까, 개발하는데 너무 불편했습니다. 장기적으로 볼 때, 계속 중복되는 코드를 사용하는 것은 불편하다고 생각했습니다. // 👇 불편한 코드 @import '@/assets/scss/common.scss'; 그래서, 이 불편한 문제를 해결하기 위해서 공통으로 사용하는 스타일 값들을 전역 변수로 등록할 방법을 찾아다녔습니다. 정확하게 vue-cli 문서에서 그.. 2021. 7. 16.

[CSS] absolute 에서 요소 화면 정 중앙에 배치하기

요소의 style position이 absolute일 때, 화면 정 중앙에 요소를 배치하는 방법을 알아보겠습니다. 아래 사진은 배치한 결과입니다. 아래 코드를 사용하면 됩니다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2021. 7. 12.

[CSS] HTML input 요소 커스텀하기

개요 안녕하세요! 이번에는 input을 커스텀하기 위한 style 코드를 알아보겠습니다. 왜 input 요소에 스타일링이 필요했냐면, 저는 클릭하면 텍스트가 클립보드에 복사되는 기능을 하는 버튼을 만들어야 했습니다. window 스펙에서 제공하는 docuement.commandexec() 메서드를 사용하고 'copy' 매개변수를 주면 텍스트를 복사를 할 수 있겠더라구요. 그런데, commandexec()메서드의 타겟이 되는 DOM을 지정을 해줘야 하는데, 그 방법이 input과 textarea 요소에서만 select()해줘야 했습니다. 그니까 input요소를 쓸 수밖에 없었습니다. 사용자 입장에서는 input 박스 느낌을 주지 않고 누르면 복사가 되는 느낌을 줘야 했기 때문에 브라우저에서 기본적으로 제공.. 2021. 6. 26.

[CSS] position sticky 알고 사용하기🤔

CSS position: sticky sticky는 top 과 left 지정으로 위치를 지정할 수 있습니다. 처음에는 relative이다가, viewport의 상단 부분과 sticky 요소의 top 설정 픽셀 만큼되면, 그 때 부터는 fixed로 position이 동작합니다. 그래서, 일정만큼 스크롤을 내리다 보면, 갑자기 화면에 고정되는 요소들을 보실 수 있습니다. 🥵제가 개발하면서 발생한 문제 저는 한 참 스크롤을 내린 뒤에 원하는 offsetY에서 sticky가 fixed되기를 원했습니다. 그럴 생각으로 sticky 요소에 top 픽셀을 fixed될 offsetY 픽셀을 설정했습니다. 아래 코드가 그랬습니다. 그런데, 스크롤을 내리면, sticky요소가 그냥 fixed로 작동했습니다. 원인은 이미 .. 2021. 6. 26.

티스토리툴바