CSS23 IR효과 IR 효과 img태그가 아닌 방법으로 이미지를 표현할 경우, 이미지가 로딩되지 않을때 나타낼 수 있는 대체 텍스트를 표시할 수 없습니다. 때문에 웹 접근성 향상을 위해 숨김 텍스트를 만들어가상으로 alt태그와 같은 효과를 주는 css 작성 기법입니다. IR 효과를 사용하게 되면, 웹 접근성을 떨어트리지 않으면서도 검색 엔진 최적화로부터 좋은 효과를 볼 수 있습니다. IR효과 방법 .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } /* 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */ .ir_wa { display: block; overflow: hidden; position: rela.. 2022. 8. 22. 애니메이션 애니메이션 효과 01 css이용한 애니메이션 효과입니다. See the Pen CSS Dog by hmm365 (@hmm365) on CodePen. 코드 html pug을 사용해 작성해봤습니다. 코드보기 .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue css 애니메이션 효과입니다. 전부 position을 absolute로 설정한 다음 위치를 맞춥니다. 사실 애니메이션은 대단할건 없습니다... 2022. 8. 18. 미디어쿼리 미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이 (http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,.. 2022. 8. 15. CSS 기본문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 주로 사용합니다. 인라인 스타일시트는 대체로 거의 사용하지 않으나, 우선순위가 가장 높기 때문에 필요한 경우에는 편리하게 사용할 수 있습니다. 참고로, CSS에서의 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리가 기쁘게 하는것들 결과보기 우리가 기쁘게 하는것들 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언.. 2022. 8. 15. 비트맵(Bitmap)과 벡터(Vector) 벡터와 비트맵 방식 차이 이미지를 표현하는 방식으로 비트맵과 벡터 방식이 있습니다. 비트맵을 설명하기 전에 우선 픽셀의 개념부터 알아야 합니다. 1. 픽셀(pixel) Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위. 픽셀은 그림을 나타내는 최소한의 점이며, 이 점 하나에 해당 색의 정보가 담겨져 있습니다. 픽셀 하나하나가 모이면 그림이 되며 이렇게 이미지를 나타내는 방식이 바로 비트맵 방식이 됩니다. 2. 비트맵(Bitmap) 방식 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능하.. 2022. 8. 9. 이전 1 2 3 4 다음 728x90 반응형
