Media Query
: 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용할 수 있게 하는 기술
- 형식
@media <not|only> <media type> and (<media feature>)
<and|or|not> (<media feature>){
/* CSS 코드; */
}- media type : all | print | screen | speech
- media feature : min-width, max-width, orientation portrait(세로모드), orientation landscape(가로모드)
ex.
@media screen and (max-width: 700px) {
.container {
width: 100%;
}
}
@media screen and (max-width: 550px) {
.aside {
width: 100%;
height: 200px;
}
.item1,
.item3 {
width: 33.3%;
}
.item2 {
width: 33.4%;
}
}
@media screen and (max-width: 400px) {
.item1,
.item2,
.item3 {
width: 100%;
}
}+++ inline-block 일때 여백 생기는 것 해결
1. html 요소 뒤에 들어가는 엔터 제거
<div class="container">
<div class="box item7"></div><div class="box item8"></div><div class="box item9"></div><div class="box item10"></div></div>- 부모 요소의 텍스트 서식 조정
(부모 요소에서 폰트 크기를 0으로 처리했기에 하부의 자식 요소에 텍스트가 들어가야 한다면 반드시 폰트 크기를 재정의해줘야 함.)
출처 : CSS inline-block 여백, 틈 없애는 방법 (빈 공간 제거)
.container {
font-size: 0;
}javaScript
- html과 javaScript 파일 연결하기
- 내부 스크립트 - html안에 script 태그 안에 작성
- 외부 스크립트 - 별도의 js 파일을 만들어서 script 태그로 연결
*** script 태그는 body 태그가 끝나기 전에 사용하는 것이 좋음
- 자바스크립트는 인터프리터 방식이기 때문에 코드를 한줄씩 실행. 만약 오류가 발생하면 오류가 발생한 코드 라인 번호를 콘솔창에 띄우고 멈춘다
let, var, const의 차이점
- var은 변수를 한번 더 선언해도 오류 발생하지 X
- const는 자바로 치면 static final (상수)
- let은 변수명 중복이 불가능하고 호이스팅 불가, but 재할당 가능
- const는 재선언, 재할당 불가능
- 호이스팅(Hoisting) : 변수를 선언하고 할당할 때, 변수 선언을 자바스크립트의 스코프 맨 위로 올려 실행
- const와 let은 블럭 범위, var은 전역 범위 or 함수 범위이다
자료형의 종류
- 문자열
- 숫자형
- 논리형 (true, false)
- undefined
- null
- 배열
- 객체
1. 문자열
let str = "문자열";
let str1 = '문자열';
let str3 = "문자열 중에 '작은 따옴표'를 출력";
let str4 = '문자열 중에 "큰 따옴표"를 출력';
// +로 문자열 연결
let str5 = "문자열 '작은' " + ' "큰 따옴표" 만들어놓고';
// 이스케이프 문자
let str6 = "문자열 '작은' \"큰 따옴표\" 만들어놓고";
let str7 = '문자열 \'작은\' \'작은 따옴표\' 만들어놓고';
// 백틱으로 감싸기
let str8 = `백틱으로 감싼 문자열 "큰따옴표" '작은따옴표'`;
let s1 = "대한민국";
let s2 = "OO시";
let s3 = "교육실";
console.log(s1 + " 서울 " + s2 + " GG " + s3);
console.log(`${s1} 서울 ${s2} GG ${s3}`);
2. 숫자형
- 형 변환을 신경쓰지 않고 해도 됨
let num1 = 10;
let num2 = 20.5;
console.log(num1 + num2); => 30.53. undefined, null
- undefined : 변수에 아무런 값도 할당되지 않는 상태를 나타내는 값
- null : 변수를 의도적으로 비워두기 위해 사용하는 값
4. 배열 (Array)
: 복수의 데이터를 정의할 수 있는 자료형
let testArr = ["안", '녕', 3, null];
console.log(testArr[0]); // 안5. 객체 (Object)
- 키와 값의 한쌍으로 이루어짐
- 배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형
- 객체 안에 객체, 객체 안에 배열이 들어갈 수도 있음
let testObj = {
test1 : 'hello',
test2 : 2,
test3 : ['안', "녕", '하세요'],
test4 : {
in1 : null,
in2 : "hello",
in3 : 3
}
};비교 연산자
x == y : x와 y의 값이 같으면 true를 반환
x === y : x와 y의 값과 자료형이 같으면 true를 반환
x = y : 대입 연산자암시적 형 변환과 명시적 형 변환
let num100 = 100;
let str100 = '100';
// 암시적 형 변환
console.log(num100 + str100); // 100100
// 명시적 형 변환
console.log(num100.toString());
console.log(String(num100));
console.log(Number(str100));for..in과 for..of의 차이
- for...in : 객체와 배열 둘 다 사용 가능
// 배열에서의 for...in => 인덱스 뽑아서 사용
// 배열의 순서대로 접근하는 것을 보장하지 않으므로 코드를 작성할 때 주의할 것
let arr = ['가', '나', '다', '라'];
for (let idx in arr) {
console.log(idx + " " + arr[idx]);
}
// 객체에서의 for...in => 내부에 있는 키값을 뽑아서 사용
let person = {
name: '내이름',
age: 30,
phone: '010010'
}
for (let key in person) {
console.log(key + " " + person[key]);
}
결과
0 가
1 나
2 다
3 라
name 내이름
age 30
phone 010010- for...of : 배열에서만 사용 가능
// 배열에서의 for...of => 실제 value 자체를 뽑아서 사용
for (let val of arr) {
console.log(val);
}
결과
가
나
다
라+++ 참고
[JavaScript] for...in 과 for...of 의 차이점
함수를 정의하는 방법
- 함수 선언문으로 함수 정의
function gugudan3() {
for (let i = 1; i <= 9; i++) {
console.log(`3 * ${i} = ${3 * i}`);
}
}
gugudan3(); // 호출- 함수 표현식으로 함수 정의
2-1. 익명 함수
const funcGuGu5 = function () {
for (let i = 1; i <= 9; i++) {
console.log(`5 * ${i} = ${5 * i}`);
}
}
funcGuGu5(); // 호출
2-2. 네이밍 함수
const funcGuGu4 = function gugudan4() {
for (let i = 1; i <= 9; i++) {
console.log(`4 * ${i} = ${4 * i}`);
}
}
funcGuGu4(); // 호출- 화살표 함수 : 익명 함수로만 정의 가능! ES6에서 추가된 함수 정의 방법
const funcGuGu6 = () => {
for (let i = 1; i <= 9; i++) {
console.log(`6 * ${i} = ${6 * i}`);
}
}
funcGuGu6();
안녕하세요!