본문 바로가기

전체 글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.
CSS :after, :before 와 ::after, ::before 차이점 ( : ) 와 ( :: ) 차이점 : 은 CSS2에서 사용된 문법이고 :: 은 CSS3에서 사용된 문법이다. CSS2에서는 가상 요소와 가상 클래스 모두 : 를 사용하고 CSS3에서는 가상 요소는 :: 를 사용하고 가상 클래스는 : 를 사용한다. [CSS2] 가상 요소 : :after, :before 가상 클래스 : :focus, :hover [CSS3] 가상 요소 : ::after, ::before 가상 클래스 : :focus, :hover CSS3에서 ::를 사용하는 건 가상클래스와 가상 요소를 명확히 구분하기 위함이지만 : 은 IE8이상부터 사용되고 :: 은 IE9부터 사용되기 때문에 CSS2 문법대로 :afterr :before 계속 사용해도 문제는 없다. 2022. 8. 31.
일러스트레이터 텍스트 드래그 안되는 경우 잘 되다가 갑자기 텍스트에 드래그가 안 되는 경우가 종종 있다. 그런 경우에는 Ctrl + H를 잘못 눌렀을 때로 다시 한번 더 Ctrl + H 누르거나 상단 View메뉴에서 Hide Edges 눌러주면 텍스트에 다시 드래그가 된다. 방법 1 ) Ctrl + H 눌러준다. 방법 2 ) View메뉴 -> Hide Edges 체크한다. 2022. 8. 30.
box-shadow로 그림자 효과 넣기 1. box-shadow? box-shadow는 요소 테두리에 그림자 효과를 주는 속성이다. 그림자는 위치, 흐림 정도, 그림자 확장, 그림자 색상이 조절 가능하다. css에 사용할 때는 {box-shadow : x위치 y위치 blur spread color inset} 순으로 작성하면 되고 x위치와 y위치는 꼭 필수로 넣어야 한다. none : 그림자 효과 없음. x위치 : 그림자가 가로에 위치되며 양수면 오른쪽에, 음수면 왼쪽에 그림자가 생긴다. y위치 : 그림자가 세로에 위치되며 양수면 아래쪽에, 음수면 위쪽에 그림자가 생긴다. blur : 그림자를 흐릿하게 만들며 값이 클수록 더 흐려진다. spread : 양수면 그림자가 확장되고 음수면 축소된다. color : 그림자 색 inset : 그림자가 .. 2022. 8. 30.
display: inline-block 사용시 생기는 틈(공간) 없애는 방법 1. display: inline-block 사용하며 생기는 틈 display: inline-block를 사용해 블록 요소들을 가로 정렬할 수 있다. 이때 float와 다르게 아래와 같이 정렬된 요소 사이에 틈이 생기는 문제가 발생하는데 이에 대한 해결방법을 기록하려 한다. 2. 해결방법 [HTML] 1 2 3 4 [CSS] display: inline-block가 적용된 li의 부모 요소인 ul에 font-size: 0을 적용하면 자식 요소 li 사이에 있는 틈이 사라지게 된다. 만약 자식 요소에 텍스트가 있다면 자식 요소에 꼭 폰트 사이즈를 지정해줘야 텍스트가 정상 출력된다. 3. 결과 화면 2022. 8. 30.

티스토리툴바