EunSeo's Dev Story

01 DOM이란? 문서 객체 모델 (Document Object Model) HTML 문서에 대한 인터페이스 - PC 사용자 입장에서 키보드, 마우스 등을 인터페이스라고 하고, XML, HTML 등에서 인터페이스 역할은 DOM이 한다. HTML DOM - 자바스크립트 언어로 HTML 문서를 조작하고 접근하기 위해 DOM을 사용한다. Document 객체 - Document 객체는 웹 페이지를 의미하고, 이 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체 부터 시작해야 한다. Document 메소드 HTML 요소의 선택 HTML 요소의 생성 HTML 이벤트 핸들러 추가 : 이벤트는 컴퓨터 내 작용하는 모든 행동 (클릭, 드래그, 키보드 입력 등) - 이벤트 : 컴퓨터 내..

01 조건문 조건문이란? if 문 if ~ else 문 else ~ if 문 중첩 if 문 02 반복문 반복문이 필요한 경우 : 구구단 2단을 출력하는 코드 - 위와 같이 특정한 작업을 반복적으로 해야 할 경우에 자주 사용된다. for 문 while 문 do ~ while 문 : var i = 1; 아래 12는 오타! 03 자바스크립트 활용 자바스크립트 코드 다양하게 활용하기 주사위 게임 - Math.random() : 6을 곱해주면 0부터 6미만까지 사이의 임의의 숫자를 출력해주고, +1을 해서 1부터 6까지의 랜덤한 숫자가 나오는 주사위 게임을 만들 수 있다. 소수 출력하기 : 소수는 1과 자기자신만 약수가 되는 수 문자열 거꾸로 출력하기 - 문자열 맨 뒤부터 출력해야 하므로 i가 0이 될 때까지 1..

01 프로퍼티와 메서드 데이터 타입의 프로퍼티와 메서드 : 객체뿐만아니라 여러 데이터 타입도 프로퍼티와 메서드를 가진다. - 프로퍼티 : '키(Key): 값(Value)' 쌍으로 구성되어 객체를 이루는 요소이다. - 메서드 : 객체 내 프로퍼티 값이 함수일 경우를 메서드라고 한다. 문자열 프로퍼티와 메서드 : 문자열에도 아래와 같은 기능을 가진 프로퍼티와 메서드들이 있다. 배열 프로퍼티와 메서드 Math의 수학 연산 메서드 문자를 숫자로 변환하는 메서드 02 연산자 산술 연산자 : 숫자 뿐 아니라 문자열도 산술 연산자 사용 가능 증감 연산자 : ++ 1씩 증가 -- 1씩 감소 비교 연산자 : === 연산자는 데이터 타입과 데이터 값 두 개를 동시에 비교한다. true, false 를 반환한다. 논리 연산자

01 자바스크립트 소개 자바스크립트란? - 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어 - HTML(내용), CSS(디자인), JS(동작)를 활용해 동적인 웹사이트를 제작한다. 자바스크립트의 활용 범위 - IOT : IOT 분야에서 파이썬, 자바스크립트 등과 같은 스크립트 언어로 사물인터넷 분야를 만드는데 자주 사용된다. - 하이브리드 앱 : Android, IOS는 다른 운영체제를 사용하고 있어 서로 다른 개발 언어를 사용해야 하는데 자바스크립트 기반인 리액트 네이티브 프레임워크는 Android, IOS에서 한 번에 개발할 수 있게 해준다. - 서버 개발 : node.js는 자바스크립트 기반의 서버 프로그래밍 언어로 서버 개발도 할 수 있다. ..

01 박스 모델 박스 모델 구조 - 컨텐츠를 감싸는 3가지의 축 margin과 padding의 차이 - margin -> border -> padding 순서로 여백을 만든다. margin과 padding을 작성하는 방법 - margin-left, margin-right 등 직접 값을 지정해도 되지만 위 코드처럼 한 줄에 작성이 가능하다. - {margin : top right bottom left;} 순서로 값이 적용된다. 02 Block 요소와 Inline 요소 - block 요소 : Y축을 기준으로 요소들이 생성된다. - inline 요소 : X축을 기준으로 요소들이 생성된다. Block 요소의 특징 03 margin 병합 현상 형제지간의 마진 병합 - 다음과 같이 top과 bottom일 경우에 둘..

01 Cascading : 우선순위를 결정하는 방법 CSS의 우선순위를 결정하는 세 가지 요소 1. 순서 2. 디테일 3. 선택자 순서에 의한 캐스케이딩 : 코드는 위에서 아래로 실행되기 때문에 나중에 적용한 값을 따른다. 디테일에 의한 캐스케이딩 : 부모 자식 태그 간 더 자세하게 나와있는 선택자를 따른다. 선택자에 의한 캐스케이딩 : 구체적으로 명시된 태그순으로 강도가 높다. 02 CSS 주요 속성 Width, Height - width 속성 : 선택한 요소의 너비를 설정, 픽셀(px), 퍼센트(%), 픽셀은 고정적인 크기, 퍼센트는 유동적인 크기를 갖는다. - height 속성 : 선택한 요소의 높이를 설정 font - font-family : 브라우저마다 지원하는 폰트가 다르다. 입력한 순서대로 ..

01 CSS - Cascading Style Sheet CSS란? - 정보 (HTML)와 디자인 (CSS)의 분리 - 문서의 레이아웃과 스타일 정의 - HTML로 작성된 정보를 꾸며주는 언어 CSS 구성 요소 선택자 {속성 : 속성값;} - 선택자 : 디자인을 적용할 HTML 영역 - 속성 : 어떤 디자인을 적용할지 정의 - 속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력 속성 Property h1{ font-size: 20px; /*폰트 사이즈*/ font-family: sans-serif; /*글꼴*/ color: blue; /*폰트 색깔*/ background-color: yellow;/*배경색*/ text-align: center; /*텍스트 정렬*/ } CSS 연동 방법..

04 HTML 태그의 두 가지 성격 공간을 점유하는 특징에 따라 Block요소와 Inline요소로 구분된다. 두 요소를 구분짓는 세 가지 주요 특징 줄바꿈 현상 가로 · 세로 배치 상 · 하 배치 Block 요소 y축 정렬 형태로 출력, 줄바꿈이 일어난다. Block 요소들을 사용하면 공간을 만들 수 있고 상하 배치 작업이 가능해진다. Inline 요소 x축 정렬 형태로 출력되어 한 줄에 출력이 된다. Inline 요소들을 사용하면 공간을 만들 수 없고 상하 배치 작업이 불가능해진다.

03 구조를 잡을 때 사용하는 태그 - 목차 : 로고, 카테고리 등을 담고 있다. - 본문 : 페이지에 대한 메인 정보를 담고 있다. - 부록 : 사업자 등록번호, 언어, 이메일, 연락처 등을 담고 있다. 웹사이트 목차 부분을 담당하는 , 태그 홈 카테고리 설정 - 태그 : 웹사이트의 머리글 (목차)를 담는 공간 - 태그 : 메뉴 버튼을 담는 공간, , , 와 함께 사용 목차부분 실행결과

02 HTML 기본태그 HTML이란? - Hyper Text Markup Language : 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 - HTML은 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고 시대에 맞춰 새로운 신조어가 등장 - 현재는 HTML 5 버전을 사용하고 있다. - Legacy : 과거에 사용되었지만 지금은 사용되지 않는 코드 HTML 태그 구성 요소 컨텐츠 태그명 : HTML이 갖고 있는 고유의 기능, 형태로 입력 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물 속성 : HTML 태그가 갖고 있는 추가 정보 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것 HTML 문서의 기본 구조 - : HTML 5라는 신조어로 문서를 선언하는 태그..