Coding Archive

CLONING TIME 0. Branches on Git 가지를 쳐서 새로운 코드를 시도해볼 수 있고, 다시 원래 만들던 코드와 합칠 수도 있다. 1. Publishing on Github Pages github에서 공개적으로 웹사이트를 올릴려면 1. public 저장소이고, 2. gh-pages라는 branch가 있어야 한다. 3. 꼭 push를 눌러야 한다. 웹사이트를 확인하려면 1. github에서 해당 repository로 들어가서 오른쪽에 environments에서 github-pages 클릭해서 확인 2. https://seoye0ng.github.io/kokoa-clone-2022/ (username.github.io/저장소 이름)을 직접 입력해서 확인 2. Updating Github Pa..

CLONING TIME 33. Write Message Input reply 창 만들기 2개의 column으로 구성 ▶첫 번째는 플러스 아이콘 ▶두 번째는 인풋, 이모지, 버튼 이때 두 번째 column의 input의 width를 넓혀주기 위해서는 부모인 두 column과 reply에 width를 주어야 한다. 두 번째 column에서 이모지와 버튼을 옮기기 위해 position: absolute; 를 사용한다. +) 너비 부분이 있어서 100%라고 말했기 때문에 부모 컨테이너에 너비가 필요했지만 300px 또는 500px와 같이 수동으로 입력 너비를 설정하면 부모 컨테이너 너비를 설정할 필요가 없다. 34. Splash Screen part One 100vh는 화면 높이의 100%, 100vw는 화면 ..

CLONING TIME 27. Settings Screen part One justify-content: space-between;으로 하지 않고 각각 margin-right: auto; 와 margin-left: auto; 로 간격을 준 이유 (header의 각 칼럼 첫째, 막내에게 각각 margin-right: auto;, margin-left: auto;를 부여해서 justify-content: space-between;과 같은 효과를 냄) → justify-content: space-between;이 글자 수에 따라서 배열이 중앙 정열이 안된다. 위와 같은 방법으로 auto를 쓰면 글자 수와 무관하게 중앙 정열이 된다. (이 코드상에서는) → 만약 오른쪽에 아이템이 하나 더 생기면 중앙 정렬이 또..

CLONING TIME 19. Chats Screen part One far = 속이 빈 아이콘 fas = 속이 찬 아이콘 ex) 전에 만들어 놓았던 코드들을 복붙 하고 수정해서 완성 20. Chats Screen part Two margin-bottom: 15px; 을 하면 friends 창에서도 적용되는데, friends는 원래대로 돌리고 싶으면 friends.css의 #friends-display-link에 margin-top: -15px; 를 추가해준다. 반복되는 요소는 components에 묶기! --> 겹치는 태그들을 묶고(공통되는 것들), 나머지는 각자 css에 써준다. flex의 영향을 받고싶지 않은 녀석들은 div를 하나 더 씌워서 부모-자식관계를 끊고 부모-손자 관계를 만든다. clas..

CLONING TIME 10. Navigation Bar part One VSC의 단축키로 navigation에서 하위 메뉴까지 한 번에 자동 완성시킬 수 있다. → nav>il>li*(필요한 개수)>a → 그 후 #과 tab만으로 간편하게 작성이 가능하다. (수정하다 보면 다음 tab이 옳게 먹히지 않는다.) 속성과 class 이름이 똑같아도 상관없다. 메인 styles.css에 다른 요소의 css를 import 할 때, 순서를 지키는 것이 정말 중요하다. (cascading의 의미를 생각해서 넣을 것) 점 3개 아이콘은 ellipsis라고 한다. 11. Navigation Bar part Two 위치를 고정시키려면 position: fixed를 하면 된다. 배열이 깨지는 경우에는 width: 100%..

CLONING TIME 5. Status Bar CSS HTML에 CSS를 작성하고 싶을 때, "link:css"라 하고 엔터를 치면 자동 완성된다. 후에 CSS를 link 해준다. font-family를 이용하여 서체를 변경할 수 있다. https://fonts.google.com/ 에서 원하는 폰트를 가져다 쓰면 된다. (web font) link 보다 import를 추천한다. import는 style.css 제일 상단에 추가한다. @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); body에 font-family를 추가한다. 이때 사용할사용할 폰트만 추가한다. 모든 폰트를 추가하면 웹사..

CLONING TIME 01. Sign Up Screen part One index는 대부분의 웹서버가 가장 먼저 읽는 파일 (이는 브라우저가 가진 디폴트 속성.) '!'는 html 기본 서식을 빠르게 입력할 수 있는 단축키. column이라는 이름은 매우 일반적이기 때문에 (다른 html 파일에서도 많이 사용되는 이름이기 때문에), 구분을 짓기 위해 '부모 요소__자식 요소'로 이름을 짓는다. ex) 〈div id="status-bar"〉 〈div class = "status-bar__column"〉 〈/div〉 〈/div〉 〈!--내용--〉은 주석을 다는 태그다. 주석은 브라우저에게 보이지 않고, 사용자만 볼 수 있는 일종의 메모이다. (개발자 도구로는 볼 수 있다. 구현되는 페이지에 드러나지 않을 ..

LEARNING CSS # git & github git: 버전 관리 프로그램-파일을 추적하면서 관리해주는 도구 (파일의 변경 내역을 확인하거나 수정할 수 있다.) github: 그러한 내역들을 업로드할 수 있는 공간으로 git의 변경 내역을 볼 수 있는 사이트 git의 필요성 코드가 긴 경우에는 파일의 히스토리를 알고 있어야 한다. 처음에 뭘 작성했는지, 나중에 뭘 추가했는지, 변경 내역 등을 알고 있어야 하는데 이럴 때 git을 사용하면 것이 도움이 된다. 내가 원하는 파일의 변경된 내용을 확인할 수 있다. git은 programming에서 주로 사용되는 도구다. text 파일에서만 사용할 수 있는 것이 아니라, excel, image, song 등등 다른 파일 형식에도 사용할 수 있다. (git 시..