2026-03-05 (목)
HTML5
(하이퍼텍스트 마크업 랭귀지 파이브)
웹페이지의 뼈대와 의미를 정의
이전 버전과 달리 시맨틱 태그를 도입해
문서 구조를 명확히 하고
별도 플러그인 없이 멀티미디어 자체 지원
CSS3
(캐스케이딩 스타일 시트 쓰리)
웹의 시각적 디자인과 레이아웃 담당
이전 버전과 달리 미디어 쿼리를 통해
반응형 웹을 구현하고
플렉스박스 레이아웃 및 자체 애니메이션 지원
2026-03-06 (금)
자바스크립트
자바스크립트는 모든 웹 브라우저가 직접 이해하고 실행하는 유일한 언어로 리액트, 뷰같은 최신 프론트엔드 기술들의 기반이되는 핵심 토대이며 멈춰있는 화면에 생명력을 불어넣어 사용자와 상호작용 하게 만들어줍니다
웹 페이지를 살아 움직이게 하는 동적 프로그래밍 언어
버튼을 누르면 팝업창이 뜨거나 이미지 슬라이드가 되는 웹페이지의 모든 움직임과 상호작용을 담당
HTML, CSS, JS 역할과 관계 비유
HTML - 식당의 건물, 주방 등 식당 운명에 필요한 뼈대 공간의 역할
CSS - 예쁜 접시, 조명, 벽지같은 가게 분위기를 결정하는 인테리어와 같은 역할
JS - 손님이 다가가면 열리는 자동문, 벨을 누르면 오는 직원처럼 손님의 행동에 맞춰 반응하는 서비스 동작
2026-03-09 (월)
도메인
복잡한 숫자로 되어있는 컴퓨터의 진짜 주소 (IP 주소)를 사람이 기억하기 쉽고 입력하기 쉽게 영어 등의 문자로 바꾼 대표 상호명의 역할
URL
(유니폼 리소스 로케이터)
도메인을 포함한 웹페이지의 주소나 이미지파일의 위치를 알려주는 정확하고 정확하고 구체적인 전체 상세 주소
2026-03-10 (화)
Web hosting
하나의 서버 자원(CPU, 메모리, 디스크 등)을 여러 사용자가 분할하여 공유하는 서비스
Server hosting
웹 호스팅에서 분할해서 사용하던 서버 자원을 단독으로 임대해서 사용하는 서비스
disk
웹 사이트를 구성하는 소스 코드와 미디어 파일이 실제로 저장되는 서버의 물리적 용량
traffic
사용자가 웹사이트에 접속하여 페이지를 열람할때 서버에서 전송되는 데이터의 총량
DB
사용자의 행동으로 발생한 동적 데이터를 구조화하여 저장, 조회, 관리하는 시스템으로 디스크와는 분리된 별도의 데이터 공간
2026-03-11 (수)
웹 사이트 트래픽
호스팅 스펙에서의 트래픽과는 다른 웹 사이트에 방문하는 사람들의 발걸음을 의미
단순히 몇 명이 들어왔는지뿐만 아닌 어디서 왔는지 어떤 페이지를 오래 봤는지 등 모든 발자취를 포함
대표적인 트래픽 분석도구
구글 애널리틱스(GA)로 무료로 사용 가능하며 전 세계에서 사실상 표준도구로 사용되고 있음
사용방법
구글 애널리틱스 사이트에 가입하여 웹 사이트를 등록하고 구글에서 발급해주는 자바스크립트 코드 뭉치를 받아서 HTML에 코드를 삽입하면 사용 가능
2026-03-12 (목)
FTP - File Transfer Protocol
(파일 트랜스퍼 프로토콜)
내 컴퓨터에 있는 파일이나 소스 코드를 안전하게 올리거나 내리기 위한 대용량 파일 전송 규칙
HTTP - HyperText Transfer Protocol
(하이퍼텍스트 트랜스퍼 프로토콜)
웹 브라우저와 서버가 웹페이지의 데이터를 주고 받기 위해 사용하는 기본적인 대화 규칙
2026-03-13 (금)
파일의 절대 경로
(Absolute Path : 앱솔루트 패스)
현재 위치와 상관없이 고정되어있는 파일의 고유 주소
상대 경로
(Relative Path : 렐러티브 패스)
현재 위치를 기준으로 대상 파일의 위치를 알려주는 방식
2026-03-16 (월)
UTF-8
(유니코드 트렌스포메이션 포맷 - 8 (비트)
Unicode Transformation Format - 8
전 세계 표준 문자를 컴퓨터가 알아들을 수 있게 8비트 단위로 변환해 주는 규칙
2026-03-17 (화)
웹폰트
사용자의 컴퓨터나 스마트폰에 해당 폰트 파일이 설치되어 있지 않아도 인터넷을 통해 폰트를 임시로 내려받아 웹페이지를 올바르게 보여주는 기술이다
2026-03-18 (수)
시스템 폰트
윈도우나 맥 등 사용자의 기기에 운영체제에 기본적으로 내장되어있는 폰트
장점 - 웹에서 폰트 파일을 따로 다운로드 할 필요가 없어서 로딩 속도가 빠르고 웹사이트 성능 최적화에 유리하다
단점 - 사용자가 접속한 기기마다 각기 다른 폰트로 보이기 때문에 일관된 디자인을 100% 똑같이 유지하기 어렵다
2026-03-19
이미지 폰트
글자를 진짜 텍스트로 치는게 아닌 디자인된 글씨를 아예 하나의 그림 파일로 만들어서 웹에 띄우는 방식
장점 - 화려하고 복잡한 글꼴이나 특수 효과를 기기나 브라우저 환경에 영향받지 않고 똑같은 디자인으로 보여줄 수 있다
단점 - 검색 엔진이 그림으로 인식해서 검색 노출에 불리하고 유지보수가 힘들다
2026-03-20
TTF - TrueType Font
애플과 마이크로소프트가 함께 만든 표준 폰트 파일 형식
일반적인 문서 작업용(워드, 엑셀 등)
OTF - OpenType Font
마이크로소프트와 어도비가 만든 TTF보다 한 단계 더 진화한 전문가용 폰트 파일 형식
전문가용 고해상도 디자인 작업용
2026-03-23
WOFF - Web Open Font Format
웹 사이트에서 폰트를 빠르게 불러오기 위해 기존 폰트의 용량을 압축한 웹 전용 폰트 파일 형식
웹폰트를 내 웹사이트에 직접 적용할때 사용하고 TTF보다 용량이 훨씬 가볍고 거의 모든 웹 브라우저에서 완벽하게 지원하기 때문에 현재 프론트엔드 실무에서 가장 표준으로 쓰이는 포맷
2026-03-24
em - Parent Relative
자신이 속한 부모 요소의 폰트 크기를 기준으로 배수가 곱해지고 레이아웃이 중첩될수록 크기 관리가 어려움
rem - Root Relative
문서의 최상위 요소 단 하나만 기준으로 삼기 때문에 계산이 직관적이고 실무에 많이 사용됨
2026-03-25
JPG - Joint Photographic Experts Group (조인트 포토그래픽 엑스퍼츠 그룹)
파일 용량을 획기적으로 줄이기 위해 눈에 띄지 않는 이미지의 일부 데이터를 지우는 손실 압축 방식을 사용 (배경을 투명하게 만드는 기능은 지원하지 않음)
모던 웹에서는 화질을 미세하게 포기하는 대신 용량을 확 줄일 수 있어서 색상이 복잡하게 섞인 고해상도 실사 사진이나 웹사이트의 큼직한 배경 사진에 주로 사용한다
2026-03-26
PNG - Portable Network Graphics(포터블 네트워크 그래픽스)
화질을 전혀 훼손하지 않고 원본 데이터 그대로 보존하는 무손실 압축
jpg에 없는 알파 채널기능을 지원해서 이미지 배경을 투명하게 만들 수 있다
웹사이트 상단의 로고, 아이콘, 버튼등 그래픽 요소에 주로 사용한다
2026-03-27
webP
구글이 웹 페이지 로딩 속도를 높이기 위해 만든 이미지 포맷으로 jpg같은 압축과 png같은 투명도를 가졌지만 용량은 훨씬 가벼운 만능 포맷
고화질 상품 사진부터 투명한 로고나 배너까지, 트래픽을 아끼고 화면을 빠르게 띄워야하는 거의 모든 모던 웹 서비스에서 기존 포맷을 대체하여 사용
2026-03-30
SVG
벡터 방식으로 선명함이 유지되고 텍스트 코드로 이루어져 있어 에디터에서 코드로 수정이 가능하며 단순한 도형의 경우 파일 용량이 가볍다
모던 웹에서 웹 아이콘 및 로고에 주로 사용하고 코드로 되어있기 때문에 애니메이션등 동적 효과 제어도 가능하다
2026-03-31
Hex code
빛의 3원색 비율을 16진수 문자로 조합해 총 6자리로 표현하는 웹 표준 색상 코드
#ff0000(빨간색) #000000(검은색)
2026-03-31
RGBA - Red, Green, Blue, Alpha
빛의 3원색에 투명도를 결정하는 알파값을 추가하여 색상을 표현하는 방식
0.0(완전 투명) ~ 1.0(완전 불투명)
rgba(0, 0, 0, 0.5) 검은색에 투명도0.5를 적용하여 반투명하게 만들 수 있다
2026-04-01
semantic tag 중 가장 중요한 7개
<header> - 웹 문서나 특정 구역의 맨 위에 위치하는 로고, 검색창 등의 머리말 영역
<nav> - 사이트 내 주요 메뉴나 이동 링크를 모아두는 네비게이션 영역
<main> - 웹 문서 전체에서 중심이 되는 가장 핵심 콘텐츠 영역 (페이지당 한 번만 사용)
<section> - 연관된 내용들을 하나의 주제로 묶어주는 그룹화 영역
<article> - 뉴스 기사나 블로그 글처럼 독립적으로 떼어내도 의미가 완벽히 통하는 영역
<aside> - 본문 내용과 직접적인 연관성이 적은 사이드바, 배너, 부가 정보 영역
<footer> - 웹 문서 맨 아래에 위치하여 저작권, 연락처 등을 표시하는 꼬리말 영역
2026-04-02
해상도 통계
해상도 통계 1위 - 1920*1080 43.25%
해상도 통계 2위 - 2560*1440 16.08%
리서치 기관 - 스탯카운터
리서치 일자 - 최근 1년
2026-04-06
국내 모바일 웹 브라우저 점유율 순위
1위 Chrome 36.43%
2위 Samsung Internet 25.01%
3위 Safari 22.9%
통계기관 - 스탯카운터
통계일자 - 최근1년
2026-04-07
대한민국 모바일 디바이스 해상도 통계 베스트3
통계 1위 - 414x896 14%
통계 2위 - 384x832 10%
통계 3위 - 360x780 9%
리서치 기관 - 스탯카운터
리서치 일자 - 최근 1년
2026-04-08
mobile only
pc버전을 고려하지 않고 오직 모바일 앱 환경에 모든 기능과 디자인을 집중하는 전략이다.
2026-04-09
RWD (Responsive Web Design - 반응형 웹 디자인)
리스판시브 웹 디자인
하나의 HTML소스로 화면 크기에 따라 레이아웃이 유동적으로 변하는 방식
AWD (Adaptive Web Design - 적응형 웹 디자인)
어댑티브 웹 디자인
미리 정해진 특정 해상도에 맞춰서 준비된 레이아웃을 보여주는 방식
사용자 기기에 맞춰 최적의 화면을 보여준다는 목적은 같지만 구현하는 방법이 다르다
전체적인 틀은 RWD로 잡되 특정 기기에선 아예 다른 기능을 보여줘야할때 AWD방식을 부분적으로 도입하기도 한다
2026-04-10
viewport
웹 페이지가 사용자에게 실제로 보여지는 화면 영역
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2026-04-13
Media Query
기기의 특성에 따라 서로 다른 스타일을 적용할 수 있게 해주는 CSS 모듈
@media screen and (min-width: 1366px) {}
2026-04-14
Native App (네이티브 앱)
특정 운영체제에 최적화된 언어로 개발되어 기기에 직접 설치되는 가장 정석적인 앱
장점 - 속도가 가장 빠르고 하드웨어 기능을 완벽하게 활용하며 사용자 경험이 매우 뛰어나다
단점 - 플랫폼별로 따로 개발해야 하므로 비용과 시간이 많이들고 유지보수가 까다롭다
2026-04-15
Hybrid App (하이브리드 앱)
네이티브 앱의 껍데기 안에 웹 페이지를 담은 웹뷰 기반의 앱 방식
장점 - 한번의 개발로 여러 OS에 배포할 수 있어 경제적이며 웹처럼 실시간 업데이트 가능
단점 - 네이티브 앱보다 구동 속도가 느리고 복잡한 기능, 고사양 그래픽 구현에는 한계가 있다
2026-04-16
모바일 웹 앱
브라우저를 통해 실행되며 앱의 UX를 흉내 낸 모바일 최적화 웹사이트
장점 - 별도의 설치와 심사 과정이 없어 접근성과 유지보수가 매우 뛰어남
단점 - 하드웨어 기능 활용이 제한적이고 네트워크 상태에 따라 성능이 좌우되며 앱스토어 배포가 불가능
2026-04-17
Web Accessibility
웹 접근성은 모든 사용자가 장애 여부와 상관없이 웹 콘텐츠에 접근하고 이해할 수 있도록 보장하는것
2026-04-20
Web Standards
웹 표준은 브라우저나 기기가 달라도 웹사이트가 정상적으로 작동하도록 W3C에서 정한 공식 기술 규격
2026-04-21
웹 표준은 웹 접근성을 높이는 가장 쉽고 확실한 방법으로
웹 표준이 기술적인 약속이라면 웹 접근성은 그 약속을 통해 실현하는 정보의 평등이다
2026-04-22
wireframe (와이어프레임)
색칠하기 전 연필로 밑그림을 그리듯 선과 박스만으로 설계도를 그려서 화면의 구조와 기능을 미리 파악하고 팀원 간의 협업을 원활하게 만드는 역할을 한다
(h1,h2 텍스트로 / 본문은 라인처리 / ui폼은 텍스트로 둔다)
2026-04-23
story board (스토리보드)
와이어프레임에 구체적인 기능 설명과 사용자의 흐름을 더한 최종 기획 문서
2026-04-24
개발명세서
서비스의 기능을 기술적으로 어떻게 구현할지 요구사항과 데이터 처리 규칙을 상세히 기록한 문서
2026-04-27
bootstrap (부트스트랩)
웹사이트 제작에 필요한 디자인 요소(CSS/JS)를 미리 만들어 놓은 프론트엔드 프레임워크
2026-04-28
Vanilla JS (바닐라 자바스크립트)
플러그인이나 라이브러리를 사용하지않고 순수 자바스크립트 기능만 사용하는것으로 웹 개발 실력을 갖추기 위해서 익혀야할 기초
2026-04-29
JS Variable (자바스크립트 베리어블)
자바스크립트 변수는 데이터를 저장하고 이름으로 불러와 사용하기 위한 메모리 상자
var - 똑같은 이름의 상자를 또 만들 수 있어서 실수로 덮어쓸 위험이 크고 요즘은 단점이 많아서 거의 안 쓰이는 추세
let - var의 단점을 보완해서 나온, 값이 변할 수 있는 데이터를 담을때 쓰는 표준 방식
const - 한번 값을 넣으면 절대 바꿀 수 없는 잠긴 상자
2026-04-30
JS data type (자바스크립트 데이터 타입)
자바스크립트가 처리하는 데이터의 형태를 구분하는 기준
크게 기본 타입(Primitive Type)과 참조 타입(Object/Reference Type)으로 나뉜다
기본 타입엔 숫자(Number), 문자(String), 논리(Boolean), 빈 값(Null, Undefined) 등이 있다
2026-05-04
JS null (널)
개발자가 의도적으로 비어있는 상자라고 명시해둔 상태
undefined (언디파인드)
상자(변수)를 만들고 안에 아무것도 넣지 않은 상태
2026-05-06
Control Statement (컨트롤 스테이트먼트)
코드에 생각을 심어주는 제어문
조건문 - 상황에 따라 다른 코드를 실행하고 싶을 때 ( if, else if, else, switch )
반복문 - 똑같은 일은 여러 번 시키고 싶을 때 ( for, while, do...while )
2026-05-07
JS Function (함수)
특정한 목적의 작업을 수행하기 위해 독립적으로 설계된 코드의 집합으로 반복되는 코드를 하나로 묶어둔 코드뭉치 또는 기계
2026-05-08
Parameter (파라미터)
매개변수는 함수 내부에서 사용하기 위해 정의한 변수 이름
Arguments (아규먼트)
인수는 함수를 실행할때 실제로 넘겨주는 구체적인 값
2026-05-11
JS Object (오브젝트)
객체는 관련 데이터와 기능을 하나로 묶어놓은 종합 데이터 주머니
2026-05-12
JS Method (메소드)
객체의 프로퍼티중 값이 함수인것
2026-05-13
JS Property (프로퍼티)
객체의 특징을 나타내는 키(데이터의 이름표)와 값(실제 저장된 데이터)의 한 쌍을 말한다
2026-05-14
JS Built-in Object (빌트인 오브젝트)
자바스크립트가 기본적으로 제공하는 내장 객체
2026-05-15
JS BOM (브라우저 오브젝트 모델)
웹 브라우저의 기능들을 객체로 만들어서 제어할 수 있게 만든 모델
2026-05-18
JS DOM (도큐먼트 오브젝트 모델)
HTML문서를 브라우저가 이해할 수 있도록 객체 형태로 바꾼 모델
2026-05-19
OOP (Object-Oriented Programming) (오브젝트 오리엔티드 프로그래밍)
객체 지향 프로그래밍은 프로그램을 독립된 객체들의 조립식 모음으로 만드는 프로그래밍 방식
'직업훈련 > 직업훈련 일기' 카테고리의 다른 글
| 나만의 coding 룰 10 (1) | 2026.05.08 |
|---|---|
| 나만의 UI/UX 디자인 룰 10 (1) | 2026.03.27 |
| 웹폰트가 훌륭한 레퍼런스 (1) | 2026.03.25 |
| [Test] CSS로 독일 프랑스 국기 그리기 (0) | 2026.03.20 |
| 26-03-05 HTML, 일러스트 테스트 (0) | 2026.03.06 |