새싹

웹 페이지 구조와 내용 → HTML 태그웹 페이지 모양 → CSS웹 페이지 행동 및 응용 프로그램 → JavaScript요소를 만들 때 사용하는 기호시작 태그와 종료 태그로 이루어진 모든 명령어태그에 추가 정보를 부여할 때 사용속성 이름 = ‘속성 값’img 태그하이퍼

HTML 문서의 색이나 모양 등 외관을 꾸미는 언어인라인 스타일(Inline style)내부 스타일 시트(Internal style sheet)외부 스타일 시트(External style sheet)HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용해

키워드를 입력하면 해당하는 스타일이 자동으로 적용CSS3에서 가장 많이 사용하는 단위font-size, width, height 속성 등에 적용상대 크기em: 비율 (부모를 기준으로 크기가 정해짐)부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후

배경 이미지를 화면에 고정하는 속성배경 이미지의 위치를 지정하는 속성배경을 꾸미는 여러 값을 한 번이 지정하는 단축 속성웹 페이지의 레이아웃을 구성할 때가 가장 중요박스 크기, 배경색, 여백, 옆 박스와의 거리 등 제어 가능HTML 태그를 출력할 것인지 숨길 것인지 지

절대 위치 좌표: 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정position:static브라우저의 디폴트 배치 방식HTML 태그의 작성된 순서대로 출력 위치를 정함top, bottom, left, rig

자식 요소에 float를 적용하면 부모가 자식을 못 잡고 자기 높이를 잃어버리기 때문에 자식 높이만큼 영역을 갖기 위해서 overflow:hidden 설정자식 태그에 float을 적용하면 부모 태그는 높이 값을 잃어버림부모 태그에 overflow:hidden을 적용해서

리스트 종류 | 순서 있는 리스트 (ordered list) | ol … /ol | \| --- \| --- \| | 순서 없는 리스트 (unordered list) | ul … /ul | | 정의 리스트 (definition list) | dl … /dl

PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌사용자에게 편리한 웹 사이트를 제공사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나

Position 속성Float 속성Table 태그복잡하고 시간이 오래 걸림박스 안 아이템들의 수직 정렬 등에 제약이 있음이미지와 텍스트를 어떤 방식으로 배치할 것인지를 정하는 css 속성‘배치’와는 전혀 상관없는 속성으로 박스 배치를 해오고 있었음가변적인 박스로 만드는

격자, 바둑판을 의미웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 의미특징시각적으로 안정된 레이아웃 유지업데이트가 편리자유로운 요소 배치그리드를 적용한 요소의 바깥 부분을 그리드 컨테이너로 생성예

1995년 넷스케이프에서 개발된 웹 프로그래밍 언어웹 페이지에서 동작하는 프로그램을 만들 때 사용웹 페이지가 어떻게 보일지 제어사용자가 버튼을 클릭했을 때 페이지가 반응을 보이게 함사용 분야웹 어플리케이션지도서비스, 게임 등 다양한 분야페이스북, 트위터 등의 사이트이

조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)를 실행if-elseswitchif문조건식이 참이면 실행문을 실행한 후 if문을 벗어남조건식이 거짓이면 바로 if문을 벗어남if문 안에 if문이 들어갈 수 있음(중첩 if문)if-else문조건식이 참인 경우와

데이터 값을 하나의 목록으로 생성여러 개의 원소들을 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조예) 가장 좋아하는 과일 3가지 목록변수 3개를 작성하지 않고, 과일TOP3라는 배열 하나만 생성대괄호( ) 사용대괄호 안에 값을 입력, 여러 개일 경우 쉼

목적을 가지고 작성된 코드 블록데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록함수의 코드 실행 요청eval( ) 함수식을 계산하고 결과 리턴parseInt( ) 함수문자열을 숫자로 바꿔주는 함수inNaN( ) 함수숫자가 아님을 나타내는 함수 (Not A N

객체(Object)실생활에 존재하는 실제적인 물건 또는 개념속성(Attribute)객체가 가지고 있는 특성메서드(Method)객체가 동작(행동)할 수 있도록 하는 함수클래스(Class)객체가 가져야 할 기본적인 정보를 담은 코드객체를 효율적으로 생성하기 위해 만들어진

이벤트마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지이벤트 리스너발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드이벤트 종류HTML5에서 이벤트 종류는 70여개이벤트 리스너 이름은 이벤트 이름

\[https://alvarotrigo.com/fullPage/ko/웹사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈 소스 기반의 자바스크립트 라이브러리특징웹 페이지 상에서 엘리먼트(Element)를 쉽게 찾고 제어웹 브라우저 호환성이 뛰어남애니

응용 프로그램에서 데이터를 주고 받기 위한 방법API 사용 시, 개발 시간 및 비용 절감 가능누구나 사용할 수 있도록 공개된 API지도, 날씨, 음악, 공공데이터, 쇼핑 등 다양한 분야에서 사용 가능제공처네이버, 카카오, 구글위도, 경도 값으로 날씨 api 호출하기la

페이스북이 만든 사용자 UI 구축을 위한 라이브러리Component 기반Virtual DOM 사용JSX 문법 사용제어의 흐름 권한이 누구에게 있는가?컴퓨터에게 있음: 프레임워크나에게 있음: 라이브러리공통점코드 재사용 가능프로그래밍이 쉬워짐일정한 형태와 기능을 갖추고 있

Movie 컴포넌트 생성 후 영화 정보 입력App.js 컴포넌트에서 Movie 컴포넌트 3번 사용Movie 컴포넌트는 1개만 사용App.js에서 Movie 컴포넌트에 필요한 데이터를 전달상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터단방향 데이터 흐름부모가

값을 저장하거나 변경할 수 있는 객체컴포넌트 내부에서 바뀔 수 있는 값을 의미주로 버튼 클릭과 같은 이벤트와 함께 사용함props와 차이점props는 부모 컴포넌트가 설정한 값을 전달받아 읽기 전용으로만 사용할 수 있음props는 컴포넌트 내부에서는 값을 직접 변경할

eventHTML.html이벤트를 사용할 때 주의사항이벤트 이름은 카멜 표기법으로 작성onClick, onKeyUp 등이벤트의 값으로 함수 형태를 전달실제 자바스크립트 코드를 전달하지 않음DOM 요소에만 이벤트를 설정할 수 있음div, button, input, for

컴포넌트이름-클래스 형태프로젝트 내 App.cssBEM 네이밍 방식Block, Element, Modifier선택자(Selector)를 만들 때 매번 부모 요소 선택자를 넣어줘야 함함수 기능 제공 안 함중복되는 스타일 코드가 많음코드 양 증가로 유지보수가 어려움문법먹으

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술값 형태사용 방법버전 2 이상부터는 별도의 설정이 필요 없고, 다음과 같은 확장자로 파일을 저장하기만 하면 적용CSS Module을

리액트 버전 16.8에 새로 도입된 기능함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공종류useStateuseEffectuseRefuseReduceruseMemouseCallback가장 기본적인 Hook함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해줌형태예

컴포넌트의 상태를 관리할 때 사용하는 Hooks특징컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 가능다른 컴포넌트에서도 해당 로직을 재사용 가능UntitledUntitledUntitled현재 상태(state)와 action 객체(업데이트를 위한 정보)를 인자로 받아

어플리케이션에서 전반적으로 사용할 값을 관리예) 사용자의 언어, 로그인 상태, UI 테마 등 환경설정주의사항Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음Context 내부의 값이 변경되면 Contex

일반 웹 사이트의 동작 과정초기 웹 사이트각 화면에 해당하는 웹 문서를 일일이 제작서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발서버 사이드 렌더링(Server Side Rendering)ASP(Active Server Page), JSP(Java Ser

요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식서버의 응답이 올 때까지 기다려야 함특징설계가 간단하고 직관적요청에 대한 응답을 받을 때까지 대기해야 하는 단점요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식특징동기 방식보다 복잡함요청에

개발자사용자개발자사용자변수 값에 데이터 타입 지정 가능예측 가능한 코드 작성 가능디버깅 편리객체지향 프로그래밍 가능클래스 기능 제공컴파일: 특정 언어의 코드를 다른 언어로 바꿔주는 과정브라우저는 타입스크립트 언어를 이해할 수 없기 때문에 자바스크립트로 변환TypeScr

타입이 객체인 p1, p2, p3 객체를 생성하는 예코드마다 중복되는 객체 타입을 하나로 만들 수 있다면?코드의 재사용성을 높임작성 중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용인터페이스는 자바스크립트 코드로 컴파일 되지 않음첫글자를 대문자로 표기

printArray 함수에 숫자 타입의 배열을 전달printArray 함수에 문자열 타입의 배열을 전달printArray 함수에 불리언 타입의 배열을 전달printArray 함수가 다양한 타입을 전달받아 처리하기 위해서는 함수 선언부에 해당 타입을 모두 명시해야 함이런

2005년 리눅스 토르발스가 처음 소개특징컴퓨터 파일의 변경사항을 추적여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템개발자들은 깃을 통해 수많은 소스 코드를 효율적으로 관리버전 관리(Version Control)백업(Backup)협업

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 11주차 블로그 포스팅

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 12주차 블로그 포스팅

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 13주차 블로그 포스팅