good_da22 's devLog

분류 전체보기 108

JavaScript 기본 문법 2

JavaScript 기본문법 객체(Object) 객체는 이름과 값으로 구성된 프로퍼티의 집합 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체 JavaScript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(Prooerty)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용 가능 JavaScript 객체는 프로토타입(prototype)이라는 특별한 프로터피를 포함 객체 생성 객체 리터럴 가장 일반적인 방법 { } 를 사용하여 객체를 생성. { } 내에 1개 이상의 프로터피를 추가하여 객체를 생성 Obje..

JavaScript 기본 문법 1

JavaScript 기본문법 주석(comment) 주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다. JavaScript 주석은 한 줄 주석(Line Comment)과 블록 주석(Block Comment)이 있다. 한 줄 주석은 //code로 표기하고, 블록 주석은 /* code */ 로 표기한다. 가능하면 블록 주석보다 라인 주석을 사용한다. 변수(varidable) JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언 JavaScript는 동적타입(Dynamic / Weak type) 언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 같은 변수에 여러 타입의 값을 할당 가능 변수의 이름은 함수..

JavaScript

JavaScript 웹 페이지 이벤트 담당(동작) JavaScript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. JavaScript는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 JavaScript는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 각 브라우저별 JavaScript 엔진(ex. Chrome의 V8 엔진...)은 인터프리터와 컴파일의 장점을 결합하여..

semantic

semantic semantic의 사전적 의미 : 의미론적인, 의미가 통하는 검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석할 수 있도록 만들어진 태그 HTML4에서는 와 id속성을 이용하여 화면을 구성 id의 이름을 정하는 규칙이 없기 때문에 문서의 구조를 이해하는데 한계, 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조 HTML5에서는 웹문서 레이아웃을 표준화하는 semantic tag를 이용 사이트의 제목과 로고, 검책 창 등이 있는 헤더(header) 여러 내용이 있는 본문(contents : section + articles) 본문 외 내용을 나타내는 사이드바(aside) 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 개발자가 의도한 요소의 의미를 명확..

Front-End/HTML5 2022.09.04

CSS (table, border, box-model, positioning)

CSS 테이블 & 테두리 속성 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬 테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정 table-layout : table layout을 설정 (2) width : table의 너비를 지정 (1) height : table의 높이를 지정 (1) text-align : cell 내부 내용을 수평 정렬 (1) vertical-align : cell 내부 내용을 수직 정렬 (1) border-collapse : 분리된 테두리 모델, 통합된 테두리 모델을 설정 (2) border-style : 테두리 스타일 설정 (1) border-width : 엘리먼트의 4개 테두리 너비를 설정 (1) border-col..

Front-End/CSS 2022.09.04

CSS (font, text, 사용자 인터페이스)

CSS font 속성 태그 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는다. CSS Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일 등을 지정 font는 하나의 선언에서 여러 font 관련 속성을 지정 font-family : 글꼴 지정(font name) (1) font-size : 글자 크기 지정 (1) font-style : 글자 스타일 지정 (1) font-variant : 소문자를 작은 대문자(small-caps)로 변형 (1) font-weight : 글자 굵기 지정 (1) font : font에 관한 속성을 한번에 지정하는 단축형(short hand) 속성 (1) font-family font-family 속성 사용법은 element { font-family..

Front-End/CSS 2022.09.04

CSS (개요, CSS 선택자, 우선순위)

CSS 웹 페이지 디자인 담당(표현) Cascading Style Sheets의 약자 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. w3schools 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서 웹 브라우저 별 CSS3 지원 테스트 사이트 CSS 규칙은 선택자(selector)와 선언(declaration) 두 부분으로 구성 선택자는 규칙이 적용되는 엘리먼트 선언 부분에서는 선택자에 적용될 스타일을 작성 선언은 중괄호로 감싸며, 속성(property)과 값(value)로 이루어짐 속성(property)은 선택자에서 바꾸고 싶은 요소(color, font, width, height, border ...) 값(value)은 속성..

Front-End/CSS 2022.09.04

HTML5 마크업 요소(Markup Elements) 3

HTML5 마크업 요소(Markup Elements) 여러 data 나열 dropdown 태그는 select box(dropdown)를 표시 태그는 select box에 포함될 항목들을 정의 selected 속성은 여러 개의 항목 중 선택된 항목을 표시 value 속성은 각 항목 값을 지정하기 위해 사용 사용자 입력이 아닌 여러 옵션 중에서 선택하는 목록 내용1 내용2 ... 속성 size : 화면에 표시될 dropdown 메뉴의 항목 개수 지정 multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 여러 항목을 선택(다중 선택) 속성 value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정 selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지..

Front-End/HTML5 2022.09.01

HTML5 마크업 요소(Markup Elements) 2

HTML5 마크업 요소(Markup Elements) form control 요소 사용자로부터 데이터를 입력받아 서버에서 처리하기 위한 용도로 사용 사용자의 요청에 따라 서버는 HTML form을 전달(회원가입 양식, 검색 양식 등) 사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송, submit 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 반환 Request : 값을 전달, 서버에 요청 Response : 해당 서버로부터 값을 받음 사용자가 입력하기 위한 control 요소들은 모두 태그 하위에 위치해야 서버로 전송된다. 각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받는다. : 사용자에게 입력 받을 항목을 정..

Front-End/HTML5 2022.09.01

HTML5 마크업 요소(Markup Elements) 1

HTML5 마크업 요소(Markup Elements) 포맷팅 요소 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것들이 존재 : 생략된 약어 표시. Title 속성을 함께 사용 : 연락처 정보 표시 : 긴 인용분구 표시, 좌우 들여쓰기 : 짧은 인용문구 표시, 좌우 따옴표 : 웹 문서나 포스트에서 참고 내용 표시 : 공백, 줄 바꿈 등 입력된 그대로 화면에 표시 : 컴퓨터 인신을 위한 소스 코드 : 특정 문자열을 강조, 화면에는 하이라이팅 됨 : 구분선 , : 굵은 글씨로 표시, 특정 문자열 강조() , : 이텔릭(기울게) 표시, 특정 문자열 강조() , : 큰 글자, 작은 글자 표시 , : 위 첨자, 아래 첨자로 표시 , : 취소선, 밑줄 목록형 요소 목록 태그는 하나 이상의..

Front-End/HTML5 2022.09.01