728x90 CSS46 .overlay-wrap:hover .overlay-black { } 의 의미 .overlay-wrap:hover .overlay-black { margin-top: 50%;} .overlay-wrap 클래스의 요소에 마우스가 호버되었을 때,그 자식 요소 중 .overlay-black 클래스를 가진 요소의 margin-top 속성을 50%로 변경하라는 의미 .overlay-wrap:hover: .overlay-wrap 클래스를 가진 요소에 마우스가 호버되어 있는 상태를 의미합니다..overlay-black: .overlay-wrap 요소의 자식 요소 중 .overlay-black 클래스를 가진 요소를 선택합니다.margin-top: 50%;: .overlay-black 요소의 margin-top 속성을 50%로 설정합니다. 2024. 7. 15. [CSS] 지나가는 전광판 만들기 참고사이트:흐르는 텍스트 구현하기 (velog.io) 흐르는 텍스트 구현하기화면상에서 텍스트가 왼쪽으로 무한히 흐르는 것을 구현해보자.호버(hover) 했을 때는 텍스트 색이 진해지면서 흐르던 것이 멈춘다.이 구현은 생각보다 간단한데, html과 css 로만 구현이 가능하다.velog.ioHTML 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 CSS.flow-text { display: flex; flex: 0 0 auto; white-space: nowra.. 2024. 7. 6. [CSS] Pseudo, 이벤트 정리 Pseudo Class Pseudo Class - 가상 클래스: hover 할 때 , : ( 콜론) 이 하나 들어가는 것들을 CSS의 가상 클래스 라고 함.:active= 사용자에 의해 엘리먼트가 활성화 됐을 때( 마우스를 누르는 중일 때 ):hover= 사용자의 커서가 엘리먼트 위에 있을 때( 마우스가 올라가 있을 때):target= 상호작용된 요소가 가리킨 URL과target 요소가 일치할 때 사용되는 가상 class:any-link= link / visited 이 두개를 포괄하는 가상 class= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능:checked= 대상 체크박스가 체크됐을 때:focus= 대상 요소가 활성화됐거나 된 직후일 때:focus-within= label/fo.. 2024. 6. 17. [CSS] display: inline 과 inline-block 차이 display: inline 하고display: inline-block 차이display: inline = 딱 자기 컨텐츠 영역만 차지 = 가로 정렬이 된 것처럼 보임. = 높이가 지정이 안됨. - 높이를 지정해도 설정이 되지 않음.display:inline-block - 자기 컨텐츠 만큼 차지 - 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐. = 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리 블록 속성이 추가돼서 하위 값을 지정할 수 있음. = 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임. = 중간에 인라인 요소가 끼어든다면, 해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨. 2024. 6. 17. VW단위를 사용해 보았습니다. CSS VW단위를 사용해 보았습니다. (youtube.com)줄이면서 같이 줄어드는거= 일반 rem 보다 쓸만하다. 이미지 같은건 % 넣으면 줄어들지만텍스트는 그렇지 않음. 텍스트까지 같이 줄어들게 하려면 vw 로 제작하기. rem 으로 작업하기. vw 로 제작하면이미지도 커지고 텍스트도 커짐. vw 공식: 현재 해상도 ( 기준 해상도 ) 1920 을 기준으로 작업을 할 것. ( 그때 그때 달라짐 ) 100vw 는 사용자 기기의 가로크기 만큼.with 의 100%와 같은 의미이렇게 계산. 나누기 1920 도 해야함. 반응형할 때미디어쿼리 자체가 필요 없게 된다. vw 를 사용하게 되면그래서 주석처리함.단점: 특정 구간에서 너무 작아보이고,특정 구간에서 너무 커보인다. 그래서 그 때는 따로 미디어 쿼.. 2024. 6. 15. CSS에서 display: grid 의 사용법 CSS Grid 완전 정리 끝판왕 😎 (youtube.com)flex / grid아이템을 자유자재로 배치.flex - 아이템들을 1차원 적으로 배치.grid - 2차원 적 배치.물론 wrap 을 사용하면 flex 에서도 줄바꿈 가능.grid grid 도 flex 처럼 부모 Container에 grid 라고 지정해줘야 한다.이렇게 지정해주면 자식 요소들은 grid cell 로 변하게 됨.부모 Container 인 Grid 에 지정해 줄 수 있는 속성grid-template-columns가로 축으로 총 몇 개의 column 이 들어갈 수 있는 지,각각 column의 사이즈는 얼마인 지 지정해줄 수 있음.grid-template-rows세로로 몇 개의 row 가 있는 지, 사이즈가 어떻게 되는 지 지정해줄 .. 2024. 5. 8. 이전 1 2 3 4 5 ··· 8 다음 728x90
