목록📌 Language/CSS (18)

계발하는 개발자

[CSS] 유튜브 영상 iframe(아이프레임) 반응형 넣기

웹페이지에 영상 원본파일을 넣게 되는 경우에 용량으로 인해 github에 push 가 제한되거나 하는 경우가 있기 때문에 되도록이면 iframe을 이용해서 외부 영상을 끌어오는 형태로 삽입하고 있다. 이때 아이프레임 반응형을 위해 넣는 정석같은 코드다. .vid_ifr_inner { position: relative; width: 100%; padding-bottom:52.25% } .vid_ifr_inner iframe { position: absolute; width: 100%; height: 100%; border: none; } 이렇게 넣게 되면 모바일~태블릿 사이즈에 대응하는 반응형 사이즈로 알아서 리사이즈된다.
📌 Language/CSS 2023. 10. 28. 16:16
[CSS] 스크롤바 스타일 커스텀하기

코드 스크롤바 css 커스텀 설정을 위해선 각 아래에 대한 CSS 코드를 추가해주면 된다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 컨텐츠가 클라이언트 높이를 초과했을 때 스크롤바가 생기는 body 요소에 직접 줄 수도 있고, 내가 overflow-y 속성을 준 요소를 지정해서 커스텀 스타일을 입힐 수 있다. body::-webkit-scrollbar { width: 5px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ backgro..
📌 Language/CSS 2023. 10. 16. 15:55
[CSS] css 말줄임(text-overflow: ellipsis)이 적용이 안될 때

아래 같이 화면 줄어듦에 따라 넘치는 텍스트는 ... 으로 처리하고 싶은데 text-overflow: ellipsis 적용이 안될 때의 해결 방법 정리에 관한 글이다. 적용에 앞서, 먼저 체크해봐야 할 부분이 있다. 1. width가 제대로 설정되어 있는지 2. block태그이거나, 혹은 display: block/ inline-block 처리가 되어 있는지(flex는 적용 안됨) 3. 글자가 width를 넘어가는 조건을 충족시켰는지 위 조건들을 모두 만족하는데도 text-overflow: ellipsis 속성 적용이 안된다면 숨기려는 텍스트 요소에 아래 부가적인 속성들을 더 추가해서 해결할 수 있다. p { padding: 4px 0 5px; letter-spacing: -1.5px; font-fami..
📌 Language/CSS 2023. 9. 25. 15:13
[CSS] input type = "range" | 볼륨조절바 만들기

# input type = "range" 란 ? HTML input type="range" W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 우측처럼 범위를 나타내는 슬라이더를 생성하고 싶을 때 input type="range" 를 사용할 수 있다. input 태그의 타입이 "range" 인 경우, min, max, step, value 속성을 사용하여 슬라이더의 범위와 간..
📌 Language/CSS 2023. 6. 5. 01:35
이전 Prev 1 2 3 4 5 Next 다음