지금 개발중인 환경의 구성은 위 그림과 같다.

각각의 역할은
_includes : 여러 환경에서 여러번 사용될 헤더, UI와 같은것들을 모으는 곳
_layouts : _includes를 활용하여 블로그, 포스트의 형태를 잡는 html집합
assets : css, icons, js 를 정리해둔 공간

(css, java) load

<link rel="stylesheet" href="../assets/css/post.css" />

위와 같은 형태로 로드를 한다고 찾았지만 jekyll를 이용한 방식에서는 부적절하다.
이는 class와 같은 형태로 미리 만든것들을 종합하여 하기에 작성한 html를 직접 사용하는 것이 아닌
jekyll에 의해 생성된 html를 기준으로 바라볼경우 해당 위치는 적절하지 못한다.

<link rel="stylesheet" href="{{site.baseurl}}/assets/css/post.css" />

이번 jekyll를 이용한 방식에서는 위와같은 방식으로 접근해야 css를 로드할수 있었다.

• {{site.baseurl}}의 경우 liquid의 문법이기에 liquid와 연관되어있을 것으로 추측된다.

css apply

.categories {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.categories .category {
margin: 0 0 0 0;
display: block;
color: var(--gray-4);
background: var(--white-2);
border-radius: 15px;
font-size: 0.7rem;
padding: 0 0.8rem;
/_ line-height: 1.5rem; _/
cursor: pointer;
}

css를 적용할때 class를 이용해 적용 할경우 원하는 클래스 하나를 지정하여 하는 방식(.categores)과
특정 부모를 갖는 class를 지정하는 방식(.categories .category)으로 구현할수 있었다.