티스토리 뷰
[탭 메뉴 클릭시 width가 늘어나는 현상을 해결하기 위한 방법]
tab 메뉴 클릭 시 border를 적용하면서 border의 px만큼 늘어나 클릭 시 메뉴가 흔들리는 이슈가 있었습니다.
px이 늘어나지 않게 하면서 border를 주기 위한 방법으로 box-shadow를 inset으로 적용하였습니다.
box-shadow: 0 0 0 3px inset;

.tab {
width: 250px;
height: 50px;
background: yellow;
border: 1px solid #333;
box-shadow: 0 0 0 3px inset;
text-align: center;
line-height: 50px;
}
<이미지출처> https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow
'퍼블리싱 > css' 카테고리의 다른 글
| [CSS] Font (0) | 2023.11.14 |
|---|---|
| [CSS] position:sticky (0) | 2021.12.23 |
| [CSS]1줄, 2줄 말줄임 표시 하는 방법 (0) | 2021.12.23 |
| [css ]tooltipBox 말풍선 모양 만들기 (0) | 2021.12.14 |
| [CSS] 공 튀기기 애니메이션 (애니메이션 / 키 프레임) (0) | 2021.08.31 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- frontend
- excel down
- react excel 다운
- 리액트 포탈
- react portal
- 개발
- Portal
- 페이징 커스텀
- jQuery
- CSS
- HTML
- 제이쿼리
- react
- 퍼블리셔
- node.js
- excel custom
- slick-slide
- 퍼블리싱
- paging-custom
- 탭메뉴
- 로그인폼
- javascript
- React.js
- npm
- file-saver
- 프론트엔드
- css3
- 디자인시스템만들기
- 프론트엔드개발
- 슬릭 슬라이드
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
글 보관함