일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- working directory
- vue
- javascript
- docker
- props
- pagination
- Selenium
- laravel
- centOS7
- php
- Wordpress
- cron
- Python
- staging area
- dockerfile
- ubuntu
- ruby
- react
- ec2
- docker-compose
- controller
- Ruby On Rails
- NGINX
- imagemagick
- SQL
- linux
- MySQL
- Git
- codeigniter4
- AWS
- Today
- Total
목록CSS (2)
내가 한 노력들
반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다. 실제동작 확인 See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen. 간단히 코드 설명 JS const table_container = document.querySelector('#table-scroll'); const table = document.querySelector..
아이콘에 마우스를 가져다대면, tip 말풍선을 보여주는 UI를 자주 볼 수 있습니다. 위의 사진과같은 기능은 CSS만으로도 구현이 가능합니다. HTML 원하는 tip 메세지 CSS .container { position: relative; } .tip{ position: absolute; top: 8px; left: 55px; font-size: 14px; line-height: 26px; text-align: center; background-color: #b3dfe6; border-radius: 50%; width: 24px; height: 24px; cursor: default; } .tip:before{ content:'?'; font-weight: bold; color:#fff; } .tip:h..