eunyo의 it이야기

[HTML,CSS] 별점 만들기 안녕하세요. 오늘은 html와 css 만으로 별점기능 구현하는 소스에 대해 알아보겠습니다. 우선, 별점 선택이 안되는 동적인 별점 css입니다. 배경이되는 div에 회색 bg 이미지를 깔아준 뒤, span에 별점이 표시되는 빨간색 이미지를 넣어주면 됩니다. [html] [CSS] .rate{background: url(https://aldo814.github.io/jobcloud/html/images/user/star_bg02.png) no-repeat;width: 121px;height: 20px;position: relative;} .rate span{position: absolute;background: url(https://aldo814.github.io/jobcl..

이미지 흑백처리 하기 css를 사용해서 이미지를 흑백처리 할 수 있습니다. 바로 css에서 filter라는 속성을 이용해서 흑백처리를 할 수 있습니다. [css] img {filter: grayscale(100%);} filter:grayscale(100%)을 흑백처리 하고자 하는 img에 넣어주시면 됩니다. 0은 기본이미지이며 100%은 완전한 흑백이미지로 보여집니다.

안녕하세요. 이번 포스팅은 css을 사용해 텍스트가 넘칠때 ...로 말줄임 처리하는 방법에 대해 알아보도록 하겠습니다. 한 줄 말줄임 처리하기 div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } 여러줄 말줄임 처리하기 { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

input checkbox는 바로 css 커스텀이 안됩니다. 그렇기 때문에 label을 이용해 css 커스텀이 필요합니다. 해당 코드는 아래와 같습니다. [html] 체크박스 [css] .check input[type="checkbox"] { -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; width: 20px; height: 20px; cursor: pointer; outline: none !important; border: 1px solid #9999; vertical-align: middle; } .check input[type="checkbox"]::before {..

웹사이트를 제작하다보면 그라데이션 배경이나 버튼을 사용할 때가 있습니다. 이때 사용하면 좋은 사이트입니다. css를 자동으로 생성해주기 때문에 간편하게 사용할 수 있습니다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 그라데이션 방향, 투명도, 색상 모두 지정 가능합니다.

안녕하세요. 요즘 자주 보이는 풀 드롭다운 메뉴입니다. gnb와 햄버거메뉴가 함께 있는 스타일입니다. [html] LOGO 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 메뉴2 메뉴 메뉴2 메뉴2 [css] /* reset css */ html{font-size: 10px} body{font-size: 1.6rem} *{margin: 0;padding: 0;} ul li, ol li{list-style: none;} a{text-decoration: none;color: inherit;} #head..

유튜브 iframe 반응형 css 사용하기 홈페이지를 제작할 때, ifame을 통해 유튜브나 동영상을 불러오는 경우가 많습니다. 그럴 때 그냥 사용하게 되면 모바일이나 테블릿에서 검은 배경이 노출되기 때문에 css를 조정해줘야하는데요. 다음은 ifame을 반응형으로 사용하는 방법에 대해 알아보겠습니다. 우선, 내가 사용할 동영상의 비율을 알아야 합니다. 일반적으로 pc 기준으로 16:9의 비율을 많이 사용합니다. 다음은 16:9의 비율의 해상도입니다. 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 240p 426x240 비율 구하기 다음은 해상도에 따라 비율을 구하는 방법입니다. 16:9일 경..

파일업로드 커스텀 - reset 파일업로드 폼필드는 브라우저마다 디자인도 다르고, 모양새도 보기 좋지 않기때문에 커스텀을 해서 사용합니다. 하지만 다른 input 과는 다르게 css만으로는 커스텀이 불가능하기때문에 js와 함께 사용해주셔야 합니다. 자세한 코드는 아래를 확인해주세요 :) [html] 파일 찾아보기 파일 지우기 [css] /* 파일 업로드 */ .file_wrap{position: relative;} .file_wrap:after{content: '';display: block;clear: both} .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overfl..

[CSS] div 가운데 정렬하기 div와 같은 block형태의 태그는 보통 margin:auto를 사용하여 가운데 정렬을 합니다. 텍스트나 inline-block 같은 경우에는 text-align:center를 사용하여 가운데 정렬을 합니다. 그러면 세로 가운데 정렬은 어떻게 해야할까요? 여러가지 방법을 알려드리겠습니다. 1. line-height와 text-align line-height를 사용한 가로, 세로 가운데 정렬은 div안에 있는 텍스트를 가운데 배치할때 주로 사용됩니다. line-height의 값 : 감싸고 있는 부모태그의 높이값과 동일하게 해주시면 됩니다. text-align의 값 : 가운데 배치를 뜻하는 center로 적용해줍니다. [결과화면] [html] 가운데 정렬 [CSS] div..

CSS flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성입니다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있습니다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있습니다. flexbox의 구성 flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있습니다. flexbox 기본 구조 [html] Item1 Item2 Item3 Item4 [css] .container { display: flex; } flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 됩니다..