yebeen blog

가끔 아래와 같이 pug파일 ("home") 을 views에서 찾을 수 없다고 에러가 발생하는 경우가 있는데 이러한 오류가 나는 이유 중 하나는 views의 위치 때문이다. Error: Failed to lookup view "home" in views directory views의 위치는 process.cwd()/views로 설정되어 있고 이곳에서 pug파일을 찾는다. [ process.cwd()의 값은 서버가 시작되는 곳으로 package.json의 위치이다. ] 그런데 아래와 같이 views directory가 src 폴더 안에 있게 되면 위와 같은 오류가 발생하는 것이다. *package.json *src *views home.pug login.pug 이를 해결하기 위해서는 views의 위치를 p..

pug pug란 express 뷰 엔진으로 html을 좀 더 보기 좋게 사용할 수 있게 하는 템플릿 언어, express 뷰 엔진이다. 사용을 위해서는 아래의 명령어를 터미널에서 실행시켜줘야한다. npm i pug 그 이후엔 아래의 코드를 파일에 삽입해야 view engine이 pug로 설정된다. app.set("view engine","pug"); 그렇다면 우리가 알던 html코드와 pug코드의 차이점은 무엇일까? 평소 우리가 알던 html은 아래와 같이 작성하는데 Hello this is a html file pug를 사용한다면 아래와 같이 작성된다. 를 사용하지 않아도 되며 부모자식 관계는 들여 쓰기로 사용한다. body div h1 hello p this is a pugfile 물론 pug를 사용..

아래는 코딩을 하기 전에 편리하게 코딩을 하기 위해 하는 작업 + express 사용을 위한 준비이고 기본적으로 Node.Js가 깔려있어야 한다. node --version을 터미널에 입력해 다운이 되어있는지 확인해 보고 다운이 안되어있으면 https://nodejs.org/ko/download 여기에서 다운로드하면 된다. 1. package.json 파일 생성 = npm init를 터미널에 입력해준다 "main"은 대표 파일을 지정하는 것이고 "scripts"는 긴 명령어들을 간단하게 사용할 수 있도록 한다. 터미널에서 npm run test를 입력하면 7번 라인에 존재하는 명령어가 실행된다. 2. express install npm i express express를 추가하는 것으로 위의 명령어를 입력..

우리가 grid-template-rows에 설정한 행의 수 보다 많은 element들이 화면에 보이게 된다면 우리가 설정한 크기와 같지않는 cell들이 발생한다. 아래의 코드를 보면 4X4의 그리드를 만들었지만 element가 31개이기에 16번째까지는 우리가 설정한 grid에 들어가고 17번째 element부터는 우리가 설정한 100px X 100px 의 크기를 가지지 못한다. 이를 해결하기 위해서는 grid-auto-rows를 사용하면 된다. grid-auto-rows의 크기를 설정해놓으면 만들어놓은 row 보다 많은 element가 있으면 자동으로 설정한 크기에 맞는 row를 만들어준다. grid-auto-rows의 경우 다음 row에 요소들이 배치가 되는데 그 이유는 grid-auto-flow가 ..

Scss / Sass css preprossesor로 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다. Scss와 Sass는 서로 다른 syntax를 가지고 있으나 Scss가 Sass를 위한 공식적인 syntax를 릴리즈하고 있다. Scss는 업계 표준이 되어가며 css를 programming language처럼 만들고 있다. [ Scss와 Sass의 차이점 ] Scss = 선택자의 유효범위를 {}로 구분 Sass = 선택자의 유효범위를 들여쓰기로 구분 1. variables 반복적으로 사용되거나 관리가 필요한 css 값들을 변수로 지정 1 ) _variables.scss 파일 만들어 [$변수명:값; ] 형식으로 작성 ( _가 파일명에 포함되면 css로 변하지 않음) 2) styles.scss 파..

아래의 글을 보면 grid 설정법에 대해 작성해 놓았다. 하지만 화면크기, 요소의 수에 따라 자동으로 요소의 크기가 변하게 만들게 만드는 법은 정리를 안 해서 따로 또 글을 쓴다.... [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com 이번엔 grid-template 설정 시 사용할 수 있는 auto-fill, auto-fit에 대해 정리해 볼 것이다. [ auto-fill , auto-fit ] aut..

[ min-content, max-content ] css 코드를 작성하다보면 요소 안의 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때가 있다. 이때 사용할 수 있는게 min-content와 max-content이다. min-content :콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다. : 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다. max-content : 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다. : 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로 수평 방향의 컨텐츠인 텍스트인 경우 줄 바꿈 되지 않고 쭉 뻗은 길이이다. 위에 그림에서..

[ fr ] 그리드 트랙 사이즈로 사용되는 단위로 그리드 컨테이너에서 사용 가능한 공간을 비율로 나눠 설정한다. 아래 예시를 통해 살펴보자 grid-template-columns:1fr 1fr 2fr 1fr로 설정할 경우로 사용할 수 있는 공간을 1:1:2:1 비율로 공간을 가지게 된다. 그렇다면 400px의 사용공간을 가지는 그리드에 grid-template-columns : 40px 1fr 2fr 1fr로 설정하면 어떻게 그리드가 설정될까? 위에서 언급한 것처럼 사용 가능한 공간에 대한 비율이기에 400px공간에서 40px를 뺀 나머지 공간인 360px를 가지고 1:2:1 비율로 공간을 가지게 된다. [ minmax() ] 앞서 이야기 한 것처럼 fr는 가지고 있는 공간 ( 사용 가능한 공간 )을 ..

아래 글에서 소개했던 방법 중 grid 사용하기 위한 설정 1,2를 하고 HTML 요소들 원하는 grid 위치에 삽입하기 - 1 의 방법을 채택하면 써야할 코드가 생각보다 많아진다. 2번과 4번 방법 또한 라인을 생각하면서 코드를 짜야하기에 실수를 하는 일이 많아지는데 이를 해결하기위한 방법을 소개해볼까한다. [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com grid-template을 사용해 grid 사..

grid를 사용하다 보면 아래처럼 element를 감싸는 선이나 element 간의 간격을 두고 싶을 때가 있다. 이때 우리는 흔히 아래 코드의 7~8번째 라인처럼 자식 element(main속 div들) 자체에 border를 주면 되지 않을까?라는 생각을 하게 된다. 하지만 위와 같은 코드 결과는 아래의 사진처럼 header와 column, column과 nav 등의 사이에 border가 겹쳐 border의 두께가 달라진다. 물론 각 element의 border 두께를 다르게 주면되겠지만 그러면 설정해야 하는 border 두께 양이 너무 많아진다!!!! ( 이런 귀찮은 상황이 매우 싫은 편... ) 이럴 경우에는 gap과 padding을 사용하면 된다. gap은 행과 열 사이의 간격을 설정하는 속성으로..