👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..

유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기 안녕하세요 TriplexLab 입니다. 오늘은 유튜브(Youtube) 영상 컨텐츠를 16:9비율에 마쳐 반응형으로 만드는 방법에 대해서 살려보도록 하겠습니다. 먼저 유튜브로 가셔서 퍼오고 싶은 영상를 퍼옵니다. 그리고 하단 처럼 수정합니다. ✍️ 유튜브 영상 비율 코드 padding-bottom 계산식은 height / width * 100 입니다. /* 비디오 컨텐츠를 16:9비율에 마쳐 반응형으로 만들기 */ .video {position: relative; margin: 0 auto; max-width: 900px; width: 100%;} .video > div{ width: 100%; padding-bottom: 56.25%;} /* p..

반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..