패스트 캠퍼스 : 토이 프로젝트

패스트 캠퍼스에서 첫번째 토이 프로젝트를 진행하였다. 모바일 은행 앱을 모방한 웹을 만드는 것이었다. HTML, CSS, 바닐라 JS를 사용하여 프로젝트를 만들었다. BEM HTML은 BEM 방식으로 class를 만드는 데 초점을 두었다. 처음 만들때에는 클래스 이름이 너무 길어져서 굉장히 귀찮았는데, CSS를 만들때 굉장히 편리했다. BEM 방식이 아니라 간단한 클래스로 엘리먼트를 만들면 CSS 선택자가 너무 길어진다. 예를 들어 account클래스를 가진 div 엘리먼트 안에 header 엘리먼트 안에 feature클래스를 가진 div 엘리먼트 안에 qr 클래스를 가진 div 엘리먼트를 선택하려면 CSS 선택자와 account__header--feature--qr 클래스를 가진 div 엘리먼트를 선택..

패스트 캠퍼스-미니 프로젝트

패스트 캠퍼스에서 첫번째 미니 프로젝트를 진행하였다. 간단한 게임을 만드는 것이었는데, 중점은 게임 제작이 아니라 깃 사용법 숙달이었다. 5명의 팀원이 각각의 포크에서 git flow를 사용하여 작업을 진행했다. 구체적으로는 모두 각각의 포크에서 main develop feature 브랜치를 사용하였으며 feature => develop => publish(develop) => release(main) 순으로 진행하였다. 이 과정을 통해 실제 현업에서 깃을 사용하는 방법을 조금 더 배울 수 있었다. 또한 이 과정에서 issue, project 기능을 사용하였다. 따라서 첫 번째 미니프로젝트를 진행하면서 중구난방으로 사용하던 깃의 개념이 정립되고 익숙해졌으며, 있는지도 몰랐던 이슈와 프로젝트 기능을 사용할..

웹사이트 렌더링은 어떻게 되는가?

웹사이트에 접속하면 HTML, CSS, JS 파일이 전송되고, 그것을 브라우저가 읽어서 우리에게 보기 좋게 만들어 준다. 그렇다면 그 과정을 상세히 알아보자. 1. Object Model 만들기 먼저 브라우저가 HTML과 CSS 파일을 받으면 이를 각각 DOM, CSSOM으로 변환한다. DOM은 이전에 알아본 것처럼 HTML의 요소들을 트리구조로 만든 것이다. CSSOM은 CSS Object Model로 CSS의 DOM이라고 할 수 있다. 이 때 중요한 것은 DOM과 CSSOM은 서로 독립적인 데이터 구조라는 것이다. 2. 렌더링 트리 생성 하지만 완전 별개의 DOM과 CSSOM으로는 홈페이지를 보여줄 수 없다. 따라서 이 별개의 모델을 서로 합쳐줘야 한다. 이때 이둘은 DOM을 기준으로 태그에 맞는 C..

css : 인접 형제 결합자 +

종종 메뉴나 목록을 만들 때, 그 사이 구분선을 넣으면서 어쩔 수 없이 :last-child, :first-child를 쓸 일이 있다. 아래와 같은 예를 보자. 1 2 3 4 5 li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; margin: 0 10px; position: relative; } 만약 위 5개의 li 사이에 구분자 '|' 를 넣고 싶다고 해보자. li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; marg..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..