[220518 / Day 12] CSS : filter, white-space / JS : 변수, 데이터 타입, 템플릿 리터럴, 객체

CSS

1. example01.html 

 - 텍스트에 span으로 감싸지 않아도 flex 설정할 수 있음

 

2. example02.html (사진 포트폴리오 만들 때 참고하기!!!!)

 - 브라우저 줄이면 맞춰서 전체가 축소되니까 flex-wrap: wrap 처리

 - flex: 100%; -> 베이시스 백퍼 라는 뜻, 1 1 100% 으로 들어감

 - vertical-align: middle; -> 이미지 사이 공간 부여한 걸 맞춰주려고

 

3. example03.html

 - a 태그는 인라인이라서 따로 설정해주지 않아도 수평 처리

 - flex 주지 않으면 높이 빠져 있음 블록이나 인라인 블록하면 되는데 flex 주면 간단하게 처리 가능

 - aside 태그 : 광고 같은 경우에 쓰고 내용에 쓸거면 없어도 되는 내용에 써야 함 중요한 내용은 x

 - 섹션 태그에 h 태그가 하나라도 있으면 에러는 안남

 - 섹션 안에 메인이 포함될 수는 없음

 - title 에 제목 넣기!

 - column 드랍할 때 flex-wrap 써주기!

 - 미디어 쿼리에 조건 두개면 사이에 and 꼭 붙여주기!

 - flex-wrap: wrap; 해주지 않으면 미디어 쿼리할 때 작아지면 1단이었던 게 2단이 안됨 (단이 내려가야 하니까)

 - flex: 30% = 해주는 이유는 공간에 따라 비율을 맞춰주기 위해 (wrap 과 같이)

 

4. ex2.html

 - filter : 포토샵 작업해오지 않아도 지정한 요소에 따로 설정할 수 있음

 

5. text.html 공백 처리하기 233p

word-break : 단어별(가독성), 철자별로 맞추는 것 화이트 스페이스와는 다름

pre 태그 : 이 태그를 이용하면 모든 공백 다 적용됨, 자유형식유지

 

6. white-space : 공백 처리 속성

 - normal : 자동줄바꿈

 - nowrap : 자동줄바꿈 안됨

 - pre : 자동줄바꿈 안됨, 띄어쓰기 엔터는 적용

 - pre-wrap : 자동줄바꿈, 공백 엔터 적용

 - pre-line : 자동줄바꿈, 엔터 스페이스바 인식 안됨

* nowrap 을 많이 씀, 말줄임표(…더보기) 같은 경우 자동줄바꿈이 되면 안 되기 때문에 text-overflow 를 같이 써서 말줄임표 입력 -> overflow : hidden 하면 넘친 부분 안보임 하지만 말줄임표하고 싶으면 text-overflow : ellipsis 하면 입력 가능

 

 

JS

1. js1.js 문자 코드 64p

- 자바스크립트는 유니코드 문자로 작성, 한글도 가능하지만 안 씀, 영어로 쓸 것

- 대소문자 구별할 것!!!

- 프로그램을 구성하는 최소 단위를 토큰이라고 함. 의미를 가지는 최소한의 문자 덩어리.

- 토큰에 하나씩 공백문자 있어야함 단 산술 연산자 , . : ; {} () [] 는 없어도 됨

- 가독성 높이기 위해 쭉 적는 것보다 한 줄마다 줄바꿈 해주기

- 문장 끝에는 ; 해주기 js 해석하는 엔진에서 자동으로 찍어줘서 안 찍어도 되지만 그래도 해주기

- 문장 여러 개를 중괄호로 감싼 코드를 복합문, 블록문이라고 함

- 주석은 css 랑 똑같은데 단행주소(//)도 있음, 한줄(단행) 주소는 // 여러 줄 주소는 /* */

 

2. 변수 72p

- 변수는 값을 담기 위해 이름 붙힌 상자. 메모리에 일정한 크기의 영역으로 생성.

- 이퀄(=)은 할당 연산자, 이름 등을 할당할 때 이용

- 변수(식별자) 이름 규칙 : 알파벳 숫자  _  $ 사용 / 첫 글자로 숫자x / 예약어(예를 들면 태그)를 변수명으로 사용할 수 없음

 

3. 데이터 타입

데이터 타입은 숫자나 문자열처럼 변수에 저장하는 데이터 종류

- 변수에 타입이 있는 언어를 정적 타입 언어라 함

- 데이터 타입을 동적으로 바꿀 수 있는 언어를 가리켜 동적 타입 언어라 함

 

js 가 처리할 수 있는 데이터 타입은 원시 타입과 객체 타입이 있음

- 원시타입 : 숫자, 문자열, 논리값(참인지 거짓인지), 특수한 값, 심벌(새로 생김)

- 객체 타입 : 참조 타입, 레퍼런스 타입이라고도 함 / 오브젝트, 배열, 어레이, 펑션

 

4. js1.js

- ‘’ “ 따옴표 들어가면 숫자가 들어가도 무조건 문자형 데이터

- typeof : 변수 확인

- +는 산술 연산자로 인식하지 않고 연결 연산자로 인식함 그래서 2022+’2023’ 는 숫자와 문자를 연결해서 문자로 인식하고 2022/’2023’ 은 스트링?으로 인식

- let str1 = '안녕!'2022년; => 이렇게 쓸 수는 없고 연결 연산자 사용해줄 것 -> let str2 = '안녕!'+2022+'년';

- 새로 나온 표기법 : 템플릿 리터럴 / 따옴표 대신 물결 무늬 쪽에 있는 ( ` ` ) 이걸 이용해서

let str1 = '2023';

let str2 = '안녕!'+str1+'년';

/* 템플릿 리터럴 벡틱*/ 88p

let str3 = `안녕하세요 올해는 ${str1} 년입니다`

console.log(str3)

이렇게 만들 수 있음 / 엔터 스페이스바 모두 인식

따옴표에서 줄바꿈 하려면 역슬래쉬n  let str2 = '안녕!'+str1+'역슬래쉬n년';

플레이스 홀더라는 걸 넣을 수 있음 :  ${…} 로 표기, … 부분을 표현식으로 간주하여 평가

 

5. 논리값

- let isOn=true; -> 참이라는 값이 들어간 것 / 참 거짓 값은 boolean 타입이라고 함

- let isOn : 켜져 있는지 확인

 

6. 특수한 값

- 언디파인드는 정의되지 않은 상태, 할당되지 않은 상태, 없는 배열의 요소를 부르려고 했을 때 등

- 널은 아예 빈값

 

7. typeof 연산자 156p 참조

let js1;

console.log(typeof js1)

-> 할당되지 않아서 언디파인드 나옴

let js1=10;

console.log(typeof js1)

-> number 라고 결과가 나옴

 

8. 자바스크립트에서 거짓으로 취급하는 값

=> 0, -0, null, undefinded,NaN, ''”

 

9. 객체 92p

- 객체 오브젝트 : 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모은 것

let user = {

    name: 'kim',

    age: 50,

    address: 'seoul',

    tel: 010

}

-> 이렇게 객체로 넣을 수 있음

-> console.log(user) 이렇게 넣어 주면 { name: 'kim', age: 50, address: 'seoul', tel: '010' } 이렇게 출력

- 객체는 메모리 안에 힙이라는 공간에 저장, 객체는 참조타입이라고 하는데 참조 타입이라는 것은 실제 값은 다른 곳에 있고 거기를 참조하여 꺼내는 것? -> 96p 참고할 것