WEB/CSS 검색 결과

해당 글 4건

[CSS] 박스 비율을 유지하며 여러 비율의 이미지 담기

가로와 세로의 비율이 고정돼있는 박스에 이미지를 넣어야 할 경우, 이미지의 크기가 해당 비율로 고정돼있으면 문제가 없겠지만, 어떤 비율의 이미지가 들어올지 모를 경우에는 이미지가 튀어나오는 문제가 발생한다. 이를 해결하기 위한 가장 단순한 방법은 박스에 overflow: hidden 속성을 주는 것이다. 그럼 당연히 튀어나온 만큼의 이미지는 보이지 않게 된다. 하지만 이 방법은 여러 문제가 있다. 1. 튀어나온 부분을 숨기는 것이기 때문에 이미지가 잘릴 수밖에 없다. 심지어 잘린 뒤 보이는 부분은 중앙 부분이 아닌, 좌측 상단 부분이다. 2. 반응형을 고려하기 위해 width를 퍼센트로 둘 경우, width는 브라우저의 크기가 줄어들면 같이 줄어들지만, height는 그대로다. 즉, 박스의 가로 세로 비..
WEB/CSS 2019. 6. 3. 15:01

[CSS] 드래그 영역 색상 변경

네이버 edwith 사이트에서 사용된 코드이다.::selection 가상요소를 이용하면 드래그 영역의 색상을 변경할 수 있다. :hover, :visited와 같이 콜론이 한 번만 붙는 것은 가상클래스,::selection, ::placeholder와 같이 콜론이 두 번 붙는 것은 가상요소라 한다. 가상클래스는 선택자에 특별한 상태를 부여하는 것이고,가상요소는 단독으로 문서의 특정한 부분의 스타일을 지정하는데 쓰인다.
WEB/CSS 2018. 5. 20. 17:48

[CSS] 텍스트 말줄임 처리

1. 한 줄 말줄임 처리 1234567.dot { display: inline-block; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}cs white-space: nowrap; 으로 문장이 정해진 공간을 넘어가더라도 줄바꿈되지 않게 처리한다. 그리고 overflow: hidden; 으로 넘치는 부분을 숨긴 뒤, 넘친 부분에 해당하는 text-overflow를 ellipsis로 함으로써, 말줄임표로 대체한다. 2. 여러 줄 말줄임 처리 1234567891011.dot { display: inline-block; width: 300px; text-overflow: ellipsis; line-height: 1.2;..
WEB/CSS 2017. 9. 28. 01:38