Atelier BiCute

프로젝트 작업이 완료되어 최종 완성본을 빌드하게 되면 작업했던 모든 파일들이 합쳐지게 되는데, 이때 특정 컴포넌트에 적용한 스타일이 내가 의도하지 않았지만 다른 컴포넌트에 영향을 미치게 될 수 있습니다. 그것을 방지하기 위하여 style 태그에 scoped 속성을 추가하는 것으로 특정 컴포넌트의 구성요소에만 스타일을 적용 할 수 있습니다. 1. Scoped 속성의 사용 방법 (1) style 태그에 scoped 속성을 추가해줍니다. (2) 범위가 지정된 스타일과 범위가 지정되어 있지 않은 스타일을 동시에 사용할 수 있습니다. (3) 하위 컴포넌트(자식 구성 요소)에 영향을 미치게 하기 위해선 ::v-deep 결합자를 이용할 수 있습니다 (::v-deep 대신 >>> 를 이용해도 되지만 Sass 등 전처리..

컴포넌트를 사용하는 이유 컴포넌트는 결과적으로 긴 HTML을 짧게 한단어로 줄여주어 관리하기 편하게 만들면서, 재사용성을 높이기 위해 사용한다고 보면 됩니다. 1. 컴포넌트 만들기 컴포넌트를 만들고 싶다면, 새로운 Vue파일을 만듭니다. , , 2. 컴포넌트 삽입하기 이제 위에서 만든 Box컴포넌트를 App.js에 추가해 보겠습니다. App.js 화면 컴포넌트를 가져와서 사용하기 위해선 아래 3가지 단계를 거치게 됩니다. 1. 해당 파일을 가져오겠다고 선언합니다. 위와 같이 Box 컴포넌트를 3번 반복하여 사용하면 아래와 같은 결과를 얻을 수 있습니다.

#1 Vue 프로젝트의 파일 구조 프로젝트를 생성하였다면 위와 같이 기본적인 세팅이 되어있습니다. • node_modules : npm을오 설치한 패키지 파일들이 모두 이곳에 모여 있습니다. • public : 정적 리소스들이 모여있는 디렉토리. index.html이 이곳에 있습니다. • src : 실제 작업은 이곳에서 이루어 집니다. • src/assets : 이미지나 CSS 등 자료들이 모여있는 디렉토리 • src/components : Vue 컴포넌트 파일들이 모여있는 디렉토리 • App.vue : 루트가 되는 컴포넌트 (최상위 컴포넌트) • main.js : 가장 먼저 실행되는 JavaScript 파일. Vue의 인스턴스를 생성하는 역할 • .gitignore : 깃에 업로드 할 때 제외할 파일들..

#1 개발 환경 세팅 (1) 원하는곳에 작업용 폴더를 생성. (2) VisualStudio Code로 해당 폴더를 열어줍니다. (3) 터미널을 열어 아래 명령어를 입력합니다. npm install -g @vue/cli *npm 명령을 사용하기 위해선 node.js가 설치가 되어있어야 합니다. node.js 다운로드 페이지 > 설치가 되는 척(?) 하면서 오류가 나는 경우가 많습니다. • 윈도우에서 흔히 발생하는 에러 '이 시스템에서 스크립트를 실행할 수 없으므로 c: 어쩌구 저쩌구...' (1) Windows PowerShell을 관리자 권한으로 실행합니다. (2) 다음 실행 규칙을 변경하는 명령어를 입력합니다. Set-ExecutionPolicy RemoteSigned 실행 정책을 변경하겠냐는 물음이 ..

가끔 프로젝트 진행하다보면 반응형 웹앱이 아닌 모바일 전용으로 기획하고 구현할 때가 있습니다. 모바일에 맞춘 좁은 너비만 가지고 있기 때문에 웹에서 보여줄 일이 생기면 매우 보여주기 민망한 상황이 자주 발생하는데, 그러한 경우 무리해서 반응형으로 만들기보단 아래와 같이 간단한 배경만 추가해주는 정도로 꽤 깔끔한 반응형 웹앱처럼 보여줄 수 있습니다. 위와 같이 실제로 구현한 부분은 고정폭으로 하여 중간 또는 어느 한쪽에 적당히 자리만 잡아주고, 남는 부분은 관련 배경이나 내용으로 채워 미디어 쿼리 설정만 해주면 큰 노력없이 깔끔한 사이트를 만들 수 있습니다. 샘플 페이지 보러가기 >

#1 서론 HTML 문서의 로드 이벤트 상태(HTML 문서의 생명주기)을 이용한 명령어는 매우 다양하게 있습니다. 그중 대표적인것들이 다음과 같은것들이 있습니다. (1) 이미지 파일()이나 스타일시트 등 자원의 로드는 기다리지 않으며, 브라우저가 HTML을 읽고 DOM 트리를 완성하는 즉시 발생하는 DOMContentLoaded. document.addEventListener("DOMContentLoaded", function(){ console.log(1) }); (2) 스타일, 이미지 등의 모든 리소스가 로드 되었을떄 실행되는 window 객채의 load 속성. window.onload = function(){ console.log(1) } 이 글은 이러한 이벤트에 관한 내용을 설명하기위해 작성하는 ..

body-scroll-lock modal, lightbox / flyouts / nav-menu 등의 요소에서 스크롤을 유지하면서 부모요소인 본문의 스크롤을 비활성화 시켜주는 js 라이브러리 입니다. iOS, 데스크탑 Safari 등에서도 지원되며, Vanilla JavaScript / React / Angular / VueJs 등의 프레임 워크에서도 작동합니다. 공식 사이트 body-scroll-lock Github > ※ 아래 내용 외 더욱 자세한 내용은 모두 이곳에. 사용 방법 공식 사이트에 각 프레임워크별 사용 예제가 포함되어있지만, 보기쉽게 한글로 간단히 정리해 보자면 Vanilla JS 기준 (1) 해당 Github 페이지에서 js 라이브러리를 다운 받습니다. 해당 js는 lib폴더 안에 있습..

웹사이트에 아이콘을 넣는 방법은 워낙 많기에 취향대로 하면 됩니다만, 심플한 몇개의 대표적인 아이콘들만 이용하고 싶다 + 폰트 어썸처럼 자신의 kit 번호같은 것을 넣는게 싫다 싶은 경우엔 Simple Line Icons도 하나의 대안이 될 수 있을 것입니다. #1 아이콘 샘플 이름과 같이 아래와 같은 매우 심플한 디자인은로 되어있습니다. #2 사용 방법 홈페이지 Simple Line Icons > 다운로드하여 사용하는 방법 (1) 홈페이지 오른쪽 위에 있는 Download icons pack 버튼을 눌러 파일을 다운 받습니다. (2) 자신이 작업하고 있는 폴더에 css와 fonts 폴더를 함께 넣어줍니다. ※ CSS 파일에 기본 설정 경로가 아래와 같이 되어있기 때문에 내부 파일만 같은 폴더로 옴기시면..

자잘한 수정은 계속해서 있었지만 이번에 크게 눈에 띄진 않지만 소소게 많은 기능들에 수정이 있었습니다. 댓글창 관련 최신 댓글이 먼저 보이도록 정렬 댓글의 댓글은 가장먼저 달린(오래된) 댓글이 먼저 보이도록 지정 프로필 사진과 글 간격 재조정 댓글간의 간격과 수정 버튿들 위치 재조정 다크모드 다크모드 스위치 아이콘을 해와 달로 변경 자동 목차 목차로 사용할 내용이 없을경우 자동 목차 박스가 나타나지 않도록 변경 목차 박스 내부의 컨텐츠 높이 재조정 1단 서랍 사이드바의 간격 재조정 1단 서랍 사이드바 레이아웃 관련 전체적인 조정 기존에는 2단 우측 사이드를 우선 고려하여 설정하였었지만, 이제는 1단 서랍 사이드바 형식에서도 모두 문제없이 사용할 수 있도록 수정하였습니다. ※ 기존 스킨 사용자분들께서는 최..

글을 시작하기에 앞서... 개인 프로젝트들을 진행하면서 Github의 저장소에 작업물을 올리다보면 매번 반복적으로 나오는 패턴이 있습니다. (1) git add . (2) git commit -m "커밋할 내용" (3) git push origin master 혼자서 작업할때는 이정도로도 충분하기도 하지만, 이래저레 웹서핑을 하다보면 커밋을 하는 방법에 관한 글들을 많이 볼 수 있습니다. 수많은 사이트들이 대부분 동일한 내용의 글들을 작성하고 있는데 대략적인 내용은 다음과 같습니다. - 커밋의 기본 형식은 타입(제목) / 본문 / 꼬리말 3개로 나뉜다. - 제목과 본문, 꼬리말은 중간에 빈줄을 넣어 구분한다. - 제목은 50자 이내로, 본문은 72자마다 줄바꿈을 한다 등 - 제목의 첫글자는 대문자로, ..