본문 바로가기

HTML&CSS

(17)

반응형 백그라운드 이미지 만들기 반응형 백그라운드 이미지 만들기 css calc 함수 이용해서 반응형 백그라운드 이미지를 만들 수 있습니다. 반응형 백그라운드 이미지를 calc함수를 이용해서 만들기 반응형 배경이미지 만들기 어렵지 않게 해결 반응형 백그라운드 이미지 calc 함수 반응형 백그라운드를 만들어보세. css에서 백그라운드가 들어갈 div 크기를 정해준다. 반응형으로 할거라서 max-width 값을 넣어줌 그리고 height 값은 0으로 해주고 대신 padding-bottom이나 padding-top 값으로 백그라운드 이미지가 들어갈 크기를 비율로 계산해서 넣어준다. padding-bottom : 백그라운드 세로 너비값/가로 너비값*100% 백그라운드 이미지가 들어갈 크기가 가로: 860px 세로: 700px 이므로 paddi..

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) 이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) 이미지 맵은 하나의 이미지에 여러 개의 링크를 걸수 있어요. 여기에서 usemap의 맵이름과 map 태그안의 name의 맵이름은 동일해야 합니다. area shape 맵 모양 area shapge 맵모양은 3가지입니다. 이 세 가지이면 무엇이든지 모양을 만들어 링크할 수 있습니다. rect 사각형 circle 원 poly 다각형 사각형 맵 원모양 맵 다각형 맵 좌표값은 한 방향으로 입력해야 합니다. 헛갈리지 않게 시계방향으로 좌표값을 입력하세요. 이 좌표값들을 알기 위해서는 포토샵에서 이미지를 불러와서 꼭짓점에 커서를 두면 좌표값이 나타납니다. 그러나 이 방법은 시간이 걸리므로 쉽게 좌표값을 알 수 있는 사이트를 이용하면 편합니다. 이미지 맵 좌표값 쉽게 ..

무료 아이콘 사이트 - BEST 8개 사이트🍄 무료 아이콘 폰트 사이트를 소개해드립니다. 개인이나 상업용 무료 아이콘으로 사용할 수 있는 사이트도 있어서 저는 여기에서 무료 아이콘을 다운로드해서 회사 홈페이지에 사용하고 있습니다. 전에는 일러스트에서 직접 폰트를 그려서 png로 저장해서 쓰거나 svg로 저장해서 썼는데요. 지금은 그냥 무료 아이콘 사이트에서 가져옵니다. 깨지지 않는 아이콘으로 svg를 주로 이용합니다. 제가 이용하는 무료 아이콘 사이트입니다.1. 폰트 어썸(font awesome) 가장 많이 알고 계실거예요.가장 활용도가 높은 폰트아이콘 사이트죠.학원에서도 이 아이콘 사이트는 빼놓지 않고 소개할거에요.무료와 유료로 나눠져있습니다. 폰트어썸 - Font Awesome 아이콘 사용법폰트어썸(fontawesome)이용하기 폰트어썸 사용..

이전 1 2 3 4 5 6 다음

티스토리툴바