쵸화의 코딩배우기

document.createElement

지정된 이름의 HTML요소를 만들어 반환하는 메소드이다.
HTML요소가 만들어지고 또 반환되었다고 하여 해당 요소가 바로 웹브라우저 화면에 추가되는 것은 아니다.
자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업을 추가로 해줘야한다.

예) document.createElement(‘div’)
document.createElement(‘p’)

append(‘’)/appendChild(‘’)

appendChild는 DOM 내 개별요소(노드)에 자식 요소를 추가할 때 사용

사용방법 : target.appendChild(추가할 자식요소)

append는 타겟요소에 자식요소를 추가한다는 것은 같으나 차이점도 있다.

차이점

• append는 요소에 노드객체 또는 문자열을 자식요소로 추가할 수 있다
  appendChild는 노드 객체만을 추가할 수 있다.
• appendChild는 추가한 자식노드를 반환한다.
  append는 반환데이터가 없다.

append()/appendChild()를 여러번 반복하는 법은 앞에서 배운 반복문을 활용하면된다.

DOM

렌더링 (Rendering)

웹 브라우저는 HTML문서를 해석하고, 화면을 통해 해석된 결과를 보여줌
해석한 HTML코드를 화면을 통해 보여주는 과정

*브라우저는 HTML코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다.
이를 DOM이라고 하며 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링

DOM(Document Object Model, 문서 객체 모델)

웹콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에
대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)

DOM 접근 방법

브라우저 객체 window의 document 속성은 창이 포함된 문서를 참조한다.
즉, window.document는 현재 브라우저에 렌더링되고 있는 문서를 의미
이 속성을 이용하면 해당 문서에 접근할 수 있다.

querySelector("선택자")

선택자를 인자로 전달받아 해당 선택자와 일치하는 문서내 첫번째 요소를 반환

• 일치하는 요소가 없는 경우 → null 값을 반환합니다.
  인자로 전달되는 선택자는 문자열 타입의 ‘유효한 CSS선택자’를 의미한다.

요소.textContent

해당 객체(요소)가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
요소가 포함된 텍스트 콘텐츠를 받아오거나(읽거나) 변경할 수 있다.

• 새로운 텍스트를 해당 요소에 할당시킬 수 있습니다.

DOM 메소드 및 속성

DOM요소를 선택하는 매서드(document)

• .querySelector(’선택자’)
  선택자를 만족하는 첫번째 요소를 반환(선택)
• .getElementById(’id속성값’)
  id속성값을 가진 요소를 반환(선택) (id: 고유값)
• .querySelectorAll(’선택자’)
  선택자를 만족하는 모든 요소들을 배열에 담아 반환(선택)
• .getElementsByClassName(’class명’)
  class명을 가진 모든 요소들을 배열에 담아 요소를 반환(선택)
• .write(x)
  전달 인자로 전달한 내용을 문서에 추가 작성

선택한 요소에 접근하는 메소드(Element)

• .textContent
  요소가 가진 텍스트 콘텐츠를 반환
• .innerHTML
  요소 내에 쓰여진 HTML코드를 텍스트 형태로 반환
• .className
  요소의 class 속성값을 반환
• .style
  요소의 style 관련 속성 값들을 반환
• .title
  요소의 title 속성값을 반환합니다.

Java Script(자바스크립트)

HTML은 마크업 언어,CSS는 스타일 시트언어이다.
자바 스크립트는 로직을 더해서 동작 구현 등을 하는 프로그래밍 언어이다.
자바스크립트는 서버개발, 어플리케이션 개발 등 다양한 목적을 위해
사용할 수 있는 팔방미인 언어이지만, 주된 활동 분야는 역시 ‘웹 개발’ 이다.

웹 개발이란?
인터넷을 통해 서비스되는 웹사이트를 개발하는 일!

자바스크립트의 역할

웹사이트 개발에 있어, 자바스크립트의 역할은
-웹브라우저 및 하위 객체가 가진 기능을 구동하거나
-HTML/CSS를 통해 렌더링된 화면을 조작할 수 있다.
위와 같은 역할을 정상적으로 수행하기 위해서는,
자바스크립트 코드를 올바른 위치에 작성하는 것이 중요하다.

자바스크립트 작성 위치

웹페이지에 자바스크립트 코드를 적용시키는 방법으로는 두가지가 있다.
-HTML문서 내부에 작성하기
-자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML문서에 연결하기

자바스크립트 동작원리&출력

스크립트 동작 원리

자바스크립트는 프로그래밍 언어로써 소프트웨어적 대상에게 명령을 내리는
역할을 수행한다. 여기에서 소프트웨어적 대상이란,
웹브라우저, 웹 요소, 웹 스타일 등을 의미한다.
명령을 내리고픈 대상에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어진다.
입력 → 처리 → 출력
자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜
‘객체’라고 한다.

입력, 처리, 출력

• 입력: 객체에게 어떤 작업을 수행하라는 명령을 전달한다.
• 처리: 객체가 주어진 작업을 수행한다.
• 출력: 객체가 작업을 수행한 결과를 사용자에게 반환한다.
  →화면에 결과를 보여주거나 데이터상태를 보여주거나 변경하는 것도 반환

자바스크립트의 모든 명령문은 대부분 위와 같은 절차에 따라 수행한다.
그리고 자바스크립트에는 다양한 객체
(소프트웨어적 대상= 웹 브라우저, 웹 요소, 웹 스타일)이름이 미리 정의되어 있어 사용자는 이를 어떻게 사용하는지만 알고 있으면 된다.

객체 다루는 방법

자바스크립트가 제공하는 객체 이름을 선택하고, 뒤에 점(.)을 붙인 다음 전달하고자 하는 명령을 적어준다. 그러면 입력,처리,출력의 절차가 시작된다.
객체 명령의 두 가지 유형

구체적인 예 한가지
웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다.
자바스크립트-웹브라우저에 명령을 전달할수있는 객체이름이 window로 정의

windoe.alert(‘X’)

windoe.alert(‘X’)명령문은 웹브라우저에게 ‘경고창에 X 라고 쓴 다음 화면에 띄워줘!’라는 명령을 전달한다. X에는 사용자가 원하는 내용을 입력하면된다
예)windoe.alert(‘warn’) - ‘warn’이라고 쓰여진 경고창이 나타남

주석

1. //주석이다 – 주석을 한 줄밖에 쓸 수 없다.
2. /주석이다/ - 주석을 여러 줄에 걸쳐 쓸 수 있다.
3.  

콘솔 출력 & 자료형 개념 소개

콘솔(console)

브라우저의 디버깅 콘솔을 의미한다.
브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다.
-객체 뒤에 .을 찍으면 객체가 가지고있는 데이터에 접근할 수 있다.

디버깅 콘솔

웹브라우저의 개발자 도구를 열면 나오는 ‘콘솔’메뉴가 있다.
이때 나타나는 화면이 디버깅콘솔
-자바스크립트 코드를 테스트(점검)할 수 있다.
*웹브라우저에 접근할 수 있게 해주는 객체 window는 콘솔을 비롯한 다양한 하위 객체 및 데이터,메소드 등을 포함하고 있다.
사용자의 편의를 위해 window.를 쓰지않아도 있는 걸로 인식한다.

colsole.log(‘X’)명령문

디버깅 콘솔에게 ‘콘솔창에 X라고 써줘’ 라는 명령을 전달한다.
X에는 사용자가 원하는 내용을 입력하면 되지만 자바스크립트 문법으로 표현할 수 있는 테이터만을 입력할 수 있다.

colsole.log(‘X’)
콘솔.기록한다.(자바스크립트에서 문법적허용 유형 데이터-대표적;숫자)

자료형

자바스크립트에 데이터를 표현할 때 사용하는 몇 가지 형식이 정의되어 있다.그 형식들을 통들어서 ‘자료형’이라고 한다.
(주요 자료형; 숫자,문자열, 불리언, 다양한 목적과 형태의 객체)

자료형(숫자)

정수(양의정수, 음의 정수)와 실수(소수까지 모두 포함)로 구분할 수 있다.

-산술연산도 물론 가능하다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자데이터를 결과로 반환(명령문이 결과값처럼 사용되는 것)한다.
-여러개 늘어져있을 경우 일반 연산처럼 곱셈, 나눗셈을 우선시한다.

*typeof : 뒤에 오는 데이터의 타입을 알려줌
예)typeof 3 : 3의 타입, 따라서 숫자(number)

플렉스 박스 레이아웃

css 레이아웃

레이아웃(layout)이란?
‘구성요소를 공간에 효과적으로 배열하는 일, 또는 그 기술’

CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술이다.
CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다.

대표적인 css 레이아웃 기술들

• 일반적인 문서 흐름
• display 속성
• 플렉스박스
• 그리드 레이아웃
• float 속성
• position 속성
• 기타 등등

플렉스박스(flexbox)

행(가로) 또는 열(세로)을 주축으로 설정하여 웹 요소를 배치 및 정렬하는
1차원 레이아웃 방식을 말한다.
요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정

플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소
플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

-display: flex; (플렉스방식을 사용하기 위해 플렉스 컨테이너를 만듬)
-display: inline-flex; (플렉스 컨테이너가 인라인 레벨 요소이길 원하는 경우)

플렉스박스 방식은 두 개의 축을 기반으로 동작한다.
그 중 하나의 축을 주축삼아 요소를 배치하는데,
주축의 기본값은 가로 방향(왼쪽에서 오른쪽)이다.

flex관련속성

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성
행은 가로축을 열은 세로축을 주축으로 한다.

flex-wrap

플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지. 또는 가능한 영역 내에서
벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성이다.

justify-content

플렉스 아이템들이 플렉스 박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정한다.

align-items

교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정한다.

align-self

각각의 플렉스 아이템들이 교차축에서 어떤 식으로 정렬될 것인지를 스스로 결정

align-content

교차축위에서 justify-content와 동일하게 사용할 수 있는 속성
다음 두 조건이 만족되면서 여유공간이 있을 때만 동작할 수 있음

1. flex-wrap의 값이 wrap으로 지정되어 있을 때
2. 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때

flex-grow

플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고,
플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대정으로 정의할 수 있는 속성

flex-shrink

플렉스 아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고 ,
플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대정으로 정의할 수 있는 속성

flex-basis

플렉스 아이템의 초기 크기를 지정하는 속성

order

플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다. 코드에 영향을 끼치는 것이 아닌, 보여지는 순서에만 영향을 준다.

반응형 웹과 뷰표트 단위

반응형 웹

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법

뷰포트

현재 화면에 보여지고 있는 영역
기기별로 뷰포트가 다르기 때문에 동일한 웹페이지라도 기기에 따른 배율 조정이
발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
예) h1은 기본 32px이다. PC에서는 32px로 제대로 나오지만
모바일은 뷰포츠가 작아서 왜곡되어서 나온다.

뷰포트 크기에 반응하는 단위

뷰포트의 크기를 기반으로 값을 계산하여 크기를 결정하는 단위들

미디어 쿼리

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)이다.
모든 미디어 쿼리는 다음 두 가지 구성요소를 지니고 있다.

• 미디어 타입
• 조건에 대한 물음 (쿼리)
  미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다!
  그러나 주로 사용되는 것들은 거의 정해져 있다시피한다.

모듈화 디자인

컴포넌트 만든다

반응형 웹 개발의 대세는 ‘페이지 만들기’에서 ‘컴포넌트 만들기’로 이동했다고 해도 과언이 아니다. 웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.
컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조갑을 이용해 화면을 구성할 수 있어 효율이 좋아진다.

모듈화 디자인의 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는
  자연스럽게 반응형 페이지가 된다.
• 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
• 페이지의 일관성을 유지하기가 용이하다.
• 만들 때마다 디자인 할 필요가 없다.

상속과 공용키워드

상속

상속(Inheritance)란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

예) ul{ color: violet; }
li요소를 선택하지 않아도 상위요소에서 주어진 색이 반영이 된다.

상위 요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않는 속성도 있다.

공용키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속여부를 제어할 수 있는 3개의 키워드를 별도로 지원한다.
모든 속성에 적용할 수 있는 키워드이므로 ‘전역 키워드’라고도 부르기도 한다.

애니메이션 효과

애니메이션

애니메이션의 사전적 정의는 ‘움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화’이다.
CSS는 웹페이지 상에서 표시되는 컨텐츠가 TV애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation속성을 지원한다.
(속성값 변화뿐만 아니라 다양한 프레임을 가지고 움직이는 요소를 만들 수 있다.)

@keyframes

애니메이션을 표현하는 여러개의 프레임은 @keyframes 모듈을 이용해 정의한다.
백분율을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수도 있다.

애니메이션(animation)

animation은 단축속성이며, animation의 다른 하위 속성들과 함께 지정하면
애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.

변형과 전환 효과

변형과 transform 속성

웹 요소에는 CSS를 사용하면 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 x축과 y축을 기준으로 바꾼다.
변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에서 CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정한다.

transition 속성을 이용한 변화

transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형 (크기기반) 이다.

transition속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있다.
또한 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과를 만들 수도 있다.
단축속성으로, 변화를 주고자하는 속성이나 실행시간, 실행방법, 그리고 딜레이 시간등에 대한 정보를 포함할 수 있다.

transition의 하위 속성들

transition-timing-function

transition에 의한 변화가 실행될때는 실행시간(duration)을 지정해 원하는 시간 동안 변화가 일어나게 할 수 있다. 그리고 transition-timing-function속성을 추가 정의하면 실행기간 동안의 속도 변화방식을 지정할 수 있다.
속성값으로는 별도의 키워드를 지정한다.