수업

1. 강의

1. CSS 추가 설명

• 평상시대로 index.html 이랑 , style.css 파일을 만든다.
• 추가로 reset.css 도 만들어준다.

• 이때까지 해올땐 항상 style.css 에서 모든 초기화 작업을 했었다.

• css reset 사이트 (https://meyerweb.com/eric/tools/css/reset/)

  • 여기 내용을 reset.css 에서 붙여넣고 html에 링크를 걸어준다.
  • 당연히 순서는 style.css 위로

• 이러면 모든 태그가 초기화됨.

---

• 반대로 normalize

• 약간씩 손대서 기본적인걸 대충 유지한거

• 마찬가지로 다 적성해준 사이트(https://necolas.github.io/normalize.css/)가 있다.

• 사용이유

  • 여러 브라우저 간의 오차를 줄이고 버그를 줄이기 위해서

2. CSS 변수

• 익스플로러에선 거의 사용이 안된다고 보면됨
• 기본개념은 어제했던 자바스크립트랑 같음

• 변수 설정은 :root 를 활용

:root{
--black: #18181a;
--purple: #9147ff;
--font-size-40: 40px;}

• 변수를 불러와서 사용할땐 var()을 사용한다.

h1{
background-color: var(--black);
color: var(--purple);
font-size: var(--font-size-40);}

• 잘적용된 모습

  

• 변수를 사용하는 이유

  • 일괄적인 수정작업을 할때 엄청 편함
  • ex) 브랜드컬러
  • 정보가 좀더 직관적임

• 적용 범위 개념

  • 위에서 처럼 :root에 변수를 설정하면 모----든 곳에 다적용되고
  • 특정 태그나 id , class안에서 설정을 하면 그 영역안에서만 적용이 된다.

  #intro {
   		--font-color: blue;
   		--font-size: 50px;}
   #intro p {
  		font-size: var(--font-size);
  		color: var(--font-color);}
   #footer p {
  		font-size: var(--font-size);
  		color: var(--font-color);}

  • 이렇게 intro 영역에서만 변수를 설정하면

    

  • 이래 코드는 나와도 적용이 안될걸 볼수가 있다.

---

3. 자바스크립트

1. 변수

• 변수 이름을 설정할땐 좀 자세히 적어보자 알아보기쉽게,

ex> var mathScoreStudent = 10;     <- 캐멀케이스
    var math_score_student = 10;    <- 스네이크 케이스

• 두번째 단어부터 대문자로 하든가 _을 사용해서 전부 소문자로 작성한다.
• 주의점
  - -은 사용불가 var math-score-student = 100 이런거 불가능
  - 가장 첫글자로 특수문자인 _,$를 사용가능
  - 변수명에 숫자가 들어갈순있지만 가장앞에 나와선안된다.

  >	var apple10; 은 가능
  	 var 10apple; 은 불가능
      
  - 의미가 불분명한 단어보단 그냥 알아볼수잇게 자세히적자
   
   

  ---

  2. 데이터 타입

  
• 데이터 타입(=데이터종류)
  • 원시
    • 문자열 (String)
    • 숫자 (Number)
    • 논리 (Boolean)
    • undefined
    • null
  • 참조
    • 배열 (Array)
    • 함수 (Function)
    • 객체 (Object)
• 원시타입과 참조타입으로 구분됨
• 59분까지

2. 어려웠던점

• 은 없었다.

3. 후기

• 먼가 자바를 하니까 css랑 파이썬이랑 비슷한거같기도하면서 다르고, 혼돈