frontend

br 태그HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않음 =한 줄로 연이어 출력줄 바꿈을 하려면 직접 명령을 적어 주어야 하며, 를 통하여 줄바꿈.hr 태그닫는 태그 없음 (=단독으로 존재)줄 생김= 콘텐츠 내용에서 주제가 바뀔 때

li리스트 요소 (아이템)ol, ul 안에 들어감olordered list (순서가 있는 리스트)번호 붙음ulunordered list (순서가 없는 리스트)번호 없이 불렛 포인트가 찍힘nav bar로 메뉴 만들 때 사용됨dldefinition list (정의 목록)들

Document

input입력 인풋을 받는 태그타입을 지정하여 사용 가능text아래와 같은 입력창이 생성된다. (velog에서는 html, 마크다운 언어를 둘다 지원해서 생성된 인풋 박스를 띄워줌)passwordtext 대신 password를 타입으로 지정하면, 비밀번호 입력창처럼 인

tr (table row)td (table data)테이블 태그 안에서 다음과 같이 사용가능위 내용을 두번 복붙하면 행(row)이 늘어난다.body 태그 안에 다음과 같이 지정 가능전체 브라우저 크기에 맞춰서 지정됨병합하고자 하는 컬럼의 첫번째 td태그에 colspan

CSS란? Cascading style sheet의 약자 웹 문서의 전반적인 스타일을 따로 저장해둔 시트 작성 방법 내부 스타일 시트, 외부 스타일 시트, html style 태그의 세 가지 방법 존재

h1 태그를 동일하게 3개를 작성할 경우,각 태그에 id값을 주면 개별적으로 스타일링 가능.위와 같이 id를 먹이고, head 태그의 style영역에서 해당 id를 호출한다.p태그에 hello 넣어서 10개 복제하는 방법위와 같이 미디어태그 a에 넣어줄 경우, 해당 키

1. 고정 크기 단위 px, pt, in, cm, mm 2. 가변 크기 단위 em 부모의 크기 * 자식의 m값 % 기존 설정값 기준 rem em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준 반면에 rem에서 r은 root, 즉 최상위

웹 페이지를 만들 때, 문서 골격을 잡기 위해 사용하는 태그 요소들단독으로 사용 가능한 내용을 담는 엘리먼트.(ex. 잡지 기사, 포럼, 블로그 글, 댓글, 위젯 등)하나의 주제로 컨텐츠를 그룹화제목을 포함하여 식별sectioning content의 헤더헤딩 없이 목차

display 속성웹 페이지 레이아웃을 결정하는 CSS의 중요 속성 중 하나이 속성은 해당 html 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정display 속성의 기본값은 다음 두 가지중 하나의 값을 지님1️⃣ 블록display 속성값이 블록인 요소는 항상 새로

display 속성 중 하나특정 section을 inline-block으로 지정 가능 속성을 지정하면 section을 하나의 블록으로 인식하여 원하는 대로 배치 가능하위 section의 width를 직접 비율로 지정할 수도 있다 (%등 활용)배치하고자 하는 블록에 pa

이미지를 인라인으로 넣으면 하나의 글자로 인식된다float로 이미지를 삽입할 경우, 이미지가 차지한 나머지 자리를 텍스트가 채우게 됨float로 블록을 넣게 되면, 부모 container의 height가 0으로 인식됨위 이미지에서도 노란색과 핑크색 블록은 float로

flex box는 display의 속성 중 하나아래와 같이 display의 속성들 중 flex를 선택하여 지정 가능flex의 기본값은 row(행)별도로 방향을 지정해주지 않으면, 행을 기준으로 유연하게 늘어나는 방식으로 표현아래와 같이, 보기에는 열 기준으로 분리되어

형제 선택자물결기호로 두 selector를 연결할 경우, selector에 해당하는 요소들이 서로 동일 부모를 둔 형제 요소임을 의미아래 내부 스타일링 방식의 스니펫을 보면, .input-check와 .box라는 selector가 물결 표시를 사이에 두고 연결되어 있으

display 속성을 따로 지정하지 않을 경우, 기본값은 block이다.위의 코드를 화면에 띄우면 다음과 같이 블록들이 쌓이게 된다.display: inline-block; 을 추가해보자.다음과 같이 블록이 div 위치를 따라 정렬된다.position 속성을 통해 위치

position 속성 중 하나로, 절대위치를 의미브라우저를 기준으로 함스크롤하면 사라짐마찬가지로 position 속성 중 하나브라우저를 기준으로 고정스크롤해도 사라지지 않음스크롤 하면 사라짐top 값을 지정해주면, 스크롤하다가 top값만큼 떨어진 부분에서 멈춤스크롤할

body에서 부모 class 안에 child class를 넣어준다.head의 style 태그에서 position 속성을 원하는 대로 지정해준다.부모인 .b 선택자의 left값을 자식인 .child 선택자가 이어받게 된다.옵션 1: 부모의 position이 absolut

script 태그 안에 작성변수 선언위와 같이 변수를 선언하고 문자와 정수형의 값을 할당할 수 있다.위와 같이 변수의 값을 출력할 수 있다. name 대신 br태그를 넣어서 줄바꿈을 시킬 수 있다.여기서 유의할 점은 꼭 따옴표를 넣어주어야 한다는 점이다.결과는 아래와

화면에는 '희망월급 - 실수령액: 900'이라고 나타날 것이다.위와 같이 작성한다.let은 변할 수 있는 변수값을 담는다.인덱스값을 활용해서 텍스트에서 원하는 부분만 출력하는 것도 가능하다.위의 결과로 다음과 같이 출력된다.

\++는 변수에 할당된 값을 1만큼 더한다는 의미이다.\--는 변수의 값을 1만큼 감한다는 의미이다.따라서, 해당 스니펫의 x값은 3이 되며, y값은 4가 된다.\--x, ++x 라고 작성해도 동일하게 1만큼 줄어들거나 증가한다.다음의 스니펫에서 x값은 계속해서 연산된

변수의 타입을 알려주는 함수이다.5의 타입은 숫자형 number라고 출력된다. '5' 대신에 '5.5'라는 값을 넣어도 동일한 결과가 출력된다. \-> 자바스크립트에서는 int형과 float형을 따로 구분하지 않기 때문이다.문자열 / 5, 함수 / 5 등의 타입도n

원의 너비를 스니펫에서 x는 매개변수 (parameter)이면서 지역변수(Local val)이다.sum함수에 들어간 10은 전달인자, 즉 argument이다.x, y는 sum이라는 함수 내에서 선언된 지역함수이므로, sum 함수를 벗어나서는 사용할 수 없다.

함수가 선언되기 전에 document.write로 호출해도 사용 가능하다.선언 이후에도 당연히 사용할 수 있다.유의할 점은, 실무에서는 document.write보다 console.log를 주로 사용한다는 점이다.반면, 함수 표현식은 순서가 중요하다. 함수를 호출해서

실생활에서 특정 개념, 속성, 사물 등의 묶음을 의미한다.person이라는 객체를 활용한 스니펫이다.다음과 같은 표기로도 동일한 출력이 가능하다.위와 같이 career를 추가하고 호출해보자.딕셔너리의 key - value 관계를 생각하면 쉽다. key값으로 value를

fruit라는 배열이 표현되어 있다.대괄호로 묶여있으면 배열이다.사과를 한번 꺼내보자.두 줄 모두 배열을 생성하는 방법이다. 마지막 줄은 잘 사용되지는 않는다.

배열 안의 배열, 이런 식으로 중첩되어 있는 배열을 의미한다.위와 같이 matrix의 형태로 되어있는 것들을 다차원 행렬이라고 부른다.classScore를 더 쪼개보자.만약 document.write(classScore\[0]\[0]);를 출력하면, class A의 첫

여기서 문제는 txt_two이다.said 이후의 문자열이 인식되지 않기 때문이다. 이스케이프 문자인 \\ (역 slash)를 사용하면 된다.위와 같이 수정하면 된다.F의 인덱스를 반환하는 함수이다.찾지 못했을 경우 -1을 반환한다.인자를 두개 받을 수 있다.두번째 인자

위의 코드를 출력하면 0.123이 나타난다.AeB 는 A를 B만큼 제곱한다는 의미이다.2진수를 표현할 때는 0b 를 사용한다.위에서는 0b1010을 출력하면 10이 나타난다. 이는 10진수에서 1010이 10이기 때문이다.위의 o은 8진수를 표현할 때 사용되며, 8진수

반올림 해주는 함수이다.첫번째 인자를 두번째 인자만큼 제곱하게 하는 함수이다.제곱근을 구해주는 함수이다.절댓값을 구하는 함수이다.소수점 아래 난수를 생성한다.Math.random()\*10를 할 경우에는 1부터 10의 수를 생성.최댓값과 최솟값을 반환한다.

if문 다음에 작성하는 else문이다. if문이 false면 실행된다.위의 코드에서 점수는 89점이므로, 80점 이상인 조건을 만족한다.그러나 if문만을 사용하면, 다른 중첩되는 조건이 생긴다.두번째 if와 세번째 if를 else if로 바꿔주면 해결된다.만약 x가 3

원하는 값으로 교체해줌교체하는 자료형이 서로 달라서는 안 됨연산도 가능num의 값에 따라 case가 결정됨.다음과 같은 형태도 가능오늘이 월요일이면 case 1, 화요일이면 case 2가 출력된다.

인스턴스란?프론트 개발을 위해 필수적으로 생성하는 기본 단위 (? 뭐라는 겨)생성자란? (=인스턴스 생성자란?)생성자는 객체를 새로 생성할 때 자주 사용하는 옵션, 기능들을 미리 특정 객체에 저장 + 복붙해서 사용 (=확장성)생성자 함수(Constructor) = 거

기존 js 프레임워크에서는 한 화면을 1개의 view로 간주했다 → 한 화면의 데이터를 화면영역 어디서든 호출 가능vue.js는 컴포넌트의 유효범위(scope)가 독립적이다 → 같은 웹 페이지라도 컴포넌트 간 데이터를 공유할 수 없다 → 직접 참조는 불가 prop

전역 컴포넌트: 여러 인스턴스에서 공통 사용 가능컴포넌트 이름이란?template 속성에서 사용할 HTML 사용자 정의 태그 (custom tag) → 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 ‘모두 소문자’와 ‘케밥 기법’을 따르지 않아도 됨 (케

컴포넌트는 각자 다른 고유 유효범위로 인해 다른 컴포넌트의 값을 참조할 수 없으므로 → 뷰에서 자체 정의한 컴포넌트 전달 방법을 따라야 함 상위 (부모) → 하위 (자식) 컴포넌트 간 데이터 전달방법Screenshot 2023-03-13 at 5.57.36 PM.p

Do it 시리즈에는 환경 설정, 패키지 관련된 내용을 꽤나 많은 지면에 활용한다.Vue.js 공식 사이트에서는 개념을 바로바로 CLI에서 연습해볼 수 있는 환경을 제공한다.퀴즈를 풀 듯이 내가 직접 적용해본 코드와 제시문이 의도한 바를 비교해볼 수 있다.아래는 그 예

생성자는 빈 객체를 만든다. 그리고 이 객체내에서 this는 만들어진 객체를 가리킨다. 이것은 매우 중요한 사실이다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문이다. 📚 참고자료ht

Event Listner인 v-on 디렉티브를 통해 DOM 이벤트에 접근할 수 있다.increment라는 함수를 사용한 메서드로 이벤트를 설정this를 통해 메서드에 접근하고, 수행할 때 1씩 count한다v-on:click="increment" \- button

Model - View - ViewModel 패턴을 의미한다.마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴을 의미한다.웹 초창기에는 프런트엔드 - 백엔드의 구분이 없었으므로 이러한 문제를 해결하기 위한 일환으로

기존 문법 기존 js에서는 문자열 + 문자열, 또는 문자열 + 변수를 연결하려면 병합 연산자를 사용해야 했다. 예시1 = 문자열 + 문자열 예시2 = 문자열 + 변수 예시3 = 줄바꿈 시 이스케이프 시퀀스 포함 (\n) 예시 4, 5 = 괄호 활용으로 연산구문