HTML & CSS #15 : 미디어 쿼리
접속하는 미디어(device)에 따라 특정 CSS스타일을 사용할 수 있도록 하는 것! 브라우저 창의 너비가 조절될 때마다 화면에 표시되는 column 갯수가 달라지고, 사용하는 디바이스의 크기에 따라 웹사이트의 layout이 바뀌는 것이 그 예시이다. 미디어 쿼리 구문 @media [only|not] 미디어_유형 [and 조건] * [and 조건] 미디어 유형은 all, print, screen, tv, aural, braille, handheld, projection, tty, embossed 가 있다. 미디어 쿼리의 조건 - viewport (가로 너비와 세로 높이) 속성으로는 1. width, height 2. min-width, min-height 3. max-width, max-height 가 ..
2022. 12. 16.
자바스크립트#06 : 객체
배열은 요소에 접근할 때 인덱스를 사용한다. 객체는 키(key)를 사용한다. 객체는 중괄호로 생성하며, 쉼표로 연결하여 입력한다. JSON 형태! 자바에서의 클래스로 이해하면 되겠다. const product = { 제품명 : "7D 건조 망고" , 유형 : "당절임" , 성분 : "망고, 설탕, 메타중아황산나트륨, 치자황색소" , 원산지 : "필리핀" } 여기서 product는 참조변수이며, Map형식과 비슷하다. 키와 값 뒤에 쉼표를 넣어 구분해주었다. 객체 요소에 접근하는 것은 두 가지 방법이 있다. 1. 대괄호[] 사용 : product["제품명"] -> "7D 건조 망고"를 출력. "제품명", "유형", "성분", "원산지"가 배열의 index처럼 사용되는 것이다. 2. 온점 . 사용 : pro..
2022. 12. 16.
