Atelier BiCute

#1 푸터 영역 수정 오디세이 스킨에 관련 사이트를 등록해놨을 경우 푸터 근처로만 가져가도 마우스 포인터가 활성화되는데, 원래는 +를 눌러 활성화하여 목록을 나오겐 한 후 사이트를 이동하는 것이지만, 아무것도 보이지 않아도 허공을 클릭하면 보이지는 않지만 해당 사이트로 이동하게 되는 문제를 수정하였습니다. #2 HTML / CSS / JS 정리 겸 리팩터링 파일 정리, 각 파일별 소스 줄 맞춤 등 쓸데없는 작업을 상당히 많이 했습니다. 중간중간 왜 있는지 모를 아무런 내용도 없는 속성들도 발견할 수 있었기에 모두 정리를 했습니다. #3 다크 모드를 사용할 수 있게 되었습니다 원래는 전혀 예정에 없던 기능이었지만, 아무래도 있는 게 좋을 거 같아 다크 모드 기능을 넣었습니다. 다크 모드라도 이미지 같은 경..

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

컴퓨터를 사용하다 보면 화면 캡처(스크린샷)을 사용하는 일이 정말 끝없이 많이 생기는데, 윈도우 기본 시스템이 너무나 불편한 관계로 이것저것 다양한 스크린샷 프로그램을 알아보다 결국 최종적으로 만족하게 된 화면 캡처 프로그램이 있어 이렇게 글을 적어봅니다. 해당 사이트 링크는 본문 하단에 있으며, 설치방법이야 웹에서 프로그램 다운받아서 그냥 설치하면 되니 딱히 특별한 건 없습니다. 이번 글에서 이야기 하고싶은것은 설정 방법! 여러 가지를 꽤나 자신의 스타일로 설정할 수 있다는 점이 매우 만족스러웠는데 아래는 제가 세팅하여 사용하는 옵션입니다. 옵션 설정하기 (1) 단축키 MacOS와 최대한 비슷하게 사용하기 위해 "alt + shift + 3"이 전체 화면 스크린샷. "alt + shift + 4"가 범..

지극히 개인적인 맥북 초기화(포맷) 이후 설정을 위한 자료입니다. 초기화할 때마다 '해둬야 할거 뭐 놓친 거 있나?' 싶어서 정리도 할 겸 적어보는 글입니다. 기본 세팅 (1) OS Update 언제 구매한 제품인지, 초기화 시점을 어디로 잡았는지에 따라 다르겠지만 업데이트를 해야 할 게 있다면 우선 이것부터 진행하는 것이 좋습니다. 용량도 크고 시간도 많이 잡아먹습니다. (2) 파인더를 보기 쉽게 설정 처음 파인더를 열어보면 하얗기만 한 화면에 아무것도 없는데, 가장 위쪽의 "메뉴바 > 보기" 항목을 선택하여 목록형으로 (cmd+2) 바꿔주고, 경로 막대 보기를 활성화시켜줍니다. (3) 브라우저 설치 윈도우에서는 Edge가 불편해서 Chrome 브라우저를 필수로 설치한다면, 맥에서는 기본 브라우저인 s..

#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..