웹37 grid css flexible box는 1차원 레이아웃 제공 ( 행 또는 열 하니씩) grid는 2차원 (행과 열)의 레이아웃 시스템 제공 ( 행과 열 같이 ) 1) gap : column gap, row gap 합친것 사용법 ) gap: 25px; 1) grid-template-columns grid-template-rows : 공백으로 구분된 값 목록으로 그리드의 열과 행 정의 사용법 ) 1) grid-template-coumns : repeat(5,1fr) ; //5번 반복 1fraction만큼 ( 사용가능 공간에 대한 비율) 2) grid-template-columns: 40px 50px auto 50px 40px; 3) width : 800px grid-template-columns: 300px 10% 1fr.. 2024. 1. 5. & 사용 &는 현재의 요소를 말한다. video{ width:100%; height:100%; position:absolute; top:0; opacity:0 z-index:0; } &:hover{ box-shadow: rgb(0 0 0 /80%) 0px 40px 58px -16px, rgb(0 0 0 /72%) 0px 30px 22px -10px; transform: scale(1.05); border-color rgba(249,249,249,0.8); video{ opacity:1; } } 이면 video대한 것을 말하는 것 2024. 1. 5. !important 📍 !important는 CSS에서 특정 스타일 규칙의 우선순위를 높이기 위해 사용 우선순위 문제 해결: 다른 CSS 규칙이 동일한 요소에 적용되고, 원하는 스타일이 적용되지 않을 때 사용외부 라이브러리 또는 프레임워크: Bootstrap이나 다른 CSS 프레임워크와 같이 이미 정의된 스타일이 있을 때, 자신의 스타일을 강제로 적용하고 싶을 때 사용합니다.디버깅: 스타일이 적용되지 않는 이유를 파악하기 어려운 경우, !important를 사용해 일시적으로 적용해볼 수 있습니다.💡 하지만 !important는 남용하면 코드의 가독성과 유지보수성을 떨어뜨리므로, 가능한 한 사용을 피하고 다른 방법으로 문제를 해결하는 것이 좋습니다. 예를 들어, 선택자의 specificity를 높이거나, CSS 구조를 재.. 2024. 1. 4. min-content / max-content @media (max-width: 768px) { .banner__contents { width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } : 요소안에 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때 사용 min-content : - 콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다. - 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다. max-content: - 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다. - 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로.. 2024. 1. 4. object-fit : 이미지를 보여주는 방식을 결정 1) object-fit : fill - 기본값 - 브라우저에서 의 크기를 정할려고 할 때 이미지가 왜곡 되어 보일 수 있음 2) object-fit: cover - 이미지의 원래 비율을 지킴 - 이미지가 일부 짤릴 가능성 있음 3) object-fit : contain - 이미지에 짤리는 부분없이 비율을 지킴 - 이미지 안에 텍스트 존재의 경우 많이 사용 4) object-fit : none - 정해진 width,height 무시하고 본래 크기대로 보여줌 5) object-fit: scale-down - 이미지가 주어진 영역(지정한 영역) 보다 작을 때는 none처럼 작용 - 이미지가 주어진 영역 초과시 contain처럼 작용 2024. 1. 4. z-index z-index가 없을 때 -> z- index가 적용되지 않은 요소 간에는 html 문서 상에서 나중에 나오는 요소가 먼저 나오는 요소 위에 올라오도록 설정. -> position과 static 속성에 의해서 변동 position 속성이 static이 아닌 요소는 무조건 position 속성이 static인 요소 위로 올라옴 position 속성이 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라옴 position 속성이 relative나 absolute, fixed, sticky인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라옴 z-index가 있을 때 사용법 : .first.box { z-index: 1; backg.. 2024. 1. 2. 이전 1 2 3 4 5 ··· 7 다음
