CSS 크기 단위 CSS 크기 단위는 대표적으로 px, %, em, rem 등이 있습니다. 하나하나 살펴보도록 합시다. px px는 픽셀 단위입니다. 1px은 화소 1개 크기를 의미하죠. 우리가 보는 디스플레이는 모두 아주 작은 픽셀이 모여 이루어져 있습니다. px은 디바이스 해상도에 따라 상대적은 크기를 갖습니다. 따라서 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용됩니다. % %는 백분율 단위의 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다. em em은 배수 단위로 상대적인 단위입니다. 요소에 지정된 사이즈에 상대적인 사이즈로 지정됩니다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 지정된 사이..

선택자(Selector) 선택자는 CSS에서 HTML 요소를 가리킬 때 사용합니다. 선택자를 활용하여 여러 요소 중 원하는 요소만 특정하여 CSS를 적용할 수 있습니다. 전체 선택자 ’*’을 사용하며 모든 요소를 선택합니다. 태그 선택자 태그명에 해당하는 요소를 모두 선택합니다. ID 선택자 요소 어트리뷰트의 id와 일치하는 요소를 선택합니다. id는 HTML 문서 내에서 유일한 값입니다. 클래스 선택자 요소 어트리뷰트의 class와 일치하는 요소를 선택합니다. class는 HTML 문서 내에서 중복될 수 있습니다. 어트리뷰트 선택자 선택자[어트리뷰트]: 선택자의 어트리뷰트가 일치하는 요소들을 선택합니다. 선택자[어트리뷰트=“값”]: 어트리뷰트의 값까지 일치하는 요소들을 선택합니다. 선택자[어트리뷰트~=..

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 시작하기에서 가져왔습니다.) 여는 태그 : 에 해당되며, 태그를 시작합니다...