평택코딩부트캠프 8일차

오늘 배운 것

1. 반응형 웹

웹 페이지 하나로도 데스크톱, 태블릿 pc, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지.

장점 : 개발 효율성, 유지 보수 용이

미디어 쿼리(media query)를 사용해 개발.
meta 태그는 웹 페이지에 추가 정보를 제공할 때 사용.
viewport meta 태그 - name 속성에 viewpoint가 입력 된 태그를 viewport meta 태그라고 함

meta tag 내의 content 속성값 설정

meta 태그 속성	설정값
width	너비
height	높이
initial-scale	초기 확대 비율
user-scalable	확대 및 축소 가능 여부
minimum-scale	최소 축소 비율
maximum-scale	최대 확대 비율
target-densitydpi	DPI 지정

dpi는 무엇이냐..?
실제 인쇄물 크기 1인치 당 점이 몇 개 들어가는가를 나타낸다.
높을수록 사진이 선명해진다. 고화질이 된다는 느낌?

❗️돌발 Quiz

Q1.portrait ? 화면이 좀 좁을때? 적용됨.
Q2.landscape ? 화면이 넓을 때 적용됨.

        <style>
            @media screen and (orientation: portrait) {
                body {
                    background-color: tomato;
                }
            }
            @media screen and (orientation: landscape) {
                body {
                    background-color: teal;
                }
            }
        </style>

오늘의 실습과제

https://imgur.com/a/zFwpJmv

---

오늘의 Quiz

html

• Q1. 반응형 웹 페이지는 ()를 사용해 개발합니다.? media query
• Q2. () 태그는 웹 페이지에 추가 정보를 제공할 때 사용하는 태그입니다. ? meta
• Q3.name 속성에 viewport가 입력되어 있는 meta 태그를 ( ) 태그라고 합니다. ? viewport meta
• Q4.()이란 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용합니다. ? @
• Q5.다음 중 @-규칙으로 알맞지 않은 것은? 4
  ① @import ② @font-face
  ③ @media ④ @scale
• Q6. 미디어 쿼리는 “link 태그의 media 속성” 또는 “style 태그 내부의 @media 규칙”에 입력할 수 있습니다. ? O

---

• Q. break ?
• Q. 프론트엔드에는 저장 공간이 있나요 ?

---

javascript

• Q1.문장 마지막에 () 또는 (줄바꿈) 을 넣어 종결을 나타냅니다. ? 세미콜론
• Q2. ()는 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어입니다. ? keyword
• Q3.()는 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어입니다. ? 식별자
• Q4.()은 문자 집합을 의미합니다. ? 문자열
• Q5. ()은 참과 거짓을 표현할 때 사용하는 자료입니다 ? bool
• Q6. ()는 값을 저장할 때 사용하는 식별자입니다. ? 변수
• Q7.변수를 만드는 것을 ‘변수를 ()한다’고 표현합니다. ?선언