본문 바로가기
728x90

분류 전체보기530

How To Make An Infinite Autoplay Slider (3) How To Make An Infinite Autoplay Slider - YouTubeHTML CSS - 차례로 나열하기body { min-height: 100vh; display: grid; place-items: center;}.slider { height: 250px; margin: auto; position: relative; width: 90%; display:.. 2024. 7. 9.
[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.
[HTML] target 속성의 사용 target 속성 참고 사이트https://m.blog.naver.com/wolfre/220319783903 target ( _blank, _self, _parent, _top )보통 새로운 웹페이지를 여는 명령어에서 쓰입니다. 속성명이 target 이고 인수가 _blank, _self, _parent,...blog.naver.com속성명이 target 이고 인수가 _blank, _self, _parent, _top  4개 중 하나가 들어감._blank새 윈도우 창을 열어서, 웹페이지를 엽니다. 기존의 창은 그대로 남겨져 있다. _self현재 윈도우창에 그대로, 링크된 웹페이지를 엽니다. ( 현재의 프레임 )  target 속성의 값과 그 의미 target 속성은 주로 태그와 태그에서 사용되며,링크 .. 2024. 7. 1.
[CSS] Shadow DOM 설명 ( pseudo-element ) Shadow DOMpseudo 셀렉터의 사용개발자모드에서 shadow Dom 을 켜준다.input 태그 버튼같은 특정요소 클릭해서 검사해보면#shadow-root 확인할 수 있다.pseudo 속성 확인 해서 각각 스타일링 가능= pseudo-element 를 사용해준다.= -webkit-input-placeholder이런 식으로 사용해서 스타일링 가능 pseudo 셀렉터가 없을 경우= user agent stylesheet 을 확인 input type ="range" 스타일링 예시.shadow dom 깐 상태손잡이는 pseudo 셀렉터가 없어서 스타일링을 할 수 가 없다. user agent stylesheet 을 확인해보기손잡이(thumb) 부분을 클릭한 후user agent stylesheet 부분을.. 2024. 7. 1.
[CSS] Pseudo-element 설명과 Pseudo-class 와 차이 Pseudo-element 특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때 Pseudo-element 셀렉터를 이용4내 안에 있는 특정 부분만 스타일링 하고싶을 때 사용Pseudo-class 와 차이 pseudo-element와 pseudo-class는CSS에서 특정 요소의 부분이나 상태를 선택하고 스타일을 적용하는 데 사용됩니다Pseudo-class (가상 클래스)Pseudo-class는 HTML 요소의 특정 상태나 상황을 선택하는 데 사용됩니다.예를 들어, 마우스를 올렸을 때, 방문한 링크,또는 첫 번째 자식 요소 등 특정 상황에서 스타일을 적용할 수 있습니다.예시::hover: 요소에 마우스를 올렸을 때:focus: 요소가 포커스를 받았을 때 (주로 입력 필드나 버튼):nth-child(n.. 2024. 6. 30.
[CSS] keyframes 속성 사용 @keyframes CSS에서 복잡한 애니메이션을 만들기 위해 사용된다.@keyframes animation-name { from { /* 초기 상태 */ } to { /* 최종 상태 */ }}/* 또는 */@keyframes animation-name { 0% { /* 초기 상태 */ } 100% { /* 최종 상태 */ }} @keyframes 규칙은 애니메이션의 이름과 함께 정의되며,각 단계는 애니메이션의 진행 비율(0%부터 100%까지) 또는 키워드(from, to)를 사용하여 정의할 수 있습니다.애니메이션 속성들 애니메이션을 적용하기 위해 다음과 같은 CSS 속성을 사용합니다..element { animation-name: animation-name; an.. 2024. 6. 30.
728x90

티스토리툴바