본문 바로가기

분류 전체보기218

CSS 레이아웃 배치하기 - Grid Grid 지난 Flex 포스팅에 이어서 이번에는 Grid입니다. 격자라는 의미를 가진 Grid는 그 이름처럼 판 위에 가로 행과 세로 행을 기준으로 요소들을 배치할 수 있습니다. table과도 비슷한 면이 있는데, 보다 다양한 레이아웃의 구성을 더 쉽게 할 수 있다는 특징이 있습니다. 예를 들면 자식 요소들끼리 겹치게 배치되는 형태도 간단히 구현할 수 있게 됩니다. Grid도 Flex와 마찬가지로, 부모가 될 요소에 display: grid; 속성을 할당하는 것으로 간단히 적용할 수 있습니다. Grid container의 형태 결정하기 위에서 Grid는 가로 행과 세로 행을 기준으로 요소를 배치한다고 설명했습니다. 따라서 한 쪽만 지정하는 Flex 컨테이너와는 다르게, Grid 컨테이너는 가로와 세로의 .. 2022. 4. 24.
CSS 레이아웃 배치하기 - Flex 레이아웃을 잡는 Flex와 Grid Flex와 Grid는 레이아웃을 배치할때 사용하는 대표적인 css 속성입니다. 기존의 float나 absolute, inline-block 등의 속성들을 조합하여 사용하는 방법보다 훨씬 간편하게 원하는 레이아웃을 만들 수 있는 장점이 있어 널리 사용되고 있습니다. Flex는 개인적으로도 많이 사용했었지만 아직까지도 정확히 어떻게 활용해야 원하는 레이아웃을 만들 수 있는지 모르고, 그때그때 되는 식으로 주먹구구로 적용하고 있어 이번 기회에 Grid까지 함께 공부해보려고 합니다. Flex 먼저 Flex입니다. Flex, 또는 Flexbox라고 불리는 이 속성은 요소의 크기가 정해지지 않았거나 동적으로 변할때 효율적으로 레이아웃을 구성할 수 있는 방법을 제공합니다. Flex.. 2022. 4. 20.
innerHTML과 insertAdjacentHTML 그동안 DOM 요소를 변경하거나 추가할 때, 별 생각 없이 innerHTML을 자주 사용해오곤 하였습니다. 그런데 얼마 전, DOM 요소를 조작할 때 사용되는 메서드가 innerHTML 뿐이 아니라는 것을 알게되었습니다. 심지어 innerHTML 보다 성능도 좋다고하여 놀랐습니다. 어떠한 동작 원리로 메서드 간의 성능 차이가 나게 되었는지, DOM 요소를 효율적으로 조작하는 방법은 무엇인지 알아보겠습니다. * 이 글은 각 방법의 동작 방식과 차이점에 초점을 두고 비교하는 글입니다. 단순 사용법이 궁금하시다면 MDN 공식 문서를 참고해주세요! Element.innerHTML innerHTML은 요소 내에 포함된 HTML (또는 XML) 마크업을 가져오거나 설정하는 Element의 속성입니다. 이 속성에는 .. 2022. 3. 31.
JS에서 날짜를 보여주기 전 고려해야 할 것들 왜 공부하게 되었지? 얼마 전 받았던 코드 리뷰에서 Date를 파싱할 때 고려해야 할 사항을 한 가지 알게 되었습니다. 수정 자체가 오래 걸리거나 어려운 내용은 아니지만, 앞으로도 Date를 제대로 다루기 위해선 이에 대한 이해가 꼭 필요할 것 같아 공부한 내용을 글로 정리해보았습니다. 문제가 무엇일까? 제 코드의 문제점은 api를 통해 받은 시간값이 ‘국제 표준시’ 에 해당하기 때문에, 한국에서 볼 때는 한국 시간과 표준 시간의 차이만큼 오차가 발생할 수 있다는 것입니다. 이 문제를 해결하기 위해서는 국제 표준시만큼의 격차를 먼저 알아야 합니다. 우리가 국제 표준시라고 부르는 그리니치 표준시(GMT)는 1972년 1월 1일부터 시행된 표준 시간이며 협정 세계시(UTC: Universal Time Coo.. 2022. 3. 25.
자바스크립트의 Array 이번 포스팅 주제는 자바스크립트의 Array 객체입니다. 자바스크립트를 시작했다면 누구나 한 번쯤은 써봤을 흔한 빌트인 객체이지만, 저는 아직 Array의 사용법에 대해 잘 모르고 있었습니다. 얼마 전 다양한 메서드들을 활용해보며 공부할 기회가 있었는데, 이 참에 잊어버리지 않도록 정리하게 되었습니다. 선언 Array의 선언 방법에는 두 가지가 있습니다. 배열 내용을 직접 선언하는 리터럴 방식과, new 키워드를 이용하는 생성자 방식이 그것입니다. 먼저 리터럴 방식입니다. const arr = ["literal", "way"]; 배열 기호인 대괄호[] 안쪽에 내용을 직접 입력해주는 것으로 Array를 생성할 수 있습니다. 다음은 생성자 방식입니다. const arr = new Array("construc.. 2022. 3. 22.
Webpack 빠르게 흝어보기 웹팩이란? 웹팩(Webpack)은 HTML, CSS, JavaScript 와 같은 코드들과 이미지, 동영상, 오디오 등 웹 페이지를 구성하는 자원들을 하나의 결과물로 묶어주는 모듈 번들러입니다. 여러 파일들이 상호작용하는 기존의 웹 환경에선 자바스크립트의 언어적 특성 때문에 발생하는 변수의 유효 범위 문제나, 개발과 배포시에 이루어지는 반복적인 작업에 대한 자동화의 필요성 등을 느끼게 되었는데요, 이러한 문제들을 해결하기 위해 AMD, Common.js, Grunt, Gulp 등과 같은 도구들을 이용해 왔습니다. 또한 좋은 사용자 경험을 위해 웹 사이트의 로딩 속도를 끌어올리려는 많은 시도가 있었는데, 그 중에서도 대표적인 것이 바로 서버에 요청하는 파일의 숫자를 가능한 줄이는 것이었습니다. 위에서 언급.. 2022. 3. 15.

티스토리툴바