CSS

[CSS] 텍스트 길면 ... 표시하기

쇼핑몰 상품리스트를 만들 때, 상품명 길이를 처리하다가 정리하는 포스팅이다. 상품명이 길면 상품박스의 높이에 영향을 주지 않도록, overflow: hidden처리를 한다. 만약 상품명이 다음과 같이 일정한 길이라면 상관없겠지만, HTML 삽입 미리보기할 수 없는 소스 다음과 같이 들쑥날쑥하다면 보기에 안좋으니 처리를 해줘야하겠지..🍴 사실 상품명의 길이가 어떻게 될 지 모르니 뭐가 됐든 처리를 해주는 편이 낫겠다. HTML 삽입 미리보기할 수 없는 소스 .prdtBox .prdtName{ overflow: hidden; // 영역 벗어나면 숨기기 white-space: nowrap; // 줄바꿈 지정 text-overflow: ellipsis; // 영역 벗어나면 '...'로 표시 } HTML 삽입 미..

[CSS] border 안쪽으로 주기 box-shadow

모바일 웹 개발 중에, '내비게이션에 마우스 올리면 아래쪽에 두껍게 흰색 선 넣어주세요~~'라는 요청을 받았다. 불편하게 PC에서 모바일 웹을 볼 일이 있나 싶지만.. 어려운 일이 아니기 때문에 해놓기로 한다. 보통 아래쪽에 흰색 선이라고 하면 border-bottom을 생각하기 쉽지만, 다른 메뉴들과 라인을 맞춰주면서 해당 컴포넌트 안쪽으로 선을 넣어줘야 하기 때문에 box-shadow의 inset 속성을 사용한다. .menu-btn:hover { color: #c09e16; background-color: #dce255e0; border-color: #dce255e0; font-weight: bold; box-shadow: 0px -3px 0 0 #c09e16 inset; } 속성은 {두께(우,하,좌..

[CSS] 특정한 요소를 제외시키는 :not 선택자

:not 선택자 이미 지정된 css스타일에서 특정한 요소를 제외시킬 경우 사용한다. 선택할 요소:not(제외시킬 요소){...} 예제 This is a normal paragraph. This paragraph has a "highlight" class and will not be affected. This is another normal paragraph. This is a third normal paragraph. 결과 HTML 삽입 미리보기할 수 없는 소스