AI ／ DL/엘리스 SW 코딩 훈련 트랙16 [SW 코딩 훈련] 핵심 JavaScript 기초 04. DOM과 이벤트 DOM(문서 객체 모델, Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 특히 웹페이지를 기반으로 한 HTML을 구조화하기 좋다. DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이다. JavaScript는 이 DOM을 다룰 수 있다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. 이 중에서 HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법이다. JavaScript는 궁극적으로 HTML 문서에서 특정 요소를 조작하거나 접근해야한다. 하지만 기본적으로는 HTML의 어디에 무엇이 있는지 모른다. 그래서 신원미상의 HTML.. 2022. 11. 21. [SW 코딩 훈련] 핵심 JavaScript 기초 03. 자바스크립트 제어문 조건문 주어진 조건에 따라 결과값을 출력하는 구문. 조건으로는 비교 연산자 또는 논리 연산자를 사용한다. if 문 if ( 조건 ) { 수행할 명령 } if ~ else 문 else if 문 여러 개의 조건문을 생성할 때 사용한다. 가장 첫 번째로 true가 나오는 조건의 명령을 수행한다. 중첩 if문 if문 안에 또 다른 if문을 삽입할 때 사용한다. 반복문 for 문 for ( 초기화한 변수값; 조건; 증감 표시) {수행할 명령} while 문 while ( 조건 ) { 수행할 명령 } 조건이 참일 동안 중괄호 안의 코드를 실행한다. do ~ while 문 do { 수행할 명령 } while ( 조건 ) ; while의 조건과 관계 없이, do의 명령을 무조건 실행부터 한다. 자바스크립트 활용 주사위.. 2022. 11. 15. [SW 코딩 훈련] 핵심 JavaScript 기초 02. 자바스크립트의 객체와 연산 프로퍼티와 메서드 객체는 프로퍼티와 메서드로 나뉘었는데, 프로퍼티는 객체가 가진 성질, 메서드는 객체가 하는 행동이었다. 그런데 비단 객체 자료형에만 의존하는 게 아니라 다른 자료형에도 프로퍼티와 메서드가 존재한다. 연산자 산술 연산자 숫자뿐 아니라 문자열도 산술 연산자 사용 가능하다. 증감 연산자 산술 연산자를 짧게 축약해서 쓰는 표현법이다. ++는 1씩 증가, --는 1씩 감소한다는 의미. ++, --가 변수 앞 또는 뒤에 작성했을 때 차이가 있는데, 출력이 먼저 되는지 연산이 먼저 되는지의 차이다. 비교 연산자 등호 2개는 값을 비교하고, 등호 3개는 값과 자료형을 함께 비교한다. 논리 연산자 and는 &&, or은 || 를 사용한다. 2022. 11. 8. [SW 코딩 훈련] 핵심 JavaScript 기초 01. 자바스크립트 시작하기 자바스크립트 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어다. HTML과 CSS와 더불어 JS를 함께 사용함으로써 웹사이트에 동적 효과를 줄 수 있다. HTML이 내용, CSS가 디자인이면 JS는 동작을 담당한다. 이 세 가지가 모여서 하나의 웹사이트를 이룬다. 자바스크립트의 웹브라우저에서의 렌더링뿐만 아니라 여러 기능을 통해 IoT / 하이브리드 앱 / 서버 개발과 같은 다양한 분야에서 쓰인다. 하이브리드 앱 : 서로 다른 운영체제인 Android / ios 에서 모두 사용 가능한 앱. 자바스크립트의 변수 변수는 기본적으로 데이터를 담는 공간이다. 자바스크립트에서는 var 키워드로 변수를 선언한다. 변수 선언은 데이터를 담을 공간을 생성하는 것이.. 2022. 11. 8. [SW 코딩 훈련] 핵심 HTML/CSS 기초 04. 웹 사이트의 레이아웃 박스 모델 박스 모델은 어떠한 요소(content)가 있을 때, 이 컨텐츠를 감싸는 큰 세 가지 축을 의미한다. 겉에서 봤을 때 마치 상자처럼 감쌌다고 해서 박스 모델이라 한다. 컨텐츠의 가장 바깥에 공백을 둘 수 있는데 이를 margin이라 한다. 컨텐츠와 border 사이의 공백을 padding이라 한다. margin은 다른 요소와의 공백이라 볼 수 있다. border는 경계인데 두께에 따라 padding, margin도 달라질 수 있다. margin과 padding의 차이 margin은 border 바깥에, padding은 border 안쪽에 여백을 만든다. border가 항상 기준이 된다. padding은 공간이 여백을 포함한 크기로 변경되는 점에 유의해야 한다. padding을 주면 컨텐츠와 b.. 2022. 11. 2. [SW 코딩 훈련] 핵심 HTML/CSS 기초 03. 웹 사이트의 디자인Ⅱ 캐스케이딩 CSS의 우선순위를 결정하는 요소로 순서, 디테일, 선택자가 있다. 순서에 의한 캐스케이딩 동일한 태그에 대해서 스타일 시트가 적혀있을 때, 스타일 시트는 위에서 아래로 읽기 때문에 아래에 동일한 태그를 가진 스타일 시트가 나오면 앞의 것을 대체한다. 나중에 적용한 속성값의 우선순위가 높은 것이다. 디테일에 의한 캐스케이딩 02. 웹 사이트의 디자인Ⅰ에서 봤던 것처럼, 더 구체적으로 작성된 선택자의 우선순위가 높다. 즉, 부모 자식 관계가 더 명료한 경우를 따른다. 선택자에 의한 캐스케이딩 style > id > class > type 순으로 우선순위가 높다. 더 구체적으로 콕 집어 말하는 선택자가 우선순위가 더 높다. CSS 주요 속성 Width, Height Width은 선택한 요소의 너비.. 2022. 11. 1. [SW 코딩 훈련] 핵심 HTML/CSS 기초 02. 웹 사이트의 디자인Ⅰ CSS(Cascading Style Sheet) 정보(HTML)와 디자인(CSS)의 분리가 주요 목적이다. HTML 속성을 이용해서 디자인을 부여할 수 있으나 모든 태그에 스타일을 부여하다보면 코드도 복잡해지고 가독성도 떨어지게 된다. 핵심 정보만 담아서 저장하고 디자인 담당은 따로 보관하는 환경을 가능하게 해준다. 문서의 레이아웃(디자인)과 스타일을 정의할 수 있다. 한 문장으로 정리하자면 HTML로 작성된 정보를 꾸며주는 언어라고 할 수 있다. CSS 구성 요소 선택자 : 디자인을 적용할 HTML 영역. 태그와 비슷한 역할을 한다. 속성 : 어떤 디자인을 적용할지 정의 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력. ※ HTML에서 '=' 기호를 썼던 것과 달리 ':'을 .. 2022. 10. 30. [SW 코딩 훈련] 핵심 HTML/CSS 기초 01. 웹사이트 만들기 프로그래밍이란? 컴퓨터와 소통하는 방법을 의미 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능 웹 개발을 하기 위한 언어로 브라우저와 소통 웹을 구성하는 요소 HTML : 웹페이저의 정보 또는 설계도 CSS : 웹페이지의 디자인 또는 스타일링(SS를 Style Sheet라고 한다) JavaScript : 웹페이지의 기능과 효과 어떤 건물을 지을 때 건물 설계도를 HTML라 할 수 있고, 인테리어 디자인은 CSS, JavaScript는 엘레베이터의 기능과 효과 등으로 비유할 수 있다. 웹사이트를 만드는 건 건물을 짓는 과정과 비슷하다고 할 수 있다. 출력하고자 하는 문구 태그 : 열린 태그 와, 닫힌 태그 로 이루어져 있다. 열린 태그는 시작 머리에, 닫힌 태그는 코드 입력이 끝난 후에 사용.. 2022. 10. 11. 이전 1 2 다음
