김민태의 데브캠프 2기 - HTML/CSS 정리

 

이번시간에는 박영웅 강사님의 동영상 강의와 김민태 강사님의 HTML/CSS 강의 내용을 정리해보고자 한다.

 

우선 기술은 목적이 분명한 기술과 넓은 목적을 가진 기술(HTML/CSS/JS)로 나뉜다.

WEB의 개발은 시대에 따라 나눌 수 있는데,

1992년(탄생) -> 2000(Google) -> 2008(ipone) -> 2010(HTML5) -> ing

2000년에 구글은 사람들의 웹사이트 사용을 유도하기위해 인터넷 사용성 개편, 웹 서비스 속도 개선을 진행하였다.

사용성 개편 예시

그렇다면 넓은 목적을 가진 기술에 대해 더 자세히 알아보자.

다음은 강의 내용 중 각 요소를 정리한 내용이다.

 

상태 처리 관점에서 앱 개발을 어떻게 나눌 수 있을까?

이를 알기 위해서는 우선 앱과 웹의 차이를 알아야한다.

앱은 page가 이동하면서 변경된 값을 유지하지만 웹(문서)는 유지하지 않고 JS로 상태를 다룬다.

따라서 웹과 앱으로 나눌 수 있다.

 

이어서 HTML/CSS의 학습 내용이다.

 

우선 이번주는 span, br, img , input 등 HTML에서 제공하는 태그들을 하나 또는 겹쳐서 실행해보면서 나오는 결과값을 확인해보고 있다.

우선  HTML요소는 다음과 같이 구성된다.

 

 

나는 태그를 실행하면 나오는 결과화면이 아닌 강의를 들으면서 이론적으로 중요하다고 생각하는 부분을 작성하고자 한다.

 

1. 기명함수와 익명함수의 차이 

 

2. 메소드

메소드 예시

3. .DOM API 활용 예시

3. 변수 예약어 차이

4. 메소드 체이닝

5. 표기법

6. 표현단위 

px 픽셀
% 상대적 백분율
em 요소의 글꼴 크기
rem 루트요소(html)의 글꼴 크기
vw 뷰포트 가로 너비의 백분율
vh 뷰포트 세로 너비의 백분율

7. 요소 쌓임 순서 

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 stack 제외)
2. 1번 조건이 같을 경우, z -index 속성의 숫자  값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

 

8 질의 응답.

Q. The quick brown fox를 calmelCase로 작성
A. theQuckBrownFox

Q. let fruits = ['Apple', 'Banana', 'Cherry'];
위 데이터를 활용해 'Banana'를 콘솔 출력하시오
A. console.log(fruits[1]);

Q. 불린 데이터(Boolean)에서 거짓을 의미하는 데이터는?
A. false

Q. 값이 의도적으로 비어있음을 의미하는 데이터는?
A. null

Q. {} 데이터의 종류는?
A. Object(객체 데이터)

Q. let obj = {abc:123};
    console.log(obj.xyz); 
    위 코드를 통해 콘솔 출력될 값(데이터)는?
A.  undefined

Q. 값(데이터)을 재할당 할 수없는 변수 선언 키워드는?
A. const

Q. 함수에서 값(데이터)을 반환하기 위해 사용하는 키워드는?
A. return

Q. sum(2,4); 함수 호출에서 2,4는 무엇을 의미하는가?
A. Argument 인수 , 데이터를 의미

Q.  function sum(a,b){
        return a+b;
    }
    함수 선언의 a,b와 같이 함수 호출에서 전달받은 인수를
    함수 내부로 전달하기 위한 변수를 무엇이라 하는가?
A.  매개변수(Parameter)

Q. 이름이 없는 함수를 무엇이라 하는가?
A. 익명 함수

Q. hello 이름의 함수 표현을 작성하고 호출하시오
A. const hello = function(){};
    hello();

Q. const user = {
        getName:function(){}
    }
    getName과 같이, 함수가 할당된 객체 데이터의
    속성(Property)을 무엇이라 하는가?
A. 메소드

Q. 조건이 참(true)인 조건문을 작성하시오
A. if (true){}

Q. 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록
    지시하는 HTML 속성(atttribute)은?
A. defer

Q. <div class="box">Box!</div>
    위 HTML 요소의 내용을 콘솔 출력하시오
A. const content = document.querySelector('.box')
    console.log(content.textContent)

Q. 값(데이터)을 재할당 목적의 변수 선언 키워드는?
A. var, 또는 let(주로 사용)

Q. const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 클릭(Click) 이벤트를 추가해, 
클릭시 'Hello'를 콘솔 출력하시오
A. boxEl.addEventLisner('click',function(){
    console.log('hello')
});

Q. <div>1</div>
    <div>2</div>
    위 2개의 DIV 요소에 JS로 class= "hello"를 추가하시오
A.    const divEls = document.querySelectorAll('div');
    divEls.forEach(function(divEl){
        divEl.classListadd('hello')
    });

Q. 'HEROPY'.split('').reverse().join('');
    위와 같이, 메소드를 이어 작성하는 방법을 무엇이라 하는가?
A. 메소드체이닝

Q. const boxEl = document.querySelector('.box');
    위 코드의 boxEl 요소에 HTML 클래스 속성의 값으로
    'active'가 포함되어 있으면, '포함됨!' 을 콘솔 출력하시오
A. if (boxEl.classList.contains('active') == true){
    console.log("포함됨!")
}