CSS
[CSS] flex자식 요소인 경우, sticky가 안먹힐때
tailwind가 적용된 게시글입니다. 하지만 tailwind 모르셔도 쉽게 유추 가능합니다. ❌ 문제 코드 위 코드에서 aside태그의 sticky가 정상적으로 먹히지 않았다. 🔍 원인 flex는 기본적으로 `align-items: stretch`이 적용된다. align-items: stretch란? flex내부의 아이템들을 수직으로 쭉~ 늘어지게 하는 것이다. sticky는 부모영역 내에서 본인의 위치가 고정되는 것인데, flex 의 align-items: stretch로 본인 영역 과 부모영역의 높이가 같아진 것이다. 그래서 정상적으로 작동하지 않는 것. 🍀 해결 이를 해결하기 위해서는 해당 자식요소는 부모 flex 의 `align-items: stretch`가 적용되지 않도록 해야한다. 이때 필요..
[CSS] 대세 flex를 공부해보자💸 (fect. 1분코딩, 드림코딩)
float과의 차이점 helloflexhe lloflexhelloflex helloflex abc helloflex float float의 원래의 목적은 이미지와 텍스트의 함께 정렬하기 위한 것이었다.div같은 것을 배치하는 용도로 사용했던 float는 순수한 용도가 아니다(즉, hack) 너비만 정해진 요소를 flex를 사용하지 않고 float로 정렬하면 위와 같이 높이는 요소안의 내용의 길이만큼 적용된다. flex container와 item에 적용하는 속성값이 다르다. container에 적용되는 것 display flex-direction flex-wrap flex-flow justify-content align-items align-content item에 적용되는 것 order flex-gro..
[웹 접근성] 키보드로 gnb탐색하기 (Only CSS / dl, dt, dd, :focus-within)
접 접근성이란? 장애여부와 상관없이 모든 사람이 사이트를 동일한 경험을 하는 것 (정보를 얻을 수 있게 얻는 것) 가이드 바로가기 https://accessibility.naver.com/accessibility ol, li - 순서가 있는 목록 ul, li- 순서가 없는 목록 dl,dt,dd - 설명 목록을 만듦 대체로 li나 dl을 사용하는데, dl을 사용하면 하위 요소를 dt, dd로 두 개로 구분할 수 있다. dt는 이름, dl은 값이라서 gnb2를 특정하는데도 의미와 의도에 문제가 없다. (시멘틱 마크업 OK) 키보드로 이동할 때, dl> dt> dd로 올바르게 움직인다. 로고 a 센터소개 센터소개 연혁 및 조직 찾아오시는 길 이용안내 운영현황 이용안내 어플리케이션안내 홈페이지접수안내 인터넷접수..
[CSS/JS] CSS나 JS가 어떤 브라우저에서 작동하는지 확인할 수 있는 사이트
css나 js를 쓰고 싶을 때 브라우저에서 작동하는지 확인할 수 있는 사이트는 이곳이다. Can I use... Support tables for HTML5, CSS3, etc Can I use... Support tables for HTML5, CSS3, etc caniuse.com
[CSS] clearfix - 자식요소가 높이를 모두 잃었을때 부모요소에세 자식요소 높이 알려주는 법 / overflow:hidden 처럼 영역을 가지게 하는 경우 css
clearfix란? 문서의 구조에서 부모요소가 자식요소를 감싸고 있는 형태에서 자식에게 float요소나, positioon을 적용하면 부모가 더 이상 자식을 감싸지 않게 된다. 그래서 부모의 높이가 0px가 되는 현상이다.😥 clearfix방법 1️⃣ 첫번째 방법 가장 기본적인 방법으로, overflow:hidden;을 부모에게 설정한다. 부모요소{overflow:hidden} 2️⃣ 두번째 방법 부모요소:after에게 아래 css를 적용한다. 부모요소:after { content: ""; clear: both; display: table; } 3️⃣ 세번쨰 방법 부모요소에 display: flow-root; 를 적용한다. (edge에서는 지원하나 IE에서 지원안함) 부모 { display: flow-r..
slick슬라이더 로드전 이미지 보여지는 이슈 css해결법
I know it's an old question, but this worked for me in a similar situation, when the problem was that all slides were displayed at once and this looked horrible and jumpy. The solving is pure CSS. First, you add CSS to your slick slider wrapper: .your-slider-wrapper { opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease; } After slider is initialized, ..
[CSS] 반응형 16:9 비율 유지하는 법
hasudoki.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-169-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B2%95 CSS - 반응형 16:9 비율 유지하는 법 CSS - 반응형 16:9 비율 유지 개요 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다. 자세한 내용은 위 링크를 참고해주세요. 유투브 동영상 또는 반응형 작업시에 필요한 hasudoki.tistory.com
[CSS]배경 그라데이션 애니메이션
background: linear-gradient(40deg, rgb(199, 121, 208), rgb(75, 192, 200), #2b3074); -webkit-animation: huerotator 10s infinite alternate; animation: huerotator 10s infinite alternate; @keyframes huerotator { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } }
마우스 호버시 대각선으로 보더 생기는 css효과
See the Pen mouse hover effect - border diagonal by hoyashu (@hoyashu) on CodePen.