포포노노 블로그

ul로 리스트를 만듭니다. li안에 ul를 넣어서 멀티 레벨의 리스트 구조를 만듭니다. *를 사용하고 box-sizing을 border-box로 정합니다. padding과 margin을 0으로 정합니다.  li의 들여쓰기가 없도록 합니다. nav의 배경색깔을 입력해서 잘 구분할 수 있도록 합니다. list-style-type을 none을 정합니다. .item:not(클래스이름)을 사용해서 코딩합니다. 특정 클래스를 제외한 것에 css 코딩을 합니다.  메뉴의 display를 flex로 합니다. flex-wrap을 wrap으로 정합니다. 그러면 넘치는 부분은 아래로 내려갑니다. justify-content를 space-between으로 정합니다. 사이 간격을 둡니다. align-items를 center로 정해서 가운데 정렬을 합니다.  a태그의 display를 block으로 정합니다. order를 사용해서 위치를 바꿀 수 있습니다.  메뉴의 width를 100%로 하면 꽉 차게 됩니다.  우선 display를 none으로 해서 보이지 않게 합니다.

11ty는 자바스크립트 라이브러리입니다. 11ty를 사용해서 jamstack 방식으로  웹사이트를 만들 수 있습니다. 먼저 npm init으로 프로젝트를 시작합니다. npm init으로 package.json 파일을 만들고 여러 설정을 합니다. npm install -g @11ty/eleventy로 11ty 모듈을 설치합니다. 글로벌로 설치하면 다른 프로젝트 만들 때 다시 설치하지 않아도 됩니다. npx @11ty/eleventy --serve를 하면 파일을 설치하면서 빌드해줍니다. package.json의 scripts에 명령어를 입력합니다. "build" : "eleventy"는 실제 파일로 빌드를 해줍니다. "start": "eleventy --serve"는 서버를 열어서 로컬호스트에서 확인할 수 있게 해줍니다. npm start 명령어를 실행했을 때 http://localhost:8080 이 서버 경로입니다. bitnami를 설치했다면 경로가 같아서 파일을 확인할 수 없다. 이럴 때는 bitnami에서 서버와 데이터베이스를 정지합니다. 11ty 용어를 정리하겠습니다. 먼저 collections입니다. collections은 템플릿 콘텐츠의 집합입니다. 한 템플릿이 여러 collections에 속할 수 있습니다. collections를 사용해서 템플릿을 구분합니다. tags를 사용해서 collections를 만들 수 있습니다. collections.태그이름으로 사용합니다. collections.all는 모든 템플릿(글)을 말합니다.  11ty의 여러 설정은 .eleventy.js을 만들어서 설정합니다. root 폴더에 만듭니다. module.exports로 함수를 내보냅니다. module.exports = function(config){}와 같이 함수를 내보냅니다. 여러 설정된 객체를 return 해줍니다. return {} 안에 여러 설정 객체를 넣습니다. return {} 안에 d...