Front-end
1.[HTML] HTML 기본
HTML이란? HTML(Hyper Text Markup Language)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어이다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수
2.[HTML] 시멘틱 태그(sementic tag)
시멘틱 태그는 HTML에서 의미론적으로 의미를 가진 태그이다. 이러한 태그들은 단순히 스타일이나 행동을 정의하는 것이 아니라, 그 내용이 어떤 역할을 하는지를 명확히 나타낸다.SEO(Search Engine Optimization) 최적화에 유리검색 엔진이 태그의 목적
3.[HTML] 태그 모음
<!DOCTYPE>: 마크업 언어용 DTD 태그<html>: HTML이 작용하는 범위를 지정하는 태그<head>: HTML 문서의 속성 범위를 지정하기 위한 태그<body>: HTML 문서의 본문 범위를 지정하기 위한 태그<title>: HT
4.[CSS] 기본 개념
CSS(Cascading Style Sheet)는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다. HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 웹 페이지의 구조를 만드는 것이라면 CSS는 이러한 구조에 색상이나 크기, 이미지 크기나 위치
5.[CSS] 선택자와 스타일 속성
스타일은 적용 대상이 있어야 하는데 선택자가 바로 그 대상이다. 기본적으로 태그, 아이디, 클래스를 선택자로 사용하고 조합하여 선택자를 정의해 사용한다.기본 선택자에는 태그, 아이디, 클래스 3가지가 있다.태그 선택자는 태그 이름으로 요소를 선택문서내 임의의 태그를 선
6.[CSS] 박스 모델과 포지셔닝
절대적인 크기가 정해져 있는 단위로 절대 단위는 화면 크기나 해상도에 따라 지나치게 크거나 작게 보일 수 있다.자주 쓰는 대표적인 예로 px이 있다.부모요소의 크기를 기준으로 상대적인 크기를 지정하는 단위이다. 적절한 설계를 통해 상대 단위를 잘 활용하면 반응형 웹 등
7.[CSS] 복합 선택자
CSS에서 상속이란 HTML 계층구조에서 특정 속성들이 부모요소로부터 자식요소로 전달되는 개념이다.상속은 상위 객체와 하위 객체의 관계형 구조를 의미상속은을 이용하면 생산성을 높이고 유지 보수가 편하고 재활용이 용이HTML 요소들의 상속 구조 관계에서 원하는 요소를 선
8.[CSS] Flexbox
일반적으로 웹 페이지의 레이아웃은 display, float, position 등과 같은 속성을 사용해 구현한다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는데 많은 한계가 있다.Flexbox는 이러한 문제점을 해결하고 박스요소들에 대한 효과적인
9.[JavaScript] 데이터타입
let 키워드는 ES6에서 도입된 변수 선언 방식이다. let으로 선언된 변수는 블록 스코프(block scope)를 가지며, 이는 변수가 선언된 블록 내에서만 유효함을 의미한다.var는 이전에 널리 사용되던 변수 선언 방식이다. 현재는 사용하지 않는다.const는 상
10.[JavaScript] 연산자와 제어구조
문자열 연결은 두 개의 문자열을 하나로 결합하는 과정이다.JavaScript에서 기본적인 수학 연산을 수행하는 연산자들이다.변수 값을 증가시키거나 감소시키는 연산자들이다.변수에 값을 할당하는 데 사용되는 연산자들이다.두 값이나 표현식을 비교하는 데 사용되는 연산자들이다
11.[JavaScript] 함수
함수를 정의하고 호출하는 기본 방법이다.함수에 전달된 매개변수는 값 또는 참조에 의해 전달된다.함수 호출 시 매개변수를 생략하면 기본값이 사용된다.함수에 여러 인잘르 배열로 받을 수 있다.함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없다.함수는 값을 반환할 수
12.[JavaScript] 클래스와 오브젝트
JavaScript에서 클래스는 객체 지향 프로그래밍을 구현하는 하나의 방법으로, ES6에서 도입되었다. 클래스는 프로토타입 기반 상속을 위한 Syntactical Sugar로, 보다 쉽고 명확한 객체 생성 및 상속 방식을 제공한다.클래스는 class 키워드를 사용하여
13.[JavaScript] 배열
배열은 여러 데이터를 순차적으로 저장하는 자료구조로, 여러가지 메서드를 통해 데이터를 쉽게 조작할 수 있다.배열은 대괄호 \[] 또는 new Array() 생성자를 사용하여 선언할 수 있다.배열의 각 요소는 인덱스로 접근할 수 있다.배열의 모든 요소를 순회하는 방버은
14.[JavaScript] JSON
JSON은 JavaScript Object Notation의 약자로, 데이터를 저장하거나 전송할 때 사용되는 경량의 데이터 형식이다. JSON은 텍스트 형태로 존재하며, JavaScript에서는 JSON.stringify()와 JSON.parse() 함수를 사용하여 J
15.[JavaScript] 비동기 처리
JavaScript의 실행 컨텍스트는 동기적(synchronous)이며, 코드는 작성된 순서대로 실행된다. 그러나 JavaScript는 비동기적(asynchronous) 처리를 지원하는 몇 가지 기능을 제공한다.비동기적 처리는 특정 코드를 실행 완료를 기다리지 않도 다