[그냥하자] HTML & CSS & JS

첫날 부터 java를 배우니 이게 현실이고 이게 개발인가? 싶었고, 어떻게든 따라가기 위해 교육 이외 구글링 통해 하나씩 방향성을 참고할 수 있었다. 나는 프론트엔드 개발자로서 직무 전환을 하고 싶었고, 이루어 낼 것이다. 우선 java는 기본 대개념만 잡아주고

visual studio code를 이용해서 web을 만들어 보자. 웹 개발 에디터로서 이전에는 아톰?을 많이 사용했다 하지만 시간이 지난만큼 현재는 위 에디터가 압도적이라고 한다.후에는 어떤 툴이 생길지 모르지만..아 우선, 생활코딩님의 유튜브를 보고 하나씩 따라하고

TAG의 이름만으로도는 정보가 부족할 때가 있기 때문에 source 줄여서 src 사용하다. eg. 속성은 아무 위치에나 상관없다. 무료 이미지 사이트 Unsplash Pixbay맵 기능 이미지 맵 생성 사이트eg

출처 : 인프런 혼공얄코님

출처 : 인프런 혼공얄코님 인라인 스타일(inline style) : HTML 태그 마다 style 속성으로 CSS 코드를 넣어주는 방식, 적용범위는 하나의 tag이기에 거의 사용되지 않음내부 스타일 시트(internal style sheet) : head 태그 내에

px : 절대값으로서 픽셀 단위% : 100% = 1em , 부모요소와의 상대적 크기rem : html 요소와의 상대적 크기, 요서의 중첩 영향 xfont-style : 속성의 글자를 기울일 때font-weight : 속성의 글자의 굵기 조절text-decoration

요소가 표현하는 영역 또는 범위를 개념화하는 것경계선 바깥 여백 : margin경계선 안쪽 여백 : paddingContent의 폭 : widthContent의 높이 : height경계선 바깥 위쪽 여백 (margin) 지정 : margin-top경계선 바깥 오른쪽 여

static : 디폴트 값이며 코드 흐름에서 자신의 위치.\*\* top, bottom, left, right 속성에 영향을 받지 않음relative : 원래 위치에서 상대적인 위치 지정.\*\*top, bottom, left, right 속성을 지정하여 원래 위치로부

인터프리터 언어 , 동적자료형 포함한다. C나 자바 등의 컴파일언어와는 달리 코딩을 한 결과를 사용자에게 건네주기 전에 컴파일과정을 거치지 않음컴파일한다는 것은 코드를 실행하기 전에 기계어나 다른 코드로 먼저 '번역' 하는 것.

출처 : 인프런 얄팍한 코딩사전자바스크립트는 동적자료형으로 변수/상수 등 데이터가 들어갈 곳에 자료형 제한이 없다. 여기서 자료형은 프로그램에서 사용되는 데이터의 종류이며 숫자, 텍스트, 참/거짓 등이 있다. 연산자(operator)는 사칙연산 등 셈을 하거나 논리 연

출처 : 인프런 얄팍한 코딩사전데이터의 묶음 - 키 : 값의 조합둘의 조합 프로퍼티 property 라 부름다수의 데이터를 저장근본적으로 객체키가 number 타입인 객체length 프로퍼티 : 배열의 요소 개수를 반환

출처 : goat 자바스크립트 (책)조건에 따라 과정이나 결과를 선택하는 경우, '조건문' 또는 '분기문' 이라고도 함괄호 안에 표시되는 조건을 평가하여 결과를 boolen으로 변환. true이면 코드 블록 실행 \*숫자 0, 빈 문자열, Null, Undefined,

조건에 따라 정의된 코드 블록을 반복적으로 처리하는 반복문(loop) 구구단 대표 예시배열, 문자열 등 여러 개의 값을 갖는 반복 가능한 객체를 대상으로 반복문 구성 문자열로 key를 사용하는 반복 가능한 객체를 대상으로 반복문 구성 특정 조건이 참이라면 계속 코드 블

웹 문서의 각 HTML 요소와 속성에 접근할 수 있도록 하는 메서드

그냥하자 시리즈는 완전 입문 단계인 나에게 말그대로 그냥할 뿐이다. 익숙해져야 한다. 그리고 하고싶게 만들고 이 트리거가 결국 할수 있게 만들 것이다. 그래서 그냥하자 시리즈는 basic of basic 수준,,, 하지만 이것도 때로는 어렵게 늦겨질 때도 있지만 적응하

출처 : 인프런 얄팍한코딩사전기본 표기방법은 작은따옴표(''), 큰따옴표("")가 있지만 작은따옴표를 보통 주로 씀. js코드에서는 HTML 코드가 혼재 되어 표시되는 경우가 있기 때문.자주 사용되는 이스케이프 표현기본적으로 문자열로 표현 가능 '',""같이. 문자열

function 특정한 작업을 수행하는 독립된 프로그램 단위, 반복될 수 있는 작업을 정의function 키워드 : 함수 정의(또는 선언)를 위한 키워드함수명 : 함수를 식별하기 위한 이름 -> calcArea매개변수 : 함수에 외부 입력 값을 전달하기 위한 변수 ->

참조 : 인프런 얄팍한코딩사전(https://www.inflearn.com/course/제대로-파는-자바스크립트primitive value은 값이 변하지 않고, 확보된 메모리 공간에 값을 직접 저장. 즉 값에 의한 복사 (Copy by value)(출처 : M

참조 : 인프런 얄팍한코딩사전 블록문 >0개 이상의 문statement들을 묶은 단위 일반적으로, 이후 배울 제어문, 함수 등에 사용 새로운 스코프 생성 스코프 블록 안에 선언된 변수와 상수를 밖에서 사용 불가 블록 안쪽에서는 바깥의 것 사용 가능 블록 안쪽에

출처 : 인프런 얄팍코딩사전함수를 변수와 같이 다루는 언어에 있는 개념JavaScript의 함수도 일급 객체 함수는 기본적으로 객체 프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 합니다. 예를 들어, 일급 함수를 가진 언어에서

출처 : 인프런 얄팍한 코딩사전생성자 함수명은 일반적으로 대문자로 시작 - 파스칼 케이스생성자 함수로 만들어진 객체를 인스턴스 instance 라 부름this.~로 생성될 인스턴스의 프로퍼티들 정의생성자 함수는 new 연산자와 함께 사용암묵적으로 this 반환생성자 함

출처 : 인프런 얄팍한 코딩사전Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. JavaScript에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.Class

객체지향 쪽으로 넘어오니깐 갑자기 하기싫어지지만, 그래도 그냥해야한다. 이해가 안되어도 반복해서 보자...!!출처 : 인프런 얄팍한코딩사전getter, setter 함수라고도 부름스스로는 값을 갖지 않음 - 다른 프로퍼티의 값을 읽거나 저장할 때 사용get, set을

출처 : 인프런 얄팍한코딩사전 HTML / CSS를 너무 찍먹(어쩌면 그보다 덜,,)한 거 같아서 인프런 강의를 하나 끊었다. JS 객체지향파트 쪽 하다가 다시 돌아왔는데 의심하지말고 다시 나아가야겠다. Visual Studio Code에서 HTML 파일을 생성하고

출처 : 인프런 얄팍한코딩사전웹 접근성 참고 url (챙겨보기)W3C널리프론트엔드 개발자로 나아가기 위해 언젠간 아니 적어도 올해 안까지는 나만의 웹페이지를 만들어 볼 것이다. 그렇게 되면 공신력있는 사이트로 발전하기 위해서 웹접근성에 대해 공부를 해야겠지..? 위 사

출처 : 얄팍한 코딩사전 SEMANTIC TAGS > semantic 사전적 의미는, '의미의', '의미론적인' 이다. 즉 태그에 의미를 부여함으로써 웹페이지의 구조를 파악하기 쉽도록 도와준다. 크게 3가지의 장점이 있다. 웹 접근성 개선 SEO (Search E

출처 : 얄팍한 코딩사전 BEM(Block Element Modifier) >CSS, JS 사용을 위해 요소들을 구분하게 되는데 태그, 클래스 위주로 구분을 하게 되었을 때는 장황해질 수 있어 블록(컴포넌트) 단위로 명명하면 아래 특징들을 보일수 있다. 간결해진 선

인라인(inline) 형태의 속성을 가진 Tag들은 새로운 줄에서 시작하지 않으며, 해당 줄의 너비는 내용만큼 해당대표적인 태그 : span 태그 출처블록(block) 형태의 속성을 가진 Tag들은 말그대로 네모 블록(block) 모양을 가지고, 항상 새로운 줄에서 시

출처 : 얄팍한 코딩사전콘텐츠와 영역의 배치 등을 다루는 layout 기술display를 flex로 지정하면 해당 방식으로 자식 요소들을 배치하게 된다. flex-direction 은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을 이 값에 따라 justify-co

출처 : 얄팍한 코딩사전@import를 사용하면 절대 및 상대경로를 사용해서 다른 css파일의 내용을 불러올 수 있다. 여러페이지 공통적으로 사용되는 스타일들을 특정 파일로 분리하여 모듈화 가능. html 코드 보면 sr-only라는 클래스는 별도 link로 css가

출처 : 인프런 얄팍한 코딩사전

출처 : 인프런 얄팍한 코딩사전(https://www.inflearn.com/course/뉴비를-위한-자바스크립트반응형은 너비에 따라 말그대로 반응되어 화면이 바뀌어진다. 아래 미디어 쿼리 속성을 사용하면 된다.

출처 : 인프런 얄팍한 코딩사전(https://www.inflearn.com/course/뉴비를-위한-자바스크립트BootstrapUlkitMaterializeBulma주로 bootstrap 을 많이 이용하고 있으며, 개발 속도를 높여 주고 다양한 브라우저에서

String 전역 개체는 문자열(문자의 나열)의 생성자이다.valueOf 또는 toString 메서드로 문자열 원시값 반환, 다른 타입들도 감쌀 수 있음 - 문자열로 변환한 값을 가진 String 객체 반환new 없이 사용하면 생성자로서가 아닌 String 함수는 주어

인자가 없을 시 0 생성자로서가 아닌 Number 함수는 주어진 인자를 숫자로 변환하여 반환EPSILON(Number형에서 표현 가능한 1보다 큰 가장 작은 수) - 1부동소수점으로 인한 계산오차 문제 해결에 사용MAX_VALUE, MIN_VALUE자바스크립트에서 표현

출처 : 인프런 얄팍한 코딩사전미니프로젝트와 정보처리기사 필기 준비로 Js공부가 잠시 홀딩됐는데 오늘부터 다시 시작하자. 다행히 프로젝트와 필기는 잘 마무리 되었다(?) 미니프로젝트는 한 번더 정리해보기로 하고,,, 정처기 실기는 조금 나중에 해야지...전역 범위에 항

MDN 문서Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이지 함수 객체가 아니다. 정적 프로터피와 메서드만 제공Number 타입만 지원 - BigInt 사용 불가abs - 절대값(0 이상) 반환ceil 올림, round 반올림, floor 내림

출처 : 인프런 얄팍한 코딩사전(정적) isArray - 배열인지 여부를 반환js에서 문자열을 특정 구분자로 분할하기 위해서는 split 함수를 사용. str.split(separator, limit)instanceof Array와의 차이 (Array.isArray가

다른 함수(콜백 함수 callback function)를 인자로 받음함수형 프로그래밍 - 변수 사용 없이 순회 작업들을 코딩forEach - 각 요소를 인자로 콜백함수 실행for문의 좋은 대체제 단점 : 예외를 던지지 않으면 종료할 수 없음 - break, contin

출처 : 인프런 얄팍한 코딩사전기본 문법 활용 a. 배열을 다수의 인자들로 펼침b. concat보다 가독성있는 배열 결합concat - 배열에 다른 배열이나 값을 이어붙인 결과를 반환c. 배열의 얕은 복사d. push, unshift 대신 사용가독성 향상배열이 든 변

출처 : 인프런 얄팍한코딩사전 Object 클래스

출처 : 인프런 얄팍한 코딩사전객체의 프로퍼티가 생성될 때 엔진에 의해 자동 정의되는 상태프로퍼티에는 두 종류가 있음데이터 프로퍼티의 어트리뷰트접근자 프로퍼티의 어트리뷰트getOwnPropertyDescriptor, getOwnPropertyDescriptors객체 프

출처 : 인프런 얄팍한 코딩사전복잡한 구조를 가질 수 있는 데이터를 한 줄의 문자열로 표현서버와 클라이언트 등 데이터들을 주고받는 주체들 사이에 널리 사용Javascript의 객체 표기법이며, XML 보다 낫기 때문에 대체 되고 있음. 하지만 각각의 장단점이 있음. J

출처 : 인프런 얄팍한 코딩사전매우 큰 정수를 다뤄야 하는 특수한 경우에 사용MDN 문서BigInt는 정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있습니다.number 타입으로 안정적으로 표현할 수 있는 가장 큰 정수 - 9007

출처 : 인프런 얄팍한 코딩사전MDN 문서중복되지 않는 값들의 집합 / 표준 내장 객체 중 하나배열과의 차이: 동일한 값을 여러 번 포함할 수 없음 / 값들의 순서가 무의미함 참조형 데이터의 경우 for ... of 문스프레드 문법디스트럭쳐링이터러블과 별개 - forE

출처 : 인프런 얄팍한 코딩사전반복, 순회 기능을 사용하는 주체간의 통일된 규격공통 기능들: for ... of, 스프레드 문법, 배열 디스트럭쳐링배열, 문자열, Set, Map, arguments 등...키 Symbol.iterator ( well-known 심볼 )

출처 : 인프런 얄팍한 코딩사전에러/에러 error 발생에 대비하지 않으면 프로그램이 종료됨try ... catch 문try 블록에러 발생 여지가 있는 코드 포함이곳에서 발생한 에러는 프로그램을 멈추지 않음catch 블록에러 발생시 실행할 코드 포함발생한 오류 객체를

MDN 문서기본적으로 자신이 속한 곳을 가리킴 - 문맥 context함수의 호출 방식에 따라 가리키는 바가 달라짐 - 자바스크립트 특성전역에서의 this아래의 환경들에서 각각 실행해 볼 것브라우저의 콘솔창: Window 객체 - globalThis와 같음Node.js의

출처 : 인프런 얄팍한 코딩사전MDN 문서자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어오늘날에는 클래스가 더 널리 사용되지만, 사용하기에 따라 보다 강력하고 효율적자바스크립트의 모든 객체는 Prototype을 가짐Object.getPrototype

출처 : 인프런 얄팍한 코딩사전 우선 chat한테 비동기 프로그래에 대한 개념을 살짝 물어보니,,,예를들어 우리가 어느 웹사이트에서 다운로드 할 때 사이트가 얼지 않고 다른걸 클릭이 가능했던 거는 비동기방식으로 구현이 됐다라고 이해를 해도 될거 같다.전역 setTime

출처 : 인프런 얄팍한 코딩사전이 스크립트를 위의 HTML 파일에 로드하여 사용하는 방법헤드에 스크립트로 로드스크립트 동작하지 않음 - 스크립트 로드 시점에는 body 요소가 로드되지 않았음스크립트의 크기가 클 경우 그 아래 요소들의 로드가 지연됨 - 동기적 로드bod

자바스크립트 코드에 주석을 달기 위한 마크업 언어에디터, IDE에서는 작성된 내용에 따라 코드 힌팅 등의 기능 제공마치 타입스크립트 등의 언어처럼 인자 등의 자료형 제안 - 강제되지는 않음도구를 통해 웹 문서 등으로 출력될 수 있음공식 문서 사이트@type - 자료형

출처 : 얄팍한 코딩사전 자바스크립트의 배열은 다르다 다른 언어들의 배열 (전형적인 배열) 한 배열에는 같은 자료형의 데이터만 포함 가능 데이터의 메모리 주소가 연속으로 나열됨 접근은 빠름, 중간요소의 추가나 제거는 느림 자바스크립트의 배열 배열의 형태와 동작을