CSS (10) 썸네일형 리스트형 [#. CSS] object-fit 사용해서 이미지 비율 유지하며 사이즈 맞추기 이미지 업로드를 했는데 해당 영역에 꽉 차게 들어가느라 비율이 깨지는 경우가 발생한다 이때 가장 간단한 방법으로 CSS를 사용해서 비율이 깨지지 않도록 해보자 object-fit 속성 값 contain 콘텐츠의 가로 세로 비율을 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로 세로 비율을 유지하게 되므로, 서로의 가로 세로 비율이 일치하지 않으면 객체가 "레터박스"처럼 됩니다. cover 대체 콘텐츠의 가로 세로 비율을 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로 세로 비율이 일치하지 않으면 객체 일부가 잘려나갑니다. fill 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를.. [#. CSS] Progress Bar Pointer 막대 바에서 특정 수치, 값 위치(포인터) 찍기 Progess bar에서 특정 값 위치를 찍고 싶다 HTML, CSS만 이용해서 구현해 보자 See the Pen Untitled by shab8 (@shab8) on CodePen. 아래는 참고할 만한 Progress Bar 리스트다 https://www.sliderrevolution.com/resources/css-progress-bar/ Awesome CSS Progress Bar Templates You Can Download A CSS progress bar is a great tool. It can display the progress of extended computer operations, like Downloads, Uploads, File transfers, etc. www.slider.. [#. flex] flex-flow, flex-wrap을 사용해서 flex 아이템 줄 바꿈 설정, 한 줄에 div 개수 지정하기 HTML에서 아래와 같은 구조의 영역이 있을 때 한 줄에 2개의 카드 영역만 배치하려고 한다 1 2 3 4 5 와 같은 형태가 되도록 하고자 한다 See the Pen Untitled by shab8 (@shab8) on CodePen. 이때, flex-wrap이나 flex-flow를 사용하면 된다 flex-wrap flex-wrap 속성은 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지 결정하는 속성이다 만약 영역 내에서 벗어나지 못 하게 설정한다면, 동시에 요소의 방향 축(row, column)을 결정할 수 있다 flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reve.. [#. CSS] Canlendar UI(HTML5 + CSS + JS) 달력 UI HTML에서 달력을 구현하기 위해 보기에 깔끔하고 코드도 깔끔한 UI 라이브러리를 서치하게 됐다 ① https://codepen.io/B8bop/pen/GhCAb Calendar Calendar I made for a little project.... codepen.io ⑴ HTML ⑵ CSS body{ background-color: #F5F1E9; } #calendar{ margin-left: auto; margin-right: auto; width: 320px; font-family: 'Lato', sans-serif; } #calendar_weekdays div{ display:inline-block; vertical-align:top; } #calendar_content, #calendar_we.. [#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 디자이너 없이 따로 웹을 만들 때 아무래도 UI 쪽에 어려움이 있다 그럴 때 background라도 그라데이션으로 넣게 되면 어느 정도 디자인적인 부분은 보안할 수 있다고 생각한다 그라데이션 색상 조합을 제공해 주는 사이트가 몇 개 있으니 참고하면 좋다 uigradients uigradients.com uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com webgradients webgradients.com/ Free Gradients Collection by itmeo.com Fr.. [#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image 이미지 위에 텍스트를 올리고 싶은데 position: absolute는 쓰기 싫다 간단하게 이미지 위에 텍스트를 올려보자 ① HTML Title Content ② CSS .background-wrap { background-image: url('https://image.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg'); background-size: 272px 196px; width: 272px; height: 196px; display: flex; justify-content: center; align-items: center; } .content { display: flex; .. [#. CSS] 반응형 웹 모바일, 태블릿 디바이스별 CSS 적용하기 미디어 쿼리 media query 반응형 웹을 구현하기 위한 미디어 쿼리(모바일, 태블릿 기기 기준 px) /* 아이폰 SE */ @media only screen and (min-device-width : 320px) and (max-device-width : 374px) { } /* 스마트폰 모바일(세로) */ @media only screen and (min-device-width : 375px) and (max-device-width : 479px) { } /* 스마트폰 모바일(가로) */ @media only screen and (min-device-width : 480px) and (max-device-width : 767px) { } /* 태블릿, 아이패드 */ @media only screen and (min-device-.. [#CSS] iframe 유튜브 영상 첨부 시 비율에 따라 크기 조절하기 유튜브 영상을 첨부하려고 하는데 반응형으로 영상 프레임 크기가 늘어났다, 줄어들었다 했으면 좋겠다 js를 쓰지 않고 css만 이용해서 설정해보자 html iframe width, height 비율 설정하기(with shab) css .video-list ul li { position: relative; padding-bottom: 55%; overflow: hidden; } .video-list ul li iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 기기 혹은 웹에 따라 자동으로 크기가 비율로 조절된다 이전 1 2 다음
