'Web Design' 카테고리의 글 목록

thumbnail 이미지를 짜르지 않고 배경화면의 커버속성을 썸네일에 적용하는 방법 썸네일 이미지 깔끔하게 구현하는 CSS 이미지 썸네일 CSS를 할 때, 크로싱 브라우저만 잘 대응할 수 있다면, 가장 좋은 CSS 설정값은 아래와 같다. position: absolute; z-index: 10; width: 100%; object-fit: cover; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 위와 같이 설정해주는 것이 중앙정렬도 잘하고, 같은 비율(4:3) 내에서 가로와 세로의 비율을 적당하게 잘라주면서 가장 썸네일처럼 보이게 해주는 설정값이다. 배경이미지의 속성이 아니라, 이미지 내에서 위와 같이 적용하면 딱 알맞게 떨어지는데, 위에서 가장 중요한 요소는 바로 Object-fit이다. Object-fit에는 다양한 속성이 있는데, 배..
thumbnail [CSS] 밑줄 표시 이펙트 Underline hover effect See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100% transition: background-size 0.8s color: #000 &.yellow background-image: linear-gradient(transparent 60%, #F8CD07 40%) &:hover background-size: 100% 100% 위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 ..
thumbnail 엔티티 코드(Entity Code) 정리 자주 쓰는 특수문자를 HTML에서 쉽게 사용할 수 있는 방법으로는 &로 열고 엔티티 코드 이름을 적은 뒤에 ;로 닫으면 해당 문자를 사용할 수 있다. 한번 외워두면 다양한 웹페이지를 구성할 때, 매우 쉽게 사용할 수 있으니 자주 쓰는 문자코드는 꼭 외워두는 것이 좋다. 특히 세로 바(Vertical Bar)는 몰라서 못쓰는 경우가 많으니, 영문으로 쓰지 말고 문자로 쓰는 것이 폰트가 달라졌을 경우를 대비하여 중요한 요소라고 할 수 있다. 캐릭터 엔티티 이름 엔티티 번호 기술 & nbsp; & # 160; 줄 바꿈하지 않는 공백을 삽입합니다. & & amp; & # 38; 앰퍼샌드 " & quot; & # 34; 따옴표 © © & # 169; 저작권 기호 ® & reg; & # 174; 등록 된 기호 ™ ..
thumbnail [CSS] 배경이미지 위에 점 패턴 이미지 배경이미지 위에 점 패턴 이미지 제작방법 정리 배경이미지를 훨씬 세련되게 만들어주는 배경이미지 위에 점 패턴 이미지 커버를 씌우는 방법이다. 워드프레스를 할 때는 커버이미지에 기본적인 기능이 있어서 매우 쉽게 구현을 했는데, 티스토리내에서도 다른 배경이미지를 멋있게 표현하고 싶었는데, 관련 기능이 없었다. 있는게 오히려 이상하겠다 싶었다. 예전에 점 패턴과 더불어 다양한 패턴이미지를 저장하고 있었으나, 최근 컴퓨터를 포맷하면서 패턴이미지가 삭제되어 버렸다. 그래서 인터넷에서 관련 점 패턴을 찾아보았으나 찾지 못하고 직접 포토샵으로 픽셀작업을 했다. 점 패턴의 경우, 일부로 Opacity를 별도로 지정해주지 않으면 굉장히 이미지가 이상할 수 있으므로 픽셀 패턴이미지를 만들면서 함께 Opacity를 50% ..