본문 바로가기
728x90
반응형

css11

[CSS] 스크롤바 숨기기 해당 div에 -ms-overflow-style: none; 넣고 ::-webkit-scrollbar { display: none; } 이거 따로 추가 크롬만 확인해봄 2020. 5. 27.
[CSS] 배경 이미지 그라데이션 속성 / 이미지 점점 흐리게 linear-gradient 에서 to bottom 하면 아래서부터 rgba(색상, 투명도) 위치 ※ 투명도가 작을수록 흐릿하며, 0일 때는 안보임 rgba(255, 255, 255, 0) 10%, 아래 끝부터 화면 10% 까지는 흰색 투명도 0 rgba(255, 255, 255, 0.5) 25%, 10%부터 화면 25% 까지는 흰색 투명도 0.5 rgba(255, 255, 255, 0.7) 40%, 25%부터 화면 40% 까지는 흰색 투명도 0.7 rgba(255, 255, 255, 1) 50%, 40%부터 화면 50% 까지는 흰색 투명도 1 rgba(255, 255, 255, 1) 100% 50%부터 화면 위 끝 까지는 흰색 투명도 1 ★ url 이미지가 linear-gradient 보다 먼저 오면 .. 2020. 5. 21.
[CSS] 체크박스 CSS 적용하기 체크박스 자체가 CSS 적용하는 것은 불가능 하므로 input 체크박스를 숨기고 label로 가짜 체크박스를 만들어준다 .remember-check { /* 실제 체크박스는 화면에서 숨기고 */ display: none; } .remember-check + label { display: inline-block; position: relative; cursor: pointer; } .remember-check + label:before { /*가짜체크박스*/ content: " "; display: inline-block; width: 13px; /* 체크박스의 너비를 지정 */ height: 13px; /* 체크박스의 높이를 지정 */ line-height: 13px; /*세로정렬을 위해 높이값과 일치 .. 2020. 5. 20.
[CSS] Padding을 제외한 배경색 지정하기 특정 영역 전체가 아닌 padding 값을 준 테두리 부분을 제외하고 배경색을 지정하고 싶은 경우 background-clip: content-box; 2020. 5. 20.
[CSS] Flex 완벽 정리 후후 이제 확실하게 알았다!!!! flex - 적용하고자 하는 자식 element의 부모 element에 적용할 것 justify-content : (가로) flex-start 요소들을 컨테이너의 왼쪽으로 정렬 default flex-end 요소들을 컨테이너의 오른쪽으로 정렬 center 요소들을 컨테이너의 가운데로 정렬 space-between 요소들 사이에 동일한 간격을 둠 space-around 요소들 주위에 동일한 간격을 둠 aglin-items : (세로) flex-start 요소들을 컨테이너의 꼭대기로 정렬 flex-end 요소들을 컨테이너의 바닥으로 정렬 center 요소들을 컨테이너의 세로선 상의 가운데로 정렬 baseline 요소들을 컨테이너의 시작 위치에 정렬 stretch 요소들을 컨.. 2020. 5. 17.
[CSS] vertical-align 수직정렬 vertical-align inline 요소와 inline-block 요소를 수직정렬할때 사용 파란색 박스와 노란색 박스가 빨간색 박스 밑으로 수직정렬을 하고 싶을때 사용하면 이렇게 수직 정렬이 된다! 단, 파란색과 노란색 박스 둘 다에게 적용해야함 .box { display: inline-block; height: 100%; vertical-align: top; } 2020. 5. 14.
728x90
반응형

티스토리툴바