Study/css
-
hover했을때 다른 요소에 변화주기Study/css 2020. 5. 16. 20:51
큐브가 컨테이너 내부에 직접있는 경우 :#container:hover > #cube { background-color: yellow; } 큐브가 옆에 있으면 (컨테이너가 태그를 닫은 후) 컨테이너가 : #container:hover + #cube { background-color: yellow; } 큐브가 컨테이너 내부에 있으면 #container:hover #cube { background-color: yellow; } 큐브가 컨테이너의 형제 인 경우 : #container:hover ~ #cube { background-color: yellow; } 출처: https://www.it-swarm.dev/ko/html/div%EB%A5%BC-%EC%98%AC%EB%A0%B8%EC%9D%84-%EB%95%..
-
Grid 정리Study/css 2020. 5. 12. 12:54
display: grid; grid-template-columns: 40% 60%; -> columns형태로 각각 40, 60프로 나뉘어 배치됨. grid-template-columns: 4fr 6fr; -> 위와 같은 것을 출력하나 이 친구를 더 많이 사용함. 왜냐하면, grid-gap: 1rem; -> 그리드 사이의 공간. 이 친구를 사용할때 템플릿을 %로 사용하면 갭때문에 이외의 공간이 생겨나서 스크롤이 생겨버림. 그래서 템플릿을 사용할때에는 fr을 사용하는 것이 더 좋다. (fr = fraction 부분, 일부) grid-template-columns: 4fr 6fr; grid-template-columns: 1fr 1fr 1fr 1fr; -> 이런식으로도 사용할 수 있음. grid-templat..
-
<p>태그 텍스트 중 일부만 선택해서 속성 변경하기 :: span활용Study/css 2020. 5. 11. 17:43
HTML 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. 은 와 매우 유사하지만, 는 블록 레벨 요소인 반면 은 인라인 요소입니다. Add the basil, pine nuts and garlic to a blender and blend into a paste. Gradually add the olive oil while running the blender slowly. 즉, span태그의 클래스를 사용해서 각각 css로 색, 폰트 등을 변경할 수 있다. :) 😁
-
backface-visibility(이면가시성)Study/css 2020. 5. 11. 15:21
우리말로 번역해서 더 어려워진 단어, 뒷면을 보여준다는 backface-visibility 속성에 대해 간단히 알아봅니다. backface-visibility 소개(뒷면 보기) backface-visibility 속성은 3D 전환을 제어할 수 있습니다. 즉, 이 속성은 3D transform(전환)과 연관되어 있으며, 입체적인 뒷면의 가시성을 결정하는 속성입니다. 변형이 가해져서 요소의 뒷면이 보여지게 될 때, 이 속성으로 숨기거나 보여지게 할 수 있습니다. 그리고 이 속성을 이용하여 원치 않는 번쩍이는 효과를 숨기게 할 수도 있습니다. CSS div { -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility..
-