[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 수행

10제주코딩베이스캠프 로고

멋쟁이사자처럼에서 진행하는 프론트엔드 스쿨은 제주코딩베이스캠프과 함께한다.

*제주코딩베이스캠프 : 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 및 지자체와 함께 진행하고 있는 무료 캠프. 다양한 교육 플랫폼에서 50여개의 동영상 강좌를 제공하고 있음

 

멋쟁이사자처럼에서 제공한 강의도 제주코딩베이스캠프의 강의다.

2차 영상 과제 및 기초 프로그래밍 테스트 진행 시 필수적으로 제공된 3개의 유튜브 강의들 수강해야 한다.

 

이번에는 각각의 JavaScript 강의를 보고 과제를 수행 기록을 남겨본다. (06.08.목 ~ 06.12.월)

 

1.  제주코딩베이스캠프 JavaScript 요약 강의 수강 및 요약

1-0. 기초 프로그래밍 테스트 정보

• 테스트 목적: 예비 훈련생의 지식 수준 판단
• 문항 수 : 10문항 (변동 가능)
• 제한 시간 : 30분

1-1. JavaScript 1부 정리

• 수업환경 about:blank 와 VSCode(Live Server)
• 내용정리
  • HTML 은 콘텐츠와 골격, CSS는 웹페이지의 레이아웃, Javascript 는 웹페이지 동작
  • JS 삽입 위치는 보통 바디(body)의 맨 끝
  • JavaScript 출력 4가지 방법 : 문서 내 요소 선택 후 innerHTML, alert(), confirm(), console.log()
  • 코드 구조
  • 변수 : var, let, const
  • 연산자 : 산술 연산자, 할당 연산자, 논리 연산자, 비교 연산자, 단항 산술 연산자,
                   nullish 병합 연산자, typeof 연산자, 프로퍼티 접근 연산자, 관계 연산자
  • % : 나머지
  • 단락 회로 평가 : 앞에 값이 null 이냐를 확인하고 싶은 경우 쓰는 평가 (> nullish)
  • result1 = 10 || 100; OR는 앞이 참이면 볼 것도 없이 참이므로 result1=10
    OR(||) 는 앞에 값이 있으면 그 값이 변수에 들어가고, 없으면 뒷 값이 들어감
  • result2 = 0 && 100; AND는 앞이 거짓이면 볼 것도 없이 거짓이므로 result2=0
    AND(&&) 는 앞에 값이 없으면 그 값이 변수에 들어가고, 있으면 뒷 값이 들어감
  • 변수형
    > 원시타입(primitive types) : number, string, boolean, null, undefined, symbol
    > 변수형의 참조타입(reference types) : object (object, array, map, set), function
    > 숫자 (number) : 0, 10, Math.PI, NaN, Infinity, -Infinity, etc.
    > 문자열 (string)
• 예상 문제
  • HTML 코드에 외부 JS 파일(test.js)을 추가하세요. // body 마지막 줄 <script src="./test.js"></script>
  • (중요) 1 ~ 100 사이의 숫자 중 3과 5 의 나누었을 때 떨어지는 수(공배수)를 출력하세요.
  • True 인가 False 인가 : !!'', !!0, !!1, !!{}, !![] // false, false, true, true, true
  • username = 'hojun';
    result1 = username || '유저 이름이 없습니다';
    result1 의 값은?                            // 'hojun'
  • username = 'undefined';
    result2 = username || '유저 이름이 없습니다';
    result2 의 값은?                            // '유저 이름이 없습니다.'
  • let result1;
    let result2 = result1 ?? 100;
    result2 의 값은?                            // 단란 회로 평가 result2 = undefined
  • let x='1000' 선언되어 있는 x의 타입을 출력하세요.    // string
  • 10 in [10, 20, 30]               // false
    1 in [10, 20, 30]                 // true
    1 in 'hello'                          // error
    'name' in {'name':'hojun', 'age':10}   //true
    'length' in [10, 20, 30];                     // true
  • '10asdsdfsf' 로부터 숫자만 Int 형으로 변환 // parseInt('10asdsdfsf')

1-2. JavaScript 2부 정리

• 내용 정리
  • string (문자열) : 'abcd', "abcd", `abcd`, abcd$(변수명)`
  • 템플릿 리터럴 문법(Template Literal) : console.log(`제 이름은 ${abac} 입니다`)
  • 리터럴 (Literal) : 직접 기술한 값. 변수의 반대 의미. 10은 정수형 리터럴, 'abcd'는 문자열 리터럴
  • 문자열 메서드 : String(), str.length, str.slice(), str.replace(), str.repeat()
  • 논리값 (Boolean) : true, false, !!
  • undefined
  • null : object type
  • Array : object type, 배열 인덱싱(호출), Array(), arr.length, arr.forEach(콜백함수), arr.map()
  • Object : 키(Key)와 값(Value)의 쌍으로 이루어진 자료형, 객체 인덱싱(호출)
    새로운 문법 let x=1, y=2, z=3; let object = {x,y,z} // {x:1, y:2, z:3}
  • (중요) Object 메서드 : Object.keys(오브젝트명), Object.values(오브젝트명), Object.entries(오브젝트명)
    * 다른 자료형과 달리 자료형명인 Object 를 앞에 붙여야함
  • Map : Explorer 브라우저에서 지원 안됨. Object 메서드를 자유롭게 쓰게 위해 만든 자료형.
  • Map 메서드 : let map = new Map(); map.set('key', value), map.get('key'), map.delete('key'), map.has('key'), map.size
  • Set : 중복을 허용하지 않는다. 합집합, 교집합, 차집합을 구현하기 위해 Set 을 사용하는 경우가 많음
  • Set 메서드 : set.add(value), set.delete('key'), set.has(value), set.size
  • 조건문 If 문, 삼항연산자, Switch 문
  • 반복문 for 문 ( 조건이 없으면 무한 반복 for(;;))
  • for of 문 : 객체의 요소들을 순회함
  • for in 문  : 객체의 key 값만 순회함
  • while 문 : 무한루프 주의
  • forEach 문
  • break : 반복문 탈출
    continue : 다음 루프로 넘어간다
  • 함수 : 파선아실(파라미터(매개변수) 선언할 떄, 아규먼트(전달인자) 실제 사용하는 값)
    함수 선언식 (호이스팅 O) : function add(x,y) { return x+y; }
    함수 표현식 (호이스팅 X) : let add2 = function(x,y) { return x+y; }
    함수의 디폴트 값 : function add(a=100, b=200){ console.log(a,b); return a+b; }
    return: 내가 있던 자리에 결과 값을 주겠다
    호이스팅 (hoisting) : 선언 내용을 최상위로 올려줘 함수를 선언식 위아래로 사용 가능
  • TDZ (일시적 사각지대, Temporal Dead Zone) : let/const/classs는 함수 선언식으로도 호이스팅은 일어나지만 TDZ에 빠지기 때문에 에러가 난다.
  • 콜백함수 (Callback func.) : 함수 호출 시에 함수를 아규먼트로 받아서 내부에서 실행을 시켜준다.
    > '나중에 불러서(Call back)' 내부에서 실행을 시켜준다.
  • 화살표 함수 : 네이밍을 안해도되는 장점이 있지만 콜백지옥에 빠질  수 있음
  • 클래스 : 붕어빵 찍는 틀, 공장
    인스턴스 : 붕어빵, 제품
    constructure : 인스턴스 생성 시 값을 받을 때 필요한 구조. 이름 변경하면 안됨
  • 예외처리 : try, catch, finally
  • 전개구문
  • 정규표현식
  • 리터럴(Literal) : 약속된 기호를 사용해 값을 생성하는 것
    2진수, 8진수, 16진수 리터럴
  • 구조분해할당
  • 동기와 비동기, JS는 일을 처리할 수 있는 쓰레드(thread) 가 1개. 싱글쓰레드.JS 실행 동작 원리 검색
    setTimeout 이 0s라도 console.log 가 먼저 출력됨
  • Promise
    pending(대기상태) - resolve(해결) - fulfilled(성공)
    pending(대기상태) - reject(거부) - rejected(실패)
    fetch : Fetch는 비동기 네트워크 동신을 구현하기 위해 사용하는 Web API
    자바스크립트를 이용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 응답 받은 데이터를 동적으로 페이지 렝더링 하는 방식 Ajax(Asychronous Javascript and XML) 라고 하고 대표적으로 Web API로는 XMLHttpRequest 객체, JQuery, fetch 등이 있다.
  • async, await '알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념' 참고
    await : fullfiled까지 기다리겠다.
    async : awit 를 통해 동기처리가 필요한 함수의 경우 async 로 선언
  • DOM
    DOM API : 자바스크립트 문법과는 별개임. 
    document.body.childnNodes[1].textcontent = 'hello'
    document.getElementId()
    document.querySelector("selector"); (Tag)
    document.querySelector("#selector"); (ID)
    document.querySelector(".selector"); (Class)
    document.querySelector(".selector").firstElementChild // 첫번째 자식 요소document.querySelector(".selector").nestElementChild // 다음 자식 요소
    document.querySelector(".selector").previousElementChild // 이전 자식 요소
    document.querySelector(".selector").lastElementChild // 마지막자식 요소
    document.querySelector(".selector").Children // 모든 자식 요소
    document.querySelector(".selector").parentElement // 부모 요소
    document.appendChild(target);
    document.removeChild(target);
• 예상 문제
  • 1부터 100 사이에 3의 배수 숫자가 들어있는 배열을 선언하세요
    // Array(33).fill(3).map((val, idx) => val * (idx+1)); 
  • str='hello world hello' 에서 메서드로 world 만을 출력하세요  // str.find('world') 또는 str.slice(6,11) 또는 str.(-11,11)
  • str='hello world' 에서 메서드를 사용해 'hello Jisoo' 를 출력하세요 //  str.replace('hello', 'hi')
  • str='hello world hello' 에서 메서드를 사용해 'hi world hi' 를 출력하세요 // str.replace(/hello/g, 'hi')
  • x=1000 을 문자열 메서드를 사용해 문자열로 변환 출력하세요 // String(x)
  • 숫자형(Number) 5로 100개가 채워진 Array(배열)를 생성(출력하세요) // '1'.repeat(100).split('').map(Number)
  • true 인가 false 인가? !![], !!{}, !!'',!!'hello', !!0, !!10
  • let x; typeof x 의 결과는? // undefined
  • let x=[{'one':1, 'two':2}, {'one':10, 'two':20}] 일때, 2를 출력하세요 // x[0]['two']
  • let x=[[[1, 2], [10, 20], [100, 200]], [[3, 4], [30, 40], [300, 400]]] 일때, 400을 출력하세요 // x[1][2][1]
  • x=[10,20,30,40] 일 때, 콜솔창에 각각의 제곱값을 출력하세요. // x.forEach(x => console.log(x**2))
  • x=[10,20,30,40] 일 때, 각 원소(element)에 100을 더한 Array(배열)을 출력하세요. // x.map(x => x+100)
  • x=[1,2,3,4,5,6,7,8] 일때 Array(배열) 메서드를 사용하여 4보다 큰 수의 Arrray 출력하세요. // x.filter(x => x > 4)
  • x=[1,2,3,4,5,6,7,8] 일때 Array(배열) 메서드를 사용하여 4보다 큰 수의 하나만 출력하세요. // x.find(x => x > 4)
  • 100부터 시작해여 199까지 값을 가진 Array(배열) 을 생성하세요.
    // Array(100).fill(0).map((value, index) => value + index + 100)
  • x 라는 Object 의 모든 Key, 모든 Value, 모든 내용을 출력하세요
    // Object.keys(x); Object.values(x); Object.entries(x)
  • x라는 Object 가 있을 때, test 라는 이름의 Map 자료형으로 변환하세요
    // let test = new Map(Object.entries(object))
  • '111111112222222333333' 을 set 자료형으로 변환하세요
    // let set = new Set('111111112222222333333')
  • 오늘 요일을 뽑아내는 Switch 문을 작성하세요
    // let day
    switch (new Date().getDay()){
        case 0: day="일"; break;
        case 1: day="월"; break;
        case 2: day="화"; break;
        case 3: day="수"; break;
        case 4: day="목"; break;
        case 5: day="금"; break;
        case 6: day="토"; break;}
    console.log(day)
  • 0 부터 10까지 반복문을 사용해 출력하세요
    // for (let i=0; i<11; i++){ console.log(i) }
  • (중요) 두개의 for 문을 중첩하여 구구단을 출력하세요.
    // for (let i=1; i<10; i++) { for(let j=1; j<10; j++) { console.log(`${i} X ${j} = ${i*j}`) }}
  • json 파일에서 특정 값을 출력하세요
  • '19821' 의  오른쪽부터 순서대로 더하는 반복문을 구현하세요
    // let s=0
    let a='19821'
    for (let i of a) {
        s += parseInt(i)
    }
  • Array 에 들어있는 값에 제곱값을 순차적으로 출력하라
    // let a = [1,2,3,4]; a.forEach(e => console.log(e**2));
  • let data = [{ name: 'hojun', age:10, friends:[ ['직장', '라이켓'], ['친구', '뮤'], ] }, { name: 'gildong', age:11, friends:[ ['직장', 'gary'], ] }] 에 대해서 friends의 value 를 출력하세요.
    // for (let i of data) { for(let j in i) { if(j=='friends') {console.log(data[i][j])}}}
  • Array (배열)의 최대값을 출력하세요
    // let arr1 = [1,2,3,4], arr2=[10,20,30,40], let arr3=[...arr1, ...arr2]; Math.max(...arr3);
  • 더하기 함수를 정의하세요.
    // function add(a=100, b=200){ console.log(a,b); return a + b;}
  • 함수 선언식의 제곱 함수를 function squire(x) { x**2 } 화살표 함수를 사용한 함수 표현식으로 변경하세요
    // let squire = x => x**2;
  • 공격과 방어를 하는 휴먼 Class 를 정의하고 휴면 Class 를 상속하는 마법을 쓰는 고급휴먼  Class 를 정의하세요
    그리고 길동 인스턴스를 생성하여 공격하세요.
    // class 휴먼 { attack() { console.log('공격!');} defence() {console.log('방어!');} }
    class 고급휴먼 extends 휴먼 { 마법() { console.log('파이어볼!'); } }
    길동 = new 고급휴먼(); 길동.attack();
  • 'xxx += 1000' 에 대하여 error 발생시 에러 문구와 '애러!', 구문이 끝나면 'finally!' 를 출력하는 try 문을 작성하세요.
    // try { xxx += 1000 } catch(e) { console.log('애러!'); console.error(e); } finally { console.log('finally!'); }
  • let arr1 = [1,2,3,4]; let arr2 = [10,20,30,40] 의 두배열을 전개하여 결한한 arr3 를 출력하세요
    // let arr3 = [...arr1, ...arr2]
  • [10, 20, 30, 40,50,60,70] 을 활용하여 a,b,c,d 에 각각 [10], [20], [30], [40, 50, 60, 70] 을 할당하세요
    // let [a, b, c, ...d] = [10, 20, 30, 40,50,60,70]
  • 정규표현식을 사용하여 '0110202200304050500606' 에서 0, 1, 2, 3 을 제거하세요
    // let s = '0110202200304050500606'; s.replace(/[^4-9]/g,"")
  • 2진수 리터럴 let a = 0b1001 일 때, console.log(a) 의 결과는? // 9
  •  아래 링크의 데이터를 가져와 json 형태로 출력하세요
    ('https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json')
    // const f = fetch( 링크 )
                     .then(function(response){ return response.json(); }
                     .then(function(json){ console.log(json); return json; }
  • body>h1{hello world}+p{hello}+div>h1{hello world}+p{hello} 의 첫번째 childNode 를 'hello world' 로 변경하라
    // document.childNodes[1].textcontent = 'hello world'

1-3. JavaScript 3부 SPA 정리

• SPA (Single Page Application) : 하나의 페이지에 다양한 기능들을 구현하며 입사 코딩 테스트에서 JS 문제로 제출됨
• Javascipt 로 어떻게 동적인 페이지를 만들 수 있는지 알아보는 간단한 프로젝트
• 세부 요구 사항은 노션 페이지를 또는 요구사항 설명 영상을 참조
• Repository 사용법
• 예상 문제
  • 아래 링크와 소스로부터 상품 목록들을 보여주는 스토어 페이지 SPA 를 만드세요.

2. 영상 과제 스크립트

질문 1. 프론트엔드 스쿨 지원 동기를 포함하여 자기 소개를 해주세요. (약 1분)

답변 1. 지원동기, 자기소개 안녕하세요, 프론트엔드 스쿨 7기에 지원한 OOO 입니다. 저는 사용성을 고려한 빠른 프론트엔드 개발능력을 가진 개발자가 되고 싶어서 지원을 했습니다. 임베디드 개발을 하고 회사에 입사를 했지만 프론트엔드 포지션을 맡게 되었고, 빠르게 성과를 보여줘야하는 회사에서 처음 맡게된 프론트엔드 개발로는 성과를 내기란 어려웠습니다. 전 회사에서 느꼈던 프론트엔드에 대한 장벽을 이번에 깨부수고 HTML, CSS, JS 기본기를 탄탄히 익혀서 프론트엔드 개발에 능숙한 개발자가 되고 싶습니다.

 

질문 2. 프론트엔드 스쿨 과정을 수강하게 될 경우 어떤 점이 가장 기대되는지,            과정이 종료된 후에 나는 어떤 모습으로 성장해 있을지 구체적으로 이야기해주세요. (약 1분)

답변 2. 가장 기대되는 점, 과정 종료 후 나의 모습 프론트엔드 스쿨의 장점은 몰입할 수 있는 환경이라고 생각 합니다. 이제 강사님과 매니저님들을 통해 규칙적이고 효율적인 프론트엔드 개발 커리큘럼으로 학습을 하고 동기들과 복습 또는 심화학습을 할 것이 기대됩니다. 구체적으로는 본과정에서 실무에 가까운 데이터를 다루는 스킬이 가장 기대 됩니다. 과정이 종료된 후에는 HTML,CSS, JS 를 익숙하게 다루어서, 백엔드 개발자 및 디자이너와 실시간으로 협업할 수 있는 프론트엔드 개발자가 되어 있지 않을까 합니다.!

 

질문 3. 아래 강의들을 수강하면서 무엇을 새롭게 배웠고 어떤 부분에서 흥미를 느꼈는지,            어떤 부분이 어렸웠고 그 부분을 잘 학습하기 위해 어떤 노력을 했는지 이야기해주세요. (약 1분)

답변 3.  새롭게 배운점, 흥미 느낌점, 어려웠던 점, 노력한 점 30분 요약 강의를 들으며 새롭게 배운 부분은 제가 이전에 수박 겉핥기 식으로 알았던 전개구문, callback 함수, async, await 등이 있습니다. 또 실무에서 자주 쓰이는 부분에 대해서 짚어주시고, 실무와 유사한 데이터를 가져와 실습하는 부분이 정말 흥미로웠습니다. Class 와 Instance 이후에는 Promise 가 나오는데 잘 몰랐던 부분이기도 하고, 어려웠고, 진도도 느렸습니다. 그런 부분에서 제가 한 노력은 그저 다시 듣고, 코드 한번 더 쳐보고, 알려주신 참고자료를 찾아보는 일이었습니다. 본 교육에서는 최종 프로젝트도 있는 만큼 더 큰 어려움이 예상되지만, 답변해주실 수 있는 강사님과 조교님도 계시고, 같이 고민할 동기들도 있으니 큰 걱정은 되지 않습니다. 이걸로 제 과제 영상을 마치겠습니다. 감사합니다.

3. 영상 편집

3-1. 편집 도구

• Adobe Premiere Pro 2022

3-2. 영상 편집 (3분)

• 3분 이내로 영상 편집
• 얼굴이 나오게 하며 소리가 잘 들리는지 확인

3-3. 자막 삽입

• 발음이 정확하지 않아서 못알아 들을 수 있으므로 자막 삽입

3-4. 영상 파일 제출

• 이름_휴대폰번호 끝 4자리.zip 의 형태로 제출
• 2차 과제 노션 페이지에 있는 구글폼에 개인정보와 함께 파일을 업로드하여 제출

2차 과제 영상 제출 완료

3-5. 기타 (HTML, CSS)

• 에밋 (Emmet) 은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 간략한 코드만 입력하면 자동으로 완전한 HTML 코드를 생성해준다.
• HTML 유튜브 강의
• HTML 노션 자료
• HTML (HyperText Markup Language) : 웹 상에서 콘텐츠를 표시하기 위해 사용하는 마크업 언어. 웹 페이지의 뼈대를 만드는 역할
• 하이퍼텍스트 (HyperTex) : 사용자가 기존 문서에서 다른 문서로 이동할 수 있게 해주는 텍스트
  : 웹 (Web)은 하이퍼텍스트로 구성된 콘텐츠 간의 연결을 통해 사용자들이 다양한 정보를 검색하고 읽을 수 있게 함. 연결을 기반으로 콘텐츠를 제공하는 방식은 웹 상에서 정보를 찾아가는데 무척 효과적인 방법이기 때문에 하이퍼텍스트는 웹을 지택하는 여러 기술 중에서도 중요도가 매우 높은 기술임
• 마크업 언어 (Markup Language)는 태그(Tag)를 사용해 콘텐츠나 문서 구조를 표시하는 형식을 따르는 언어
• HTML Tag
  • <!Doctype html> : 문서 형식 선언
  • <html></html> : 문서의 시작과 끝을 의미
  • <head></head> : HTML 문서의 정보
  • <meta charset="utf-8"> : 문서의 키워드 또는 설정 등을 지정. 대표적인 항목은 문서의 인코딩 방식 설정
  • <title></title> : 문서의 제목
  • <body></body> : 웹 브라우저 화면에 표시될 컨텐츠
  • <h1></h1> (Head) : 제목 (h1 ~ h6)
  • <p></p> (Paragraph) : 문단
  •  (Subscript) : 아래 첨자
  •  (Superscript) : 윗 첨자
  • <br></br> : 줄바꿈 (개행)
  • <hr> (horizon) : 구분선
  • <a></a> (anchor) : 태그 내부에 포함된 URL 링크 요소의 콘텐츠를 클릭하면 지정된 위치로 이동
  • <strong></strong> : 굵은 글씨체 (시각장애인 분들이 쓰시는 스크린 리더가 읽을 때 강조해서 읽음)
  • <b></b> (bold) : 굵은 글씨체 (스크린 리더 강조 없음)
  • <em></em> : 이탤릭체, 기울어진 글씨체 (시각장애인 분들이 쓰시는 스크린 리더가 읽을 때 강조해서 읽음)
  • <i></i> : 이탤릭체, 기울어진 글씨체 (스크린 리더 강조 없음)
  • <mark></mark> : 글씨 배경색을 추가해 표시, CSS에서 색 조정 가능 (형광팬 효과)
  • <!-- --> : 주석 (Ctrl + /)
  • <ol></ol> (Ordered List) : 순서가 있는 목차 (숫자, 알파벳, 로마 머릿말)
  • <ul></ul> (Unordered List) : 순서가 없는 목차 (모양 머릿말)
  • <li></li> (List) : 목차의 개별 목록
  • <dl></dl> (Description List) : 설명 목록 (웹 페이지 하단 주소나 사업자등록번호에 사용)
  • <dt></dt> (Description Term) : 설명 용어
  • <dd></dd> (Describes the term in a Discription list) : 설명 상세
  • <div></div> : 꾸미기 위해 CSS로 골격을 잡을 때 사용. span과 함께 꾸며줄 다른 태그가 없을 때 사용을 권고함.
  • <span></span> : CSS로 텍스트를 꾸밀 때 사용됨
  • Semantic HTML 코드 작성 : (의미론적인) 용도에 맞게 HTML Tag 를 사용하는 것
    + 기계(검색엔진)가 이해할 수 있게 작성할 수 있으며, 협업 또는 유지보수에 이점이 있음
  • <img> (image) : 이미지 (alt 속성을 통해 시각 장애인을 위한 스크린 리더 설명을 넣을 수 있음)
  • <section></section> : 아티클 보다 더 큰 의미로 사용되며, 아티클을 감싸주기 위해 사용
  • <article></article> : 내부의 요소만으로도 다른 곳으로 이동 시 전혀 이상이 없는 컨텐츠들. (ex. 패북 개시물)
  • <table></table> : 표
  • <tr></tr> (Table Raw) : 표 행
  • <td></td> (Table Data) : 표 데이터. (속성 colspan="2" : 두 칸(열) 병합, rawspan="2" 두 칸(행) 병합)
  • <th></th> (Table header) : 표 제목 (헤더) 데이터. 기본 세팅으로 굵은 글씨와 가운데 정렬
  • <thead></thead> : 표 제목 (헤더) 행을 감싸주는 태그 (최상단)
  • <tbody></tbody> : 표 내용 (바디) 을 감싸주는 태크
  • <tfoot></tfoot> : 표 집계 (최하단)
  • abbr : 준말 표현 (ex. NASA)
  • kbd : 키보드
  • pre : 있는 그대로
  • code : 코드블록
  • cite : 인용(q는 인용구, cite는 인용블록)
  • 참고문서 1: https://www.w3schools.com/html/default.asp
  • 참고문서 2 : https://developer.mozilla.org/ko/docs/Web/HTML/Element
  • 참고문서 3 : html.spec.whatwg.org, multipage
  • 참고문서 4 : https://wikidocs.net/161021

HTML 실습 1

튜토리얼로 배우는 HTML&CSS 시멘틱한 마크업 작성

• CSS (Cascading Stylesheet)
  • 캐스케이딩(Cacading) : 폭포같은, 계속되는, 연속적인
  • 웹 문서의 스타일을 정의하는 CSS
  • HTML 코드의 구조는 하나의 태그가 다른 태그를 포함하거나, 또 다른 태그에 포함되는 형태의 '계단식 구조'를 지니고 있음. CSS는 이러한 계단식 구조로 구성된 웹 요소에 추가할 스타일을 정의하는 언어로써 HTML 문서(또는 코드)와 함께 하나의 웹 페이지를 구성함
  • CSS 는 지원하는 HTML과 CSS 가 다르기 때문에 모든 브라우저에서 같은 모습으로 보여지지 않음
  • 표현하고자 하는 브라우저에서 CSS 가 정상적으로 확인하는 사이트를 활용함
  • HTML 에 CSS 적용은 내부 Style 태그 활용과 Link 태그를 활용한 외부, 그리고 HTML Tag 의 속성(attribute) 인라인(Inline) 적용방식 3가지가 있다.
  • CSS 는 선택자(Selector), 속성(Property), 값(Value) 로 구성되어 있다.
  • ID 는 고유하게 1개만 설정하며, Class 는 다수를 적용할 수 있다. Style 에서 ID는 샵(#)으로 Class는 점(.)으로 연결한다.
  • 폰트 사이즈 (Font-size)
    • px (Pixel) : 화면을 구성하는 단위의 화소(픽셀)를 뜻하는 절대 단위
    • pt  (Point): 포인트라고 하며, 일반 문서에서 많이 사용하는 절대 단위
    • % : 부모 요소의 글자 크기를 백분율로 계산해 적용하는 상대 단위
    • em (Element) : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
    • rem (Root element) : 루트 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
      * 루트 요소(Root element)란 문서의 시작 부분을 뜻하는 것으로 일반적으로 <html> 태그를 뜻하며 16pt
  • 속성 box-sizing: border-box; 를 통해 박스 사이즈를 패딩에 관계없이 테두리(border) 크기로 고정할 수 있다.
  • 추가 공부할 CSS 선택자 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
  • 추가 공부할 CSS 속성 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/Reference

CSS 로 버튼 애니메이션 만들기

• DOM (Document Object Model)
  • 문서 객체 모델
  • HTML, XML 문서의 프로그래밍 인터페이스
  • 로봇에 비유하지면 로봇의 설계도는 HTML, 설계도를 바탕으로 제작된 로봇 모델은 DOM, 로봇을 제어하는 리모컨은 자바스크립트, 최종 출시된 로봇은 웹 브라우저에 보이는 웹 사이트
  • DOM은 최신화 과정을 거치면서 단순히 문서를 구조화하는 것에서 발전되어 현재는 HTML 및 XML 문서에 쉽게 접근하기 위한 용도로 확장된 상태. DOM은 웹을 동적으로 구현할 때 효과적임