[엘리스 AI 트랙 2기] Day 15 - 모바일 웹페이지

모바일의 meta 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

꼭 필요한 태그긴 하지만 어차피 vscode에서 html:5 엔터 하면 바로 써줘서 굳이 꼬박꼬박 외울 필요는 없을 것 같다.

position속성 비교

• static(디폴트) : 2차원 속성이다. 자식과 상호작용 없다.
• fixed: 3차원 속성이다. 사이드 메뉴, 헤더 등에 쓰인다.
• relative: 자신의 위치를 기준으로 움직인다.
• absolute: 부모의 상태(static이냐 relative냐)가 영향을 준다.

background-size

배경 이미지를 삽입할 때, 프레임을 꽉 채워 넣을지, 아니면 사진이 다 나오게 넣을지 하는 속성이다.

• contain: 이미지 유지
• cover: 여백없이 꽉 커버하게

background-attachment

• scroll: 내용을 스크롤해도 안 따라온다.
• fixed: position의 fixed처럼 화면에 고정되어 쭈욱 따라온다.