본문 바로가기

분류 전체보기57

이미지 파일 형식 PNG, JPG, GIF 장단점 및 차이점 디자인 작업을 하다 보면 어떤 이미지 파일 형식으로 저장하는 게 좋을지 고민할 때가 종종 있다. 이미지 파일 형식에 대한 지식은 기본적인 부분이므로 이번에 PNG, JPG, GIF에 대해 정리해 보았다. 1. PNG PNG는 GIF의 저작권 문제를 해결하기 위해 개발된 것으로 비손실 압축방식을 이용한다. 비손실 압축방식이란 말 그래도 데이터 손실 없이 압축되는 것으로 선명한 화질을 나타낼 수 있는 장점이 있으나 GIF, JPG에 비해 큰 용량을 차지하는 단점이 있다. PNG는 8비트 알파 채널을 이용한 투명층을 제공하며 반투명도 지원한다. 2. JPG, JPEG JPG는 JPEG 위원회에서 개발된 이미지 파일 형식으로 손실 압축방식을 이용한다. 즉, 이미지를 압축할 때 원본이 훼손되는 것으로 이미지 품질.. 2022. 9. 5.
그라디언트 CSS 소스 만들어주는 사이트 CSS를 이용해서 그라디언트 효과를 나타낼 수 있다. 하지만 포토샵만큼 정교하게 원하는 그라디언트 디자인을 구현하기 쉽지 않아 보통은 그라디언트 이미지를 사용했다. 그런데 이번에 원하는 디자인으로 그라디언트 CSS 소스가 자동 생성되는 유용한 사이트를 알게 기록해 두려 한다. * 사이트명을 클릭하면 해당 페이지로 이동합니다. CSS Gradient 사이트 CSS Gradient 사이트는 색상 추가가 자유롭고 다양한 효과가 바로바로 적용되기 때문에 쉽고 빠르게 그라디언트 CSS를 만들 수 있다. 원하는 그라디언트 디자인이 완성되었다면 하단에 CSS 코드만 복사해 넣어주면 자신이 만든 그라디언트 디자인이 적용된다. 2022. 9. 2.
블록 요소와 인라인 요소 차이점 1. 블록 요소와 인라인 요소 [블록 요소] 블록 요소는 혼자 한 줄을 차지하는 요소로 너비가 100%이다. 즉, 블록 요소의 옆에 다른 요소가 올 수 없는 것을 의미한다. 블록 요소 안에는 텍스트와 인라인 요소가 포함될 수 있으며 다른 블록 요소 또한 포함될 수 있다. 패딩이나 마진 등을 이용해서 크기를 정하려면 블록 요소여야만 가능하다. [인라인 요소] 인라인 요소는 줄을 차지하지 않는 요소로 화면에 차지하는 만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다. 즉, 한 줄에 여러개 인라인 요소가 표시될 수 있다. 인라인 요소 안에는 텍스트와 인라인 요소가 포함될 수 있지만 블록 요소는 포함될 수 없다. 종류 태그 블록 요소 , , ~ , , , , , , , , , 등 인라인 요소 , , .. 2022. 9. 1.
background-size로 배경 이미지 크기 조절하는 방법 1. background-size? 배경 이미지 크기는 background-size로 조절한다. background-size에는 여러 속성이 있어 다양한 크기로 이미지 조절이 가능하다. auto : 배경 이미지의 원본 크기를 유지한다. length : 두 개의 값을 넣으면 첫 번째는 너비, 두 번째는 높이 값이다. 값을 한 개 넣은 경우는 너비 값을 뜻하며, 높이 값은 원본 이미지의 비율에 맞게 자동으로 정해진다. 백분율도 사용이 가능하며 단, 음수는 적용되지 않는다. cover : 배경의 빈 공간이 없도록 이미지 비율에 맞게 확대, 축소된다. 너비와 높이의 비율이 유지되어 이미지가 찌그러지지 않지만 비율 때문에 이미지가 잘리기도 한다. contain : 배경 안에서 이미지가 찌그러지거나 잘리는거 없이 .. 2022. 8. 31.

티스토리툴바