Atelier BiCute

#1 텍스트 관련 태그 종류 설명 제목. ~까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐 텍스트 단락. 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈 줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈 내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시 중요한 텍스트를 굵게 표시. 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 기울게 표시(마음속의 생각이나 용어) 내용을 편집할 때 추가한 내용을 표사 내용을 편집할 때 삭제한 내용을 표시 위 첨자 아래 첨자 #2 목록 관련 태그 종류 설명 순서 있는 목록의 시작과 끝 순서 없는 목록의 시작과 끝 순서 있는 목록이나 순서 없는 ..

#1 카카오 개발자 사이트에 접속 카카오 개발자 사이트에 접속한 후, 로그인을 합니다. (회원가입이 안되어있다면 가입해야 합니다) https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com #2 내 애플리케이션으로 이동 페이지 상단에 있는 내 애플리케이션을 선택한 후, 사용할 애플리케이션을 선택합니다. 미리 만들어놓은 게 없다면 애플리케이션 추가하기를 통해 새롭게 생성합니다. (앱 이름과 사업자명을 적당히 입력해 줍니다) #3 플랫폼 설정 좌측의 플랫폼을 눌러 플랫폼 탭으로 이동합니다. 1) Web 사이..

웹페이지의 목적을 어떻게 설정하였는지에 따라 다음과 같은 형식으로 나눌 수 있습니다. 제작자의 성향과 특성에 맞게 세분화하여 막연하게 '웹 사이트를 만든다'라고 하기보단 '웹 사이트를 만들고 있으며 특히 쇼핑몰을 잘 만듭니다' 같은 식으로 전문성을 어필하는 것도 좋습니다. #1 기업(corporate) 사이트 기업에 대한 정보를 게시하고 전달 "우리 회사를 알리고 싶다" #2 브랜딩 사이트 기업 및 상품의 이미지를 향상시키는 목적 "우리의 회사(브랜드)와 상품의 이미지를 향상하고 싶다" #3 서비스 사이트 서비스나 상품을 알리기 위한 사이트 "우리의 서비스(상품)를 알리고 싶다" #4 랜딩 페이지 구입 등의 액션을 노린 원페이지 형식의 완결형 사이트 "빠르게 고객을 집중시키고 싶다." #5 캠페인 사이트..

#1 준비하기 1) 카카오 개발자 사이트(https://developers.kakao.com) 접속 2) 개발자 등록 및 로그인을 한 후, 3) 메뉴 아이콘을 누르고 Maps API를 선택합니다. 4) Web을 선택한 후, 시작하기를 선택하면 Web API 가이드 페이지로 이동합니다. 5) 왼쪽 아래에 있는 키 발급을 선택한 후, 애플리케이션 추가하기 버튼을 눌러 정보를 작성합니다. 6) 애플리케이션을 선택 후 왼쪽의 플랫폼 탭으로 이동. 아래쪽에 위치한 Web 사이트 도메인을 등록합니다. (*여기에서 등록한 사이트에서만 API가 작동합니다) 이후 요약정보 탭 또는 앱 키 탭에서 확인할 수 있는 [JavaScript 키]를 지도 API의 appkey로 사용합니다. #2 웹페이지에 적용하기 한글로 작성되어..

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