웹 프론트엔드 개발 노하우(21)
-
Positioning
[ 박스 모델 ] 블록 레벨 엘리먼트는 100% width를 차지 한다(설정한 width 넓이와 상관없이) [ floating elements ] 플롯은 이미지 바로 옆에 텍스트 단락을 둘수 있도록 만드는 기능이다. 보통의 문서 흐름을 무시하고, 원래의 블록을 바로 아래의 블록 안의 왼쪽, 오른쪽에 끼워 넣는다. 끼움당한 블록은 자동으로 끼워진 만큼 너비가 줄어든다. 그리고 아래의 박스들은 자동으로 끼워진 블록이 없어진 만큼 위로 이동한다. 이때 플록 블록에 width 속성이 정해져 있지 않으면 끼워지지 않는다. 플롯이 위에서 여러개가 있으면, 맨 아래에 플롯이 아닌 블록에 한꺼번에 겹쳐진다. 맨 아래에 있는 블록까지 플롯을 부과하면, 하나의 블록 안에 해당 플롯 블록들이 순서대로 배열된다. [ clea..
2020.10.22 -
CSS Grid
[ CSS 그리드의 특징 ] CSS 그리드는 부트스트랩이나 여타 다른 CSS 와는 다르게, 마크업의 위치나 클래스 이름이 크게 중요하지 않습니다. 웹 페이지 하나를 하나의 큰 격자들의 모음으로 보고, 그 격자에 어떤 태그가 어느정도를 차지할지를 결정하는 식으로 레이아웃이 결정되지요. 그리고 이를 화면 크기에 따라 재정렬하고 크기를 조절할 수 있는 유연성을 가지고 있습니다. 이 격자들은 위의 그림에서는 8 x 8 이지만 사실 이는 사용자가 맘대로 정할 수 있습니다. 2 x 2 가 되던, 12 x 12 가 되던 상관 없습니다. 게다가 각각의 column 과 row 는 모두 동일한 너비와 높이로 이루어져 있어야 할 필요가 없으며, 이용자가 마음대로 이를 지정할 수 있습니다. [ CSS 그리드 적용 방법 ] 관..
2020.10.22 -
Flexbox
[ flex container ] 그냥 div 태그 같은 display: block; 속성이 할당된 태그는 width 를 지정해도 요소 자체는 전부 100%의 width 값을 가지게 되지만, 해당 div 들이 display 값이 flex인 컨테이너 안에 들어있다면, 모두 지정된 width 값을 가진 블록 아이템이 되어 정렬됩니다. float 과의 차이점은, 문서 흐름에서 벋어나지 않기 때문에, 플렉스 속성이 지정된 상위 태그의 높이와 너비는 안의 자식 요소들에 의해 결정된다는 것입니다. [ flex-grow ] flex-grow 는 flex container 안의 아이템들에 지정하는 것이며, 부모 태그에서 채워지지 못한 남은 width 들을 해당 아이템이 채우게 됩니다. 1 부터 수치를 매길 수 있는데,..
2020.10.22 -
NPM 사용법 전반
NPM 에 본인 패키지 등록 패키지는 다른 패키지에 대한 부품으로 사용되거나, 아예 그 패키지 자체가 완제품인 경우가 있습니다. 어떤 타입의 패키지이든, 다른 사람들에게 편리하게 해당 패키지를 사용할 수 있게 하려면 npm registry 에 등록해야 합니다. main 을 지정하면 해당 파일의 내용이 npm 패키지로 담길 것입니다. 이제 npm 패키지를 발행하려면 npm publish —access public (private은 유료)를 입력합니다. 한번 public 으로 지정 후엔 npm publish 만 하면 됩니다. 패키지를 업데이트한 후 다시 발행하려면 버전을 어느 정도이던간에 높여야 합니다. 기타 : NPM 을 활용한 명령행 프로그램 만들기 js 파일 내에서 process.argv 를 이용해서 ..
2020.10.22 -
Webpack 사용법 전반
여러 파일들을 한데 모아놓은, 빌드의 타겟이 되는 경로의 파일을 '엔트리' 파일이라고 한다. 엔트리 파일을 통해 만들어낸 번들링 결과물이 저장되는 경로의 파일을 '아웃풋'이라고 한다. webpack.config.js 에 웹팩 번들링에 필요한 명령어의 설정들을 담을 수 있다. 여기 담으면 npx webpack 명령어 만으로 번들링을 진행할 수 있다. Webpack 모드 개발자 모드 배포 모드 아무것도 설정하지 않은 모드(기본값) 당연하지만, 웹팩의 설정들은 너무 많아서, 개발자가 일일히 모두를 설정하기에는 어려움이 많습니다. 그래서 웹팩은 '설정 모음'의 차원에서 모드를 지원합니다. 모드를 설정해주면 자동으로 그 모드에 해당되는 설정들이 적용되어 번들링이 처리됩니다. 설정 파일 자체를 webpack.con..
2020.10.22 -
스텐실(Stencil) 이란?
웹 컴포넌트를 제작하는데 사용하는 프레임워크이다. 스텐실을 사용하면 타입스크립트와 자바스크립트를 쓸 수 있으며 자동적인 폴리필 추가가 가능하다. 컴포넌트를 lazy 하게 로드할 수 있기 때문에 번들 사이즈를 줄여준다. DOM 의 리렌더링 효율을 극대화한다.
2020.10.22