본문 바로가기

Issues/CSS&SCSS

[css] css 가상클래스로 1. 2. 3. 쓰기 (counter)
1. 2. 3. 이렇게 순번을 써야하는데 css로 하는 방법 ! html scss .wrapper { counter-reset:아무이름 0; dl { &:before { counter-increment: 아무이름; content: counter(아무이름); } } }
[css] ::after ::before 개발자도구에서 확인하는데 확인조차 안될때
상황 가상클래스로 ::after 를 주고 안에 content랑 다 정상적으로 적용했는데 화면에 안나와서 개발자도구에서 확인하는데도 ::after 자체가 아예 보이지 않음 .test::after { content: ""; display: block; width: 20px; height: 20px; background: red; } 해결 다른 파일에서 display: none!important; 가 되어있었음.......... 같은 파일 위치가 아니라 찾는데 애먹음 ^^ 혹시 안나온다면 어딘가에서 display: none 시키고 있는지 확인해보기..!
[IOS & CSS] 아이폰 하단 여백 safe area 만큼 css주기
상황 아이폰에서 독바와 하단 겹치는 현상 발생. 해결 calc(constant(safe-area-inset-bottom) + 더할값) calc(env(safe-area-inset-bottom) + 더할값) //원래 소스 .btn { padding: vw(10px 40px); } //적용한 소스 .btn { padding: vw(10px 40px calc(constant(safe-area-inset-bottom) + 10px)); padding: vw(10px 40px env(constant(safe-area-inset-bottom) + 10px)); padding: vw(10px 40px); }
[CSS] 보더가 겹쳐져 있는 메뉴 ACTIVE 주기
상황 각각의 네모박스는 label 안의 input checkbox로 되어있고 보더를 unchecked는 회색으로, checked는 검정색으로 처리 label에 모두 border: 1px solid #ddd; 를 주었더니 겹치는 부분 발생. 그리고 checked 된 애한테 검정색으로 색상을 바꿔주었더니 마음대로 되지 않았다. 해결 1. 모든 label에 보더를 준다. 2. 모든 label에 겹치는 만큼을 margin으로 빼준다. margin-top: -1px; (이렇게 하면 봤을때 맨 위에 빼고 모두 일정한 보더를 가지게 됨) 3. 첫번째 label에 margin-top: 0; (여기까지 하면 첫번째를 포함해서 모두 일정한 보더를 가지게 됨.) 4. checked 된 애한테 보더 색상 바꿔주면서 posit..
[CSS & ie] translate 와 calc (같이 사용하지 않기)
ie에서 이슈 transform: translate(0, calc(100% + 25px)) 해결 transform: translateY(100%) translateY(25px);

티스토리툴바