주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..

글 작성 당시 웹, 모바일 모두 해당하는 사항이었습니다. 이게 정상적인 모습인데, 사파리에서만 확인이 되는 부분이었습니다. 아래와 같이 라운드처리가 된 부분이 가려지지 않고 튀어나와있습니다. border-radius가 적용된 부분이 overflow:hidden이 안되는 모습입니다. css 적용 사항입니다. 첫번째로 든 의심은 특정 가상 선택자의 버그인가 생각이 들어서 :before -> :after로 변경해봤습니다. (X) 하위 엘리먼트의 가상선택자로도 변경해봤습니다. (X) 두번째는 가상선택자 버그인가 싶어서 태그로 변경했습니다. (X) 세번째는 border-radius를 다른 객체들에게도 줘봤습니다. (X) 네번째로 position:absolute를 relative로 변경했습니다.(X) 결론은 모두 ..

CSS3 란 (Cascading Style Sheets) 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. 최신버전의 CSS 이며 기존 CSS2.1에서 부족한 부분을 보완하고 개선한 버전이다. [ 예시 ] css3 장점 - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있다. 다중 컬럼 레이아웃(Multiple column layout) 컬럼 갯수 정의하여 다수의 컬럼(세로단)에 텍스트를 배치할 수 있다. column-count 컬럼의 갯수를 직접 지정. 컬럼의 너비는 컬럼 갯수 기반으로 자동으로 결정(table) column-width 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록한다. colu..

CSS를 이용해 객체 가운데 위치하기! 객체를 가운데에 두는 방법에는 여러 개가 있다. calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외) 조건은 부모 객체의 가운데에 위치시키기다. HTML CSS.wrapper{ position:relative; width:400px; height:400px; background-color:#cacaca;}.popup{ position:absolute; top:50%; left:50%; margin-top:-75px; margin-left:-75px; width:150px; height:150px; background-color:pink;} 이런 식으로 영역의 50%를 top, left 내..