HTML에 작성되어있는 table에 CSS, Javascript 등으로 잠금 되어있다는 의미의 효과를 주는 방법이 있을까요?
조회수 615회
html에 이미 작성되어 있는 에 이 부분은 잠겨있는거라는 의미의 효과를 주고싶은데 우선 바로 그림 첨부해서 질문드립니다.
이런식으로 작성 되어 있는 그림에 아래와 같이 효과를 주고싶습니다
이렇게 효과를 줄 수 있는 방법이 있을까요? 코드는 아무렇게나 상관 없을 거 같구요 가능하다면 아래 사진에 hover했을 때 자물쇠가 살짝 커지는 효과도 있으면 좋겠습니다 css 고수분들 부탁드립니다. 아 그리고 부트스트랩을 적용해서 화면크기가 줄어 들 때 그림에 있는 테이블 크기도 같이 변화됩니다.
1 답변
-
테이블을 적당한 컨테이너로 감싸면 되겠지요. 이렇게.
.locked { position: relative; } .lock { position: absolute; text-align: center; color: white; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }<div class="locked"> <table class="table"> <!-- 생략 --> </table> <div class="lock d-flex justify-content-center"> <span class="d-flex align-self-center">여기에 자물쇠 입력</span> </div> </div>- 아 이런 방법이 있군요!! 감사합니다! 혹시 그럼 하나의 table을 전체로 묶지 못할 때는 어떤 방식으로 접근하면 좋을까요? 혹 4행 4열짜리 테이블에서 맨 마지막 열만 저런 효과를 줘야할 때요! 김재민 2019.9.4 08:49
- 그건 부득이 table 은 쓸 수 없고 div 마크업에 테이블 디스플레이 CSS 주는 방식으로 처리하셔야 할 것 같네요. https://stackoverflow.com/a/28086308 엽토군 2019.9.4 11:55
댓글 입력