VScode 단축키 하나 줍줍
F2를 누르면 파일의 이름 수정가능하다 자주 쓰는 거니까 기억해두자
HTML 화면에 background 설정하기
body 선택자로 background에 사진을 적용
적용 확인
사진의 절반이 잘린채로 적용되어있는걸 확인할 수 있다
블록 태그는 가로는 항상 100% 세로는 내용이 없으면 100%가 아니다
그래서 height를 설정해주어야한다
vh : viewport height
vw : viewport width
%로 값을 넣어준다면 부모 값에서 상속받은 값의 %로 설정이되기떄문에
vh로 설정한다
**뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역
높이 설정후 다시확인해본다
margin 과 padding 값이 또 브라우저가 임의로 설정하기때문에 사진을 페이지에 딱맞게 설정하기위해 margin 과 padding을 0으로 설정해야한다.
배경이미지 위치확인하기
배경으로 들어가는 사진의 크기는 background-size로 설정이 가능한데 위에서는 cover로 설정을 해서 페이지에 맞추었다
이번엔 background-size를 변경시켜서 배경이미지 위치를 확인해보았다.
background: center center no-repeat; 일때 화면
background: center center; 일때 화면
background의 디폴트 설정이 no-repeat이기때문에
사진이 반복해서 화면을 채워서 설정이 된다.
이번에는 body 태그 설정을 초기화하고 사진 2개로 페이지의 배경을 만들기위해
(예전에 애플 사이트를 보면서 한페이지에 한배경씩 스크롤되는 디자인을 본적이 있잖아!)
bg1 클래스 , bg2 클래스로 < div > 엘리먼트를 만들었다.
사진 하나당 한페이지 크기로 나뉘어 배경이 설정되었다.
여기서도 div 엘리먼트의 부모가 body이기때문에 높이를 %로 설정하면
body에서 설정된 값을 상속받아 기준이 될것이기 때문에 vh로 설정한다
liner-gradient 사용
추가로 bg3 엘리먼트를 생성하고 linear-gradient 설정을 해주었다
색상은 colorhunt 에서 인기있는색상 조합으로 설정 !
45도 기울어진 그라데이션 배경 설정
