목록CSS (3)

포시코딩

2월5일 - [CSS] 테이블 row에 마우스 오버 시 하이라이트 효과 주기

개요 이런 bootstrap 테이블을 만들었는데 각 row에 대해 마우스를 갖다 댈 때 하이라이트 효과를 주고 싶었다. 다행히 bootstrap에서 class에 table-active만 넣어주면 하이라이트 효과를 줄 수 있는 기능이 있어 마우스를 갖다대면 -> table-active class 추가 마우스가 벗어나면 -> table-active class 제거 위 기능만 구현시키면 해결될 것으로 보였다. 구현 프론트엔드 지식이 부족해서 구글링을 좀 해봤더니 https://stackoverflow.com/questions/74089433/want-to-add-class-when-hover-the-div-with-vanilla-javascript Want to add class when hover the d..
TIL 2023. 2. 5. 16:36
자주 쓰는 css 문법 세트

배경이미지 넣기 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* 이미지 어둡게 */ url('이미지경로'); background-size: cover; background-position: center; 내용 중앙정렬 display: flex; flex-direction: column; justify-content: center; align-items: center; 모서리 굵기 무시 box-sizing: border-box;
CSS 2022. 10. 18. 20:00
display

맨날 헷갈리는 display 딱 정리하고 감 display: none; 화면에서 사라짐. 크기 자체도 차지하지 않음 display: block; 일반적으로 설정하지 않아도 div가 갖게되는 기본값 기본적으로 width가 자신의 컨테이너의 100%. 쉽게 말하자면, 가로 한 줄을 다 차지 display: inline; 컨텐츠를 딱 감쌀정도의 크기. block 태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없다. 테스트에서 width를 임의로 500px 로 바꾸어줬지만 크기는 여전히 글의 길이 만큼인걸 확인 가능 display: inline-block; inline과 block의 특성을 합쳐놓은 속성. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바..
CSS 2022. 9. 27. 23:39
이전 Prev 1 Next 다음