반응형 css2 [HTML/CSS]:hover로 transition 효과주기 CSS의 transition을 이용해서 마우스를 이미지에 hover 할 때 원형 효과 주는 것을 연습해 보았다. 우선 html에서 배경을 넣을 영역과 텍스트를 넣을 영역을 만들어준다. 텍스트 영역 안에는 큰글씨와 작은 글씨로 나눌 거라 h1태그와 span태그를 사용했다. [html] Tree by Gayouni html은 여기서 끝! 간단하게 만들어볼거라 원 하나만 만들었다. 다음 css에서 배경을 원형으로 바꿔줄 것이다. [css] div.circle { width: 200px; height: 200px; border-radius: 50%; margin: 20px 30px; position: relative; box-shadow: inset 0 0 0 16px rgba(207, 207, 207, 0.6.. 2020. 4. 1. [CSS]표 병합엔 border-collapse, 스크롤 생성할 땐 overflow 1) border-collapse collapse는 붕괴라는 뜻으로 할고있는데 아마 보더라인을 병합하는게 기존 보더라인을 합침으로써 없어지니까 collapse라고 하는지 모르겠다. border-dollapse:separate;는 기본값이므로 알고만 있자. border 분리 1 2 3 4 5 6 7 8 border 병합 1 2 3 4 5 6 7 8 결과 기본 값인 분리 모델을 보면 각 셀의 보더마다 라인이들어가있다. 하지만 border-collapse:collapse;를 사용하면 깔끔하게 합쳐진 모습이된다. 2)overflow 속성 overflow 속성에는 hidden, scroll, auto, visible 등이 있다. overflow:hidden; 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크.. 2020. 3. 20. 이전 1 다음 반응형
