[TIL] 2022년 2월 2주차

 

• 코드는 깃헙에 올리므로 여기서는 공부한 내용을 요약하는 식으로 정리합니다. 

 

 

 

2월 7일

• css 
• 학원 수업을 듣는 동안 방치했던 깃과 블로그를 다시 활성화
• 네이버 부스트코스 풀스택웹개발 실습과제 시작

 

 

2월 8일

• css [table/image/audio/video/position/min/max/width/overflow/meadiaquery] 를 공부했다.
• 기억해둘 것
  • 1. 테이블 자체의 위치를 이동시키고자 할 때는 테이블을 div 태그로 감싸고 margin 을 이용한다.
  • 2. 테이블을 만들 때 th는 text-align 하지 않아도 자동 가운데정렬이다.
  • 3. text-align 의 정렬 기준은 가로이고, vertical-align 의 정렬기준은 세로이다.
  • 4. thead 태그와  tfoot 태그는 한 테이블에서 한번만 사용해야하고,  thead 태그는 주로 표의 타이틀 용도로, tfoot 태그는 주로 표의 마지막에 요약데이터나 총계등을 보여줄 때 사용한다.
  • 5. tbody 태그는 코드에 없을때가 있지만 스타일태그에서 태그를 타고 들어갈때 tbody 태그를 생략하면 안된다. (정확한 위치를 찾고자 할때는 F12에서 소스-...-복사-selector복사 를 하자)
  • 6. 연속으로 이미지 삽입시 스타일의 float 태그를 조정하면 float 이어서 이미지들이 딱 붙어서 나온다. 그럴때는 padding 혹은 margin 을 이용하거나 clear: both; 를 하면 가로로 놓이던 사진이 세로로 놓인다.

 

 

2월 9일

• 그동안 배웠던 html 과 css 를 활용해 여러 홈페이지를 만들어보며 복습, 이로써 html 과 css 공부를 마쳤다.
• 내일 javascript 를 시작한다.

 

 

2월 10일

• javascript 공부를 시작했다. 너무 예전에 공부해서 잘 기억이 안나는데 자바스크립트는 중요하다. 이번에도 열심히하자.
• 기억해둘 것
  • 1. script 태그의 위치는 head 태그 안, body 태그 안, 외부경로 .js 파일이 될 수 있다.
  • 2. innerHTML, innerText 로 태그속에 결과물을 넣어 줄 수 있다.
  • 3. document.write() 메소드는 다른 모든 html 내용물을 삭제한 후 () 속에 들어있는 것만 화면에 띄운다.
  • 4. 경고창을 띄우는 alert(), 결과물을 콘솔창에 띄우는 console.log() 메소드를 익혔다.
  • 5. javascript 는 위에서부터 순서대로 읽어나가기 때문에 사용하고자하는 변수, 함수 등을 먼저 적고 그 다음에 호출해야 작동한다. 하지만 window.onload() 메소드를 이용하면 어디에 위치하든지 웹브라우저에 페이지 로딩이 끝난 후 이벤트를 발생시킨다.
  • 6. javascript 의 변수는 var, const, let 이 있고 const 와 let 은 ECMAScript 6 에서 추가된 내용이다.
    
    • var : 반복선언 O, 선언과 할당 분리 O
    • const : 반복 선언 및 할당 X(그래서 주로 변하지 않는 상수값을 선언할 때 쓴다), 선언과 할당 분리 X, java 의 지역변수같은 특징을 갖는다(지역성)
    • let : 반복선언 X, 선언과 할당 분리 O,  java 의 지역변수같은 특징을 갖는다(지역성)
    • 그리고 const 와 let 은 같은 변수명을 사용할 수 없다

 

 

2월 11일

• javascript [typeof(), ]
• 기억해둘 것
  • 1. 숫자도 기본적으로 string 타입이어서 사칙연산을 할때는 number 타입으로 바꿀때는 parseInt(), parseFloat() 혹은 Number() 메소드를 이용해 number 타입으로 바꿔준다.
  • 2. innerHTML 와 innerText 의 차이 => 사용법은 같지만 innerHTML 은 불러올때와 입력할때 html태그까지 다 가져오거나 입력시킬수 있다는 것이다.
  • 3. javascript 에서 문자열값 비교는 == 를 사용한다. (java 는 .equals() 였다)
  • 4. 할당하지 않은 변수의 타입은 undefined 이다.
  • 5. 객체는 {} 로 표현하고, 객체명.속성명 = 값; 혹은 객체명["속성명"] = 값; 으로 값을 할당한다.
  • 6. 함수는 function 함수명(파라미터..) {} 로 표현하고, 이 함수를 변수에 넣는 것도 가능한 것이 특이점이다. 그래서 나중에 호출할 때 굳이 함수명이 아니더라도 변수명으로도 호출이 가능하다.
  • 7. 람다로도 함수를 표현할 수 있다. ex) const func_1 = (num1, num2) => {여기에 함수로직을 넣는다}; 
  • 8. javascript 에서 긴 내용의 문자열(문자열 틀)을 표현할 때는 쌍따옴표보다 '백틱' 을 적극 활용하자. 비교적 간단히 만들 수 있다.
  • 9. replace() 메소드는 모든 값을 대체하는 것이 아니라 첫번째로 동일한 값만 대체하는 것이다.
  • 10. 모든 값 대체는 정규표현식 /문자열/gi 로 표현한다. (global insensitive)
  • 11. 엘리먼트를 잡는 방법은 6가지이다.
    • 리턴타입이 객체(object) 배열인 getElementsByTagName(), getElementsByClassName(), getElementsByName()
    • id 속성값은 겹칠 수 없으므로 리턴타입이 객체(object) 인 getElementById() (s가 없는 단수이다)
    • 태그를 여러개 잡는 querySelecterAll(),  단일 태그만 잡는 querySelector() 

 

 

2월 12-13일

• 밀렸던 복습과 부캠과제를 하며 한주를 마무리했다.