Web Club

Webpack Guide for beginner #2

Webpack 환경 설정 맛보기 앞서 Webpack 의 전반적 이해와 Webpack 사용에 필요한 선행 학습을 진행해 보았으며, 이번 포스팅부터는 Webpack 에 대한 기본 구성부터 단계적으로 학습해 보도록 하겠습니다. 참고로 실무적인 학습 내용은 필자의 직군인 퍼블리셔 관점에서 작성됨을 알려드립니다. 사용자 코드작성과 번들 js 프로젝트 초기 설정 이제부터 새로운 프로젝트를 초기화하고, Webpack 을 설치해 보도록 하겠습니다. 아직까지 node.js 설치를 하지 않으셨다면 설치 후에 진행해 주시기 바랍니다. Webpack 기본(일반적) 구성 절차 webpack 과 webpack-cli 전역 설치 npm init 으로 package.json 생성 src/index.js 와 index.html 생성 ..

Web Tech/Webpack 2019.08.05 07:52

Webpack Guide for beginner #1

Webpack 이란 무엇인가? Webpack 공식 사이트 소개 이미지 Webpack 페이지에서 소개하듯이 웹팩은 모듈 번들러(Module Bundler)입니다. 그렇다면 번들러(Bundler)란 무엇일까요? 번들러는 소프트웨어 및 일부 하드웨어와 함께 작동하는데 팔요한 모든 것을 포함하는 패키지라고 정의하고 있습니다. 이를 프로그래밍적으로 접근하자면 번들러란 필요한 의존성에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑 해주는 도구라고 할 수 있습니다. 다시말해, Webpack 은 공식 사이트 이미지에서 소개하듯이 웹페이지를 동작시키기 위한 서로 연관 관계가 있는 웹 자원(웹앱 애플리케이션의 구성파일)들인 js, css, img, webfont, etc.. 와 같은 구성파일들의 관계들을 Webpack..

Web Tech/Webpack 2019.08.05 07:43

Vue.js 를 시작하기에 앞서 ...

기존의 웹 애플리케이션 개발은 브라우저마다 자바스크립트와 DOM 의 이벤트 처리방식이 달라서 브라우저마다 달리 개발을 해야 했습니다. 하지만 2010년대부터 브러우저와 상관없이 동작 방식을 단일화(크로스 브라우징)해줬던 jQuery, Underscore.js 와 같은 JS 라이브러리가 등장하면서 웹 애플리케이션의 개발은 터닝포인트를 맞이하면서 그 후 Backbone.js, Ember.js, AngularJs 등의 단일형 웹 프레임워크 (새로운 페이지로 브라우저 화면을 변경할 때 서버로 페이지 요청을 하지 않고 단일 자바스크립트 프로그램 내에서 URL,DOM 변경등을 모두 처리하는 프레임워크) 가 발전하면서 프론트엔드 웹 애플리케이션 개발을 선도하고 있습니다. Vue.js 는 이런 발전 과정의 연장선에서 ..

Web Tech/Vue.js 2019.02.18 13:29

CSS line-height

이 포스팅에서는 CSS 의 line-height에 대해 알아보도록 합니다. 행간(leading)이란? 오래 전 글자를 손으로 배열하여 활판 인쇄하던 때의 활자 인쇄물은 독립적으로 만들어진 활자 블럭을 가로로 이어 붙여서 만들어 냈습니다. 그리고 행간(leading)은 각 글줄들 사이에 적절한 공간을 주기 위해 조각블럭을 넣는 방법으로 추가되었습니다. 이러한 행간과 같은 표현을 CSS에서는 line-height 를 사용하여 글줄 사이의 수직 여백을 조정할 수 있습니다. line-height 사용 방법 브라우저들은 1.0 에서 1.2 의 값을 line-height 의 초기 기본값으로 사용하고, CSS 의 line-height 속성을 다음과 같이 지정할 수 있습니다. CSS p { line-height: 14..

StyleSheet/CSS 2019.02.08 09:11

Sass 코딩 컨벤션

Sass Coding Convention Sass 작성을 위한 컨벤션에 대해 알아봅니다. Table of Contents 폴더 구조 [Folder structures] 파일 구조 [File structures] 인코딩 [Encoding] 중첩 [Nesting] 들여쓰기 및 선언 순서 [Style Rules] 띄워쓰기 [Spacing words] 주석 [Comments] 네이밍규칙 [Naming] 8.1. placeholder selector 8.2. mixin 8.3. 변수 믹스인 [Mixin] @extend [Extend] 10.1. %(place holder) 의 확장 10.2. % 선언시, 축약형 지양 제어구문 (@if, @each, @for 등) [Control Statements] 11.1@if..

StyleSheet/SASSㆍSCSS 2019.01.31 07:23

브라우저의 역할과 스크립트의 로드 시점

브라우저는 어떻게 동작하는가? 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를 완성해 주게 됩니다. 그래서 웹은 네트워크가 상당히 중요합니다. 여기서 서버에서 다운로드 받은 HTML, CSS, JS를 브라우저가 해석할 때 원리를 알 필요가 있는데 이 내용에 대해 다뤄보도록 하겠습니다. 웹 브라우저 동작과정 간단히 알아보기 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다. 브라우저는 HTML..

Web Tech 2019.01.28 11:49

#11 CSS Gradients, box-shadow

CSS3 의 그레디언트, 박스 그림자에 대한 속성에 대해 알아봅니다. CSS 그레디언트(Gradients) 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linear), 원형(radial) 그레디언트가 있습니다. 선형, 원형 그라디언트에 대해 학습해 보도록 합니다. 선형(Linear) 그레디언트 선형 그레디언트는 그레디언트 라인(gradient line)이라는, 각각의 점이 다른 컬러값을 갖는 하나의 축으로 정의할 수 있습니다. 그레디언트 라인은 그레디언트를 포함하는 box 형태의 영역 중심좌표와 각도로 정의됩니다. 그레디언트의 컬러값은 시작점(starting point), 종료점(ending point)과 이 두점 사이에 삽입 가능한 색상점(color s..

HTMLㆍCSS 기초 강좌/CSS 2019.01.25 07:39

#10 3D 트랜스폼(Transforms)

CSS 변형(2D transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 즉, 변형으로써 이동을 시키거나 크기, 회전, 비틀림을 제어하는 경우에 사용했으며 어디까지나 이 트랜스폼은 X축, Y축 좌표만을 조정할 수 있는 2D 였습니다. 이 2D에서 더 나아가 3D에 관련된 CSS 속성을 알아보도록 하겠습니다. 3D transform을 위한 속성 3D 공간에서의 CSS 변환은 좀 더 복잡합니다. CSS 3D transform 은 평면에서의 여러 개 CSS 속성을 조합하고 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함하고 원근감, 관찰자의 위치을 부여해 3D 공간을 만들어 낼 수 있습니다. 그리 3D transform 은 크게 트랜스폼을 적용할 ..

HTMLㆍCSS 기초 강좌/CSS 2019.01.25 07:38

#9 CSS 애니메이션(Animation), 키프레임(keyframes)

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대..

HTMLㆍCSS 기초 강좌/CSS 2019.01.25 07:37

#8 Transition - 화면 이동을 위한 점진적 효과

transform(변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다. transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동"이라는 의미로 받아들이는 것이 이해하기 쉽습니다. 트랜지션 개요 화면 이동(transition)은 변형(transform)되는 중간의 상태를 의미한다고 할 수 있습니다. 즉, 어떠한 변형(transform)이 일어나는 동안의 상태를 화면 이동이라고 하고, 이에 대해서 시간을 지정해 줄 수 있습니다. 예를 들어서 마우스를 오버했을 때 어떤 변형을 일으키고 싶은데, 그 상태를 제어할 때 사용한다고 생각하면 됩니다. CSS 트랜지션과 CSS 애니메이션은 어떻게 다를까? CSS ..

HTMLㆍCSS 기초 강좌/CSS 2019.01.24 10:16

#7 CSS 2D 트랜스폼(Transforms)

transform(변형)은 CSS3에 추가된 기능 중 하나로 2D 의 변형을 말합니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 일반적으로 변형(transform) 효과는 CSS transition(이동효과)와 함께 사용될 때, 또는 3D 기능들과 함께 사용될 때 진정한 효과가 나타납니다. 그렇지만 먼저 가장 기본적인 전환의 형태인 2D 전환에 대해서 이해해야 합니다. 이 챕터에서는 2D 변형(전환)에 대해 학습해 봅니다. CSS3 transform - 2D 변형(전환) transform 테크닉은 2D 환경의 X축, Y축에 대한 변형(전환)을 사용합니다. 이 변형 기술에는 다음과 같은 4가지가 있습니다. rotate(회전 효과) : rotateX(), ..

HTMLㆍCSS 기초 강좌/CSS 2019.01.24 10:16

#6 모던 레이아웃 - 플렉스박스(Flexbox)

플렉스박스(Flexbox) 개요 앞서 학습했던 float, position 만으로도 어느 정도의 레이아웃 구현이 가능합니다. 하지만 데스크탑 시대를 벗어나 모바일 시대에 접어들면서 보다 유연한 형태의 레이아웃 매커니즘의 필요성이 커져버렸습니다. 그에 따른 차세대 모던 레이아웃에는 플렉스박스(Flexbox), 멀티 컬럼(Multi Columns), 그리드(Grid) 가 있으며, 이번 챕터에서는 Flexbox 레이아웃 모듈을 다뤄봅니다. CSS Flexible Box Layout Module 일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원적인 레이아웃 모델로 설계되었습니다. flexbox 를 1차..

HTMLㆍCSS 기초 강좌/CSS 2019.01.24 10:15

#5 Floating, Positioning

뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 및 positon 속성 그리고 positon속성과 관련된 top, right, bottom, left, z-index 속성에 대해 알아보겠습니다. 레이아웃 디자인 - 플로팅 레이아웃(float) 대표적인 레이아웃 테크닉인 플로팅(Floating)과 포지셔닝(Positioning)을 알아보고, 모던 레이아웃인 플렉스박스(Flexbox)와 그리드(Grid) 레이아웃에 대해 알아보겠습니다. 먼저 플로팅 레이아웃에 대해 학습해 봅니다. 일반적인 레이아웃 흐름(Normal Layout Flow) See the Pen normal layout by jaeheekim (@jaehee) on CodePen. CSS 가 미반영된 화..

HTMLㆍCSS 기초 강좌/CSS 2019.01.24 10:14

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운 해결방안 역시 계속 성장하고 있습니다. 그렇기 때문에 웹 디자이너와 프론트 엔드 개발자가 습득한 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 이 글에서는 이전엔 알지 못했던 몇 가지의 CSS 방법에 대해 알아보고자 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 다른 방법에 대해 살펴보도록 합니다. rem(root em) 여러분에게 조금 익숙할 수..

StyleSheet/CSS 2019.01.24 10:13