PNG vs SVG
고품질 디지털 로고와 그래픽 작업을 한다면 PNG나 SVG 파일로 저장하는 것이 좋다. 모두 크게 확대해도 해상도가 저하되지 않는 다용도 파일 포맷이기 때문이다.
PNG 파일
PNG(Portable Network Graphics)는 래스터 기반의 파일이다. 고해상도, 무손실 압축 등 그래픽, 로고 도표 등을 선호하는 포맷이다.
PNG 파일은 크기가 매우 크기 떄문에 온라인 사진에는 적합하지 않다.
SVG 파일
SVG(Scalable Vector Graphics)는 로고와 그래픽에 적합하다.목적에 맞게 확대하거나 축소할 수 있기 때문이다. 구글과 같은 검색 엔진이 SVG의 XML 프로그래밍 언어를 인식하여 SEO(검색 엔진 최적화)와 웹 사이트 순위 향상에 도움을 주기에 웹 디자인용으로 자주 이용된다.
PNG파일과 SVG 파일의 차이점
래스터 vs 벡터
PNG는 래스터 파일 유형이고 SVG는 벡터 파일 유형이다.
PNG는 픽셀 기반의 래스터 이미지 포맷이다. 래스터 이미지를 너무 확대하면 입자가 거칠어지는 픽셀화 현상이 나타나거나 너무 축소하면 이미지가 희미해진다.
SVG는 벡터 기반의 파일 포맷이기 떄문에 크기를 변경해도 해상도가 저하되지 않는다.
<a>태그 밑줄없애기, 색상 변경하기
style="text-decoration=none"
block요소와 inline요소 가운데 정렬하는 방법
이미지 사이즈 맞추기
CSS Unit
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위
- vm : viewport width, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환.
- vh : viewport height, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환.
만약, 현재 스크린 크기가 height = 1000px, width = 800px 이라면
1vh = 10px / 1vw = 8px 이 될 것이고
height:50vh;
width:25vw;
로 설정한다면
height => 500px
width => 200px
vh 와 vw는 열려 있는 화면 전체의 상대 길이이기 떄문에 스크롤바를 포함한 길이를 반환한다.
반면에 %는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 변환한다.
또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환한다.
position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.
translate3d() 메소드
translate3d() 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동시킵니다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다.
http://www.tcpschool.com/css/css3_transform_3Dtransform
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
| 속성 | 설명 |
| auto | 원래 배경 이미지 크기만큼 표시(기본 값) |
| contain | 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 |
| cover | 지정한 요소를 다 덮도록 배경이미지를 확대/축소 |
| 크기 값 | 너비 값과 높이 값을 지정 |
| 백분율 | 지정한 요소를 기준으로 백분율 값을 지정 |
'TIL' 카테고리의 다른 글
| Day54(웹페이지 제작과정,<aside>,<nav>) (0) | 2023.03.30 |
|---|---|
| Day53(position-absolute,) (0) | 2023.03.29 |
| Day51(HTML,CSS) (0) | 2023.03.27 |
| Day50 CSS (0) | 2023.03.26 |
| Day49(HTML) (0) | 2023.03.26 |
