CSS44 이미지 유형 세 번째 사이트 유형 | 이미지유형2 이번 이미지 타입은 gird 를 이용하여 작업하였습니다. flex박스와 차이점은 div박스를 묶어서 left, right 을 안나누는 차이가 있습니다. 1.HTML 코드 코드 보기 우리의동물사진 우주 최강 귀엽고 깜직한 우리 동물을 보시면 너무 좋아요 얼른 동물사진을 보시는게 제일 좋을것 같아요 포악한곰 세상에가 가장무서운 곰입니다 엄청무서우니 도망가는게 좋겠습니다 여러분은 곰이 얼마나 강하고 무서운지 아세요? 나는 겪.. 페이지이동 페이지이동 페이지이동 페이지이동 페이지이동 셰이크 로트폴라 모스크 세상에가 가장무서운 곰입니다 엄청무서우니 도망가는게 좋겠습니다 여러분은 곰이 얼마나 강하고 무서운지 아세요? 나는 겪.. 페이지이동 페이지이동 페이지이동 페이지이동 페이지이동 셰이.. 2022. 8. 22. 이미지스프라이트 이미지 스프라이트 (image sprite) 이미지 스프라이트란 웹사이트의 로딩 시간을 줄이기 위해, 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말합니다. 이미지 스프라이트 제작 방법 1. 사용하고자 하는 이미지를 일정한 간격, 또는 특정한 간격으로 이미지끼리 겹치지 않도록 배치합니다. 2.배치한 이미지를 하나의 이미지 파일로 저장합니다. .image__sns a { width: 36px; height: 36px; background: #fff; border-radius: 50%; display: block; margin-bottom: 5px; background: url(img/image_bg03_icon.svg) no-repeat; /* background 속성으로 스프라이트 이미지를.. 2022. 8. 22. 백그라운드 background 속성 background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. background 속성 표 속성 설명 작성법 background-color 배경의 색상을 설정합니다. background-color: "색상"; background-color: red; background-color: #000; background-color: rgba(0, 0, 0, 0.5); background-image 배경에 이미지를 설정합니다. background-image: url("이미지 경로"); background-image: url(img/img.svg); background-repeat 배경의 반복을 설정합니다. backgr.. 2022. 8. 22. 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. 검색 이펙트 두번째 검색 이펙트 html 태그, css 속성, javascript 의 메서드 를 검색하여 찾아볼수있습니다. 원본 사이트 보기 원본 소스 보기 1.HTML 코드 HTML에서 js를 동작하기위한 class이름과 input등을 적절히 사용하여 사용자가 알아보기쉽게 표현해야합니다. 코드 보기 indexOf()를 이용하여 CSS 속성 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적.. 2022. 8. 17. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
