ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ja ko ko ko ko ko en ko ko en ko en fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#16 배경이미지 넣는 방법 – 웹 코딩 강좌 | 디자인베이스
홈 웹 코딩 #16 배경이미지 넣는 방법 – 웹 코딩 강좌
웹 디자이너를 위한 웹 코딩 강좌 열여섯 번째 시간입니다.
이번 시간에는 CSS를 활용해서 Background 이미지를 넣는 방법을 알아볼게요. HTML에서 img 태그와 무엇이 다른지도 같이 살펴보며 CSS에서 background 속성을 어떻게 쉽고 효율적으로 넣는지도 알아보도록 할게요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
CSS에서 사용하는 Background와 HTML에서 사용하는 img 태그는 엄연히 다른 개념입니다. Background에 이미지로 활용하는 경우는 말 그대로 배경으로써의 역할입니다. 콘텐츠의 섬네일 이미지로 사용하려면 img 태그를 사용해야 합니다.
background:#004fff url(../img/sample.jpg) no-repeat center/cover; /* Color, Image URL, Repeat, Position, Size 순 */
* 값은 바로 뒤에만 위치할 수 있으며 ‘/’ 문자로 구분해야 합니다. 예를 들면 “center/80%”처럼 사용합니다.
당장에는 복잡해 보일 수가 있습니다. 이걸 풀어서 좀 더 간략하게 쓰는 방법이 있어요.
background-color:#004fff; background-image:url(../img/sample.jpg); background-repeat: no-repeat; background-position: center; Background-size:contain;
좀 더 자세히 알고 싶은 분들은 아래에 있는 링크를 통해서 CSS Background를 공부하는 것을 추천드립니다.
24. 1분 만에 롱쉐도우 만드는 방법 – 일러스트레이터 기초 강좌
#13 프로 디자이너처럼 홀로그래픽 만들기 Mixer Brush – 포토샵 실전 강좌
#12 그라데이션 컬러 사용하는 방법 – 포토샵 기초 강좌
디자이너가 무조건 피해야 할 회사 유형
오너의 마음으로 프로젝트의 A부터 Z까지
인공지능이 채색을 대신 해준다?!
New 맥북 16인치 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.