'백엔드 로드맵/프론트엔드 기본 지식' 카테고리의 글 목록

CSS란?

CSS는 "Cascading Style Sheets"의 약자로, 웹 페이지의 스타일을 정의하는 데 사용되는 언어입니다.
HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조에 스타일을 입혀 시각적으로 보기 좋게 만듭니다.
다음은 CSS의 주요 기능과 개념들입니다.

주요 기능

디자인 및 레이아웃 정의

텍스트 색상, 글꼴, 크기 / 배경색 및 이미지 / 요소의 배치 및 정렬 / 마진, 패딩, 테두리 등

반응형 디자인

다양한 화면 크기와 장치에 맞춰 웹 페이지가 적절하게 보이도록 만듭니다.
미디어 쿼리를 사용하여 다양한 장치에서 다른 스타일을 적용할 수 있습니다.

스타일 재사용

CSS 클래스를 사용하여 여러 HTML 요소에 동일한 스타일을 적용할 수 있습니다.
스타일 정의를 외부 CSS 파일로 분리하여 여러 페이지에서 재사용할 수 있습니다.

기본 개념

선택자(Selector)

CSS 규칙이 어떤 HTML 요소에 적용될지를 정의합니다.
예: h1, .class-name, #id-name

속성(Property)

스타일의 특정 측면을 정의합니다.
예: color, font-size, margin

값(Value)

속성에 부여되는 실제 스타일 값입니다.
예: color: blue;, font-size: 16px;

CSS는 웹 디자인과 개발에서 매우 중요한 역할을 하며, 웹 페이지의 외관과 사용자 경험을 향상시키는 데 필수적인 도구입니다.

'백엔드 로드맵 > 프론트엔드 기본 지식' 카테고리의 다른 글

[백엔드 로드맵] JavaScript란? (0)	2024.05.23
[백엔드 로드맵] HTML이란? (0)	2024.05.22

JavaScript란?

자바스크립트는 1995년에 탄생한 이후, 지속적으로 발전하며 웹 개발의 중심에 자리 잡고 있습니다.
초기에는 간단한 스크립트 언어였으나, 현재는 클라이언트 및 서버 사이드 개발 모두를 아우르며, 다양한 프레임워크와 도구들을 통해 더욱 강력하고 유연한 언어로 성장했습니다.

초기 개발
자바스크립트는 1995년에 넷스케이프 커뮤니케이션즈(Netscape Communications)의 브렌던 아이크(Brendan Eich)에 의해 개발되었습니다.
원래는 Mocha라는 이름으로 개발되었고, 이후 LiveScript로 이름이 바뀌었다가 JavaScript로 최종 명명되었습니다.

표준화
1997년, ECMA 인터내셔널(ECMA International)에 의해 표준화되었으며, 표준명은 ECMAScript입니다.
자바스크립트는 ECMAScript 표준을 따르며, 다양한 버전으로 발전해 왔습니다.

자바스크립트의 주요 특징

동적 타이핑

자바스크립트는 변수의 타입을 명시하지 않아도 됩니다.
동일한 변수에 여러 타입의 값을 저장할 수 있습니다.

객체 지향

자바스크립트는 객체 지향 프로그래밍(OOP)을 지원합니다.
프로토타입 기반의 객체 모델을 사용하여 객체를 생성하고 상속할 수 있습니다.

이벤트 기반

자바스크립트는 이벤트 핸들링을 통해 사용자와 상호작용할 수 있습니다.
클릭, 키보드 입력 등 다양한 이벤트에 반응하는 코드를 작성할 수 있습니다.

함수형 프로그래밍

자바스크립트는 일급 함수(first-class functions)를 지원하여 함수형 프로그래밍 패러다임을 구현할 수 있습니다.
함수는 변수에 할당되거나 다른 함수의 인자로 전달될 수 있습니다.

비동기 프로그래밍

자바스크립트는 콜백, 프라미스(Promises), async/await 등을 통해 비동기 프로그래밍을 지원합니다.
비동기 작업을 통해 웹 애플리케이션의 응답성을 높일 수 있습니다.

자바스크립트의 사용 사례

웹 개발

클라이언트 측 스크립트로서 HTML과 CSS와 함께 웹 페이지를 동적으로 만들어 줍니다.
DOM(Document Object Model) 조작을 통해 페이지 내용을 동적으로 변경할 수 있습니다.

서버 사이드 개발

Node.js와 같은 런타임 환경을 통해 서버 사이드 개발에도 사용됩니다.
Node.js는 자바스크립트를 사용하여 서버 애플리케이션을 작성할 수 있도록 합니다.

모바일 애플리케이션

React Native, Ionic 등 프레임워크를 통해 모바일 애플리케이션 개발에 사용됩니다.

데스크탑 애플리케이션

Electron과 같은 프레임워크를 사용하여 데스크탑 애플리케이션을 개발할 수 있습니다.

자바스크립트의 주요 라이브러리와 프레임워크

jQuery

DOM 조작을 간단하게 해주는 자바스크립트 라이브러리입니다.

React

페이스북에서 개발한 UI 라이브러리로, 컴포넌트 기반 아키텍처를 사용합니다.

Angular

구글에서 개발한 프레임워크로, MVC(Model-View-Controller) 아키텍처를 기반으로 합니다.

Vue.js

점진적으로 적용할 수 있는 프레임워크로, React와 Angular의 장점을 결합한 구조입니다.

자바스크립트는 웹 개발의 핵심 요소로, 클라이언트 및 서버 측 개발 모두에 널리 사용됩니다.
그 동적이고 유연한 특성 덕분에 다양한 애플리케이션 개발에 중요한 역할을 합니다.

'백엔드 로드맵 > 프론트엔드 기본 지식' 카테고리의 다른 글

[백엔드 로드맵] CSS란? (0)	2024.05.24
[백엔드 로드맵] HTML이란? (0)	2024.05.22

HTML이란?

HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)는 웹 페이지와 웹 애플리케이션을 만들기 위해 사용되는 표준 마크업 언어입니다.
HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다.
HTML 문서는 요소들로 구성되며, 이 요소들은 태그를 사용하여 표시됩니다.

HTML의 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가집니다.

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html>: HTML 문서의 루트 요소입니다.
<head>: 문서의 메타데이터를 포함하는 부분입니다(문서 제목, 문자 인코딩 정보 등).
<title>: 웹 브라우저의 제목 표시줄에 나타나는 문서의 제목을 정의합니다.
<body>: 실제로 표시될 콘텐츠를 포함하는 부분입니다.

HTML 요소

HTML 요소는 시작 태그와 종료 태그, 그리고 그 사이의 내용으로 구성됩니다.
예를 들어, 단락 요소는 다음과 같습니다.
<p>: 단락을 시작하는 태그
</p>: 단락을 종료하는 태그
태그 사이의 텍스트가 단락의 내용입니다.

주요 HTML 태그

<h1>, <h2>, ... <h6>: 제목을 정의합니다. <h1>이 가장 중요하고 <h6>이 가장 덜 중요합니다.
<p>: 단락을 정의합니다.
<a>: 하이퍼링크를 정의합니다. 예를 들어, <a href="https://chanchanmon0902.tistory.com">링크</a>.
<img>: 이미지를 삽입합니다. 예를 들어, <img src="image.jpg" alt="설명">.
<ul>, <ol>, <li>: 순서 없는 목록과 순서 있는 목록을 정의합니다.
<div>: 블록 레벨 요소로, 주로 스타일링이나 스크립트용으로 사용됩니다.
<span>: 인라인 요소로, 주로 텍스트의 일부분을 스타일링할 때 사용됩니다.

HTML은 웹의 근간을 이루는 언어로서, 웹 페이지의 구조와 콘텐츠를 정의합니다.
CSS(캐스케이딩 스타일 시트)와 함께 사용되어 웹 페이지의 스타일을 지정하며, JavaScript와 결합하여 웹 페이지에 동적인 기능을 추가할 수 있습니다.
HTML은 웹 브라우저가 이해하고 렌더링할 수 있는 형태로 작성되므로, 모든 웹 페이지는 HTML로 작성됩니다.

'백엔드 로드맵 > 프론트엔드 기본 지식' 카테고리의 다른 글

[백엔드 로드맵] CSS란? (0)	2024.05.24
[백엔드 로드맵] JavaScript란? (0)	2024.05.23

뜨균이의 개발 생활