728x90 반응형 Coding With Jina/CSS17 [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] Flex flex - padding이나 margin 없이 엘리먼트의 포지션을 이동시키고 정렬할 수 있음 - 적용하고자 하는 엘리먼트의 부모 엘리먼트에만 작성해야함 속성 의미 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 주축 여러줄 묶음 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄.. 2020. 5. 15. 이전 1 2 3 다음 728x90 반응형
