Atelier BiCute

마진 겹침(amrgin collapsing) CSS로 스타일을 주다 보면 주로 섹션별로 구분이 되는 부분처럼 위아래 항목에 margin이 공통으로 들어가는 경우가 종종 발생합니다. 예를들어 위쪽 블록에서 마진 40px을 주고 아래쪽에서 마진 40px을 주면 예상대로라면 중간에 80px의 공간이 생겨야 하는데 서로 겹치는 40px의 공간만 남게 됩니다. 또 다른 예로 위쪽 블럭에서 마진 80px을 주고 아래쪽에서 마진을 40px을 주게 되어도 합쳐지며 80px의 공간만이 생겨납니다. 이런 증상을 해결하는 방법입니다. 아래는간략한 샘플입니다. 1) 박스 생성 2개의 박스를 만들어 보았습니다. 구분하기 쉬워보이게 배경색도 넣어봅니다. 이렇게 만들면 당연하게도 2개는 연속되게 나타납니다. 2) 패딩(paddin..

#1 README 만들기 블로그의 프로필 화면처럼 GitHub에서도 프로필 화면을 만들고 꾸밀 수 있는데, 이 프로필 화면은 README 파일을 편집하여 만들 수 있습니다. README 파일을 생성하기 위해선 특별한(?) 이름의 저장소(Repository)를 생성해야 합니다. 저장소를 만들 때 다음과 같은 순서로 생성해 주세요. 1) 저장소(Repository) 만들기 (1) Create a new repository화면에서 Repository의 이름을 자신의 계정명과 동일하게 생성해 줍니다. (2) Add a README file을 체크해 줍니다. 2) 프로필 수정하기 위해선... 수정 버튼을 눌러보면 코드 입력창이 나타나는데 이곳은 마크다운 언어로 작성해야 합니다. 마크다운의 사용 방법은 기본적인 마..

기본적인 마크 다운 사용 방법입니다. *하단의 적용 결과는 모두 이미지 파일입니다. #1 기본 문법 1) 제목 # 다음 한 칸 띄우고 작성 # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 2) 굵게 하기(Bold) 텍스트 앞 뒤에 ** 작성 **bold text** 3) 이탤릭체 텍스트 앞 뒤에 * 작성 *italicized text* 4) 인용문 > 한 칸 띄우고 내용 > The overriding design goal for Markdown's > formatting syntax is to make it as readable > as possible. The idea is that a > Markdown-formatted document should be > publi..

Visual Studio Code의 Live Server는 기본적으로 설정되어있는 브라우저를 이용하여 열리게 되어있습니다. window라면 Edge가 별로라 기본을 Chrome으로 설정하는 경우가 많으니 큰 문제가 안될 것인데, Mac 같은 경우엔 safari가 충분히 매력적이기에 Chrome을 메인으로 쓰는 사람은 잘 없을 것입니다. 이럴 때 라이브 서버를 크롬 브라우저로, 혹은 원하는 다른 브라우저로 설정하기 위해선 다음과 같은 방법으로 라이브 서버의 설정을 변경해 주면 됩니다 # Live Server Config Step 1. '설정'으로 이동합니다. Mac은 "Code > 기본 설정 > 설정"(단축키 cmd + ,) 윈도우는 "파일 > 기본 설정 > 설정"(단축키 ctrl + ,) Step 2. ..

"폰트는 한글은 Noto Sans KR로, 영어는 Roboto로, 숫자는 Spoqa Han Sans Neo로 부탁드려요." 이런 요청을 받으면, 매번 해당 언어마다 폰트를 지정해 줄 수도 없는 노릇인데, 이럴 때 @font-face를 사용하면 쉽게 해결할 수 있습니다. #1 웹 폰트 웹 폰트는 사용자가 현재 사용하는 기기에 서체를 설치하지 않았더라도 @font-face 명령을 통해서 웹 브라우저에서 폰트를 다운로드하여 사용자에게 보여줍니다. 웹 폰트를 사용하기 위해서는 @font-face로 해당 폰트를 다운로드할 위치를 지정해주고, font-family 속성을 사용하여 적용 할 수 있습니다. 사용 예) @font-face { font-family: 'Gugi-Regular'; font-style: nor..

깃허브를 통하여 여러사람이 협업(또는 집과 회사 등 둘 이상의 공간에서 작업)하는 경우에 사용하는 방식입니다. #1 공동 작업자 초대하기 대표(또는 팀장)은 협업할 팀원을 공동 작업자로 추가할 수 있습니다. setting > collaborators로 이동한 후 add people을 선택하고 해당 팀원의 깃허브 유저명 또는 이메일 주소를 통해 초대장을 발송할 수 있습니다. #2 소스 코드 다운받기 일단 작업을 이어서 진행하기 위해선 깃허브(GitHub)에 올라와 있는 소스 코드를 내 컴퓨터로 내려 받아야 합니다. ① 소스를 다운받아 작업을 할 폴더를 만들고 ② 비주얼 스튜디오 코드에서 해당 폴더를 열어줍니다. ③ 해당 폴더를 연 상태에서 터미널을 실행 시키면 터미널 창에 해당 폴더에 들어와 있는지 확인해..

px을 em으로 변환한 표가 꽤나 자주 필요한데, 어디를 검색해도 최대 40px까지밖에 안보이는거 같아 개인적인 사용을 위해 80px까지 조금 범위를 넓혀 작성해 보았습니다. 참고. 대중적으로 사용되는 폰트는 10px에서 12px까지는 1px, 12px에서 18px까지는 2px, 18px에서 24px까지는 +3px, 24px에서 72px까지는 12px씩 일정한 규칙으로 증가하고 있습니다. 이러한 12가지 사이즈의 폰트에 대해서는 (*)표시가 되어있습니다. 변환표 Pixels EMs 1px 0.063em 2px 0.125em 3px 0.188em 4px 0.250em 5px 0.313em 6px 0.375em 7px 0.438em 8px 0.500em 9px 0.563em 10px* 0.625em 11px..

#1 Git ≠ GitHub 깃(Git)과 깃허브(GitHub)는 같은 것이 아닙니다. Git은 버전 관리를 손쉽게 도와주는 소프트웨어이며, GutHub는 이 Git으로 저장된 내용들을 저장할 수 있는 공간을 제공해 주는 서비스 중 가장 유명한 것일 뿐, 깃허브만 이런 기능을 사용할 수 있는 것은 아닙니다. #2 GitHub를 사용하는 이유. 소스 코드의 버전별 저장/관리 팀 프로젝트(협업) 코드 공유 코드의 배포 파일을 통으로 복사하지 않아도 브렌치를 이용해 여러 가지 패턴을 시도해 볼 수 있음 등. #3 깃허브(GitHub) 사용 준비 1) GitHub 유저등록 아래의 GitHub 홈페이지로 이동한 후 회원가입(Sign Up)을 하고 로그인(Sign In)을 합니다. 링크 : https://githu..

제가 설치하여 사용하고 있는 확장 프로그램 모음입니다. 하나씩 글을 적기엔 분량이 너무 적을 거 같아서 그냥 한 번에 쭉 리스트를 올려봅니다. #1 이건 필수! Korean(사용법) Language Pack for Visual Studio Code Visual Studio Code의 설정을 한글로 바꿔주며, 기본적으로 처음 설치 시 오른쪽 아래의 팝업창을 통해 자동으로 설치됩니다. Live Server 웹브라우저를 통하지 않더라도 수정하는 결과를 바로바로 확인할 수 있게 도와주는 프로그램으로 코딩한 내용의 수정 사항을 즉각적으로 확인할 수 있습니다. #2 강력 추천 Auto Rename Tag 한쪽의 태그만 수정해도 반대쪽의 태그까지 자동으로 수정해 줍니다. Bracket Pair Colorizer 2 ..

#1 기능 설명 웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다. 간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다. #2 효과 확인하기 다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다. 공식 페이지 : https://animate.style/ #3 적용 및 사용 방법 Animate.css 연결하기 ※ NPM 방식과 CDN 방식을 지원합니다. 혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다. 다음 코드를 앞에 붙여 넣습니다. 사용 방법 기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니..