CSS CSS(Cascading Style Sheet)는 HTML 요소들이 브라우저 상에서 보여지는 스타일을 정의한 스타일 시트 언어입니다. HTML의 어트리뷰트로만 스타일을 모두 작성하면 작성도 힘들 뿐더러 동적인 스타일 변경 및 유지보수가 매우 힘듭니다. 이러한 문제점을 해결하기 위해 W3C에서 만든 스타일 언어가 CSS입니다. CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있으므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다. 또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지보수 또한 쉬워집니다. 이러한 외부 스타일 시트는 보통 .css의 확장자로 저장됩니다. 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다...

※ 이 글은 캡틴판교님의 인프런 강좌 ’프론트엔드 개발자를 위한 웹팩’을 수강한 후 공부한 내용을 정리한 글입니다. 웹팩 버전은 4.42.0 버전 기준입니다. 프론트엔드 개발자를 위한 웹팩 웹팩 핸드북 웹팩 공식 사이트 Webpack 웹팩은 현재 가장 많이 사용되는 모듈 번들러입니다. 모듈 번들러는 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript, Images, Fonts 등 유기적인 각각의 모듈들을 파싱하여 하나의 파일로 만들어주는 도구를 말합니다. 필요성 1. 파일 단위의 자바스크립트 모듈 관리 자바스크립트에서 var로 선언한 변수는 기본적으로 전역에서 접근할 수 있습니다. 그래서 어디서든 접근할 수 있다는 점이 특징이죠. 하지만 이는 많은 문제점을 야기합니다. 특히 여러 모듈로 분..

HTML의 두 영역 중 하나인 영역은 브라우저를 위한 정보를 담고 있는 영역입니다. 이 영역에는 웹 페이지의 문자 포맷, 작성자의 이름, 웹 페이지의 제목, 웹 페이지의 설명 등 수많은 메타데이터를 입력할 수 있습니다. 먼저 제목을 변경해보도록 합시다. 위와 같이 웹 페이지의 제목이 바뀐 것을 확인할 수 있습니다. 이번엔 charset 속성을 알아보도록 합시다. charset은 웹 페이지를 인코딩하는 방식을 설정해주는 속성입니다. 인코딩 방식에는 여러 방식이 존재하지만 전세계적으로 가장 많은 언어를 포함하고 있는 방식인 UTF-8을 기본적으로 사용합니다. 만약 인코딩 방식과 페이지 내의 데이터들이 맞지 않는다면 웹 페이지에는 읽기가 매우 힘든 문자들로 표시될 겁니다. 아래를 한 번 봅시다. 현재 UTF-..

HTML(HyperText Markup Language)은 웹 문서의 구조를 만드는 마크업 언어입니다. 건축과 비교하면 철골을 세우는 작업을 하는 것과 같습니다. HTML은 element로 이루어져 있고, tag를 통해 각 부분의 역할을 나눕니다. HTML 문서는 기본적으로 ~ 안에 작성되며, 영역, 영역으로 나누어져 있습니다. 영역은 문자 형식, 브라우저에 대한 설명글 등 meta 태그로 브라우저에게 정보를 주거나 title과 같은 제목을 작성합니다. 영역은 사용자에게 노출되는 영역으로 웹 페이지를 열면 보이는 것들이 영역 안에 작성됩니다. 아래의 예제를 통해서 element의 구조를 살펴보도록 하죠.(이미지는 MDN HTML 시작하기에서 가져왔습니다.) 여는 태그 : 에 해당되며, 태그를 시작합니다...