프론트엔드42 CSS - Flexbox로 레이아웃 잡기 display: flex 분석하기 display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. fllexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다. flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식요소에 적용해야하는 속성들이 있다. 부모 요소에 적용해야하는 Flexbox 속성 1. flex-direction : 정렬 축 정하기 2. flex-wrap : 줄 바꿈 설정하기 - 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 3. justify-content : 축 수평 방향 정렬 - 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 4. align.. 2023. 4. 7. Express Express Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기있는 프레임워크이다. Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 미들웨어를 추가할 수 있다. 라우터를 제공한다. 라우팅(Rountig) 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것이다. 추가적인 라이브러리를 사용하지 않고, 순수한 Node.js로 코드를 작성하면 다음과 같다. 반면에 Express는 프레임워크 자체에서 라우터 기능을 제공한다. Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다. 미들웨어(Middleware) Express의 가장 큰 장점인 미들.. 2023. 4. 5. CSS - Selector 기본 셀렉터 * { } // 전체 셀렉터 = 문서의 모든 요소 선택 h1 { } div { } section, h1 { } // 태그 셀렉터 = 같은 태그명을 가진 모든 요소 선택. 복수로도 선택 가능. #only { } // ID 셀렉터 = #id로 입력하여 선택 .center { } // class 셀렉터 = .class로 입력하여 선택 a[href] { } p[id="only] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribute 셀렉터 = 같은 속성을 가진 요소를 선택(모두 암기할 필요 X) 자식 / 후손 / 형제 셀렉터 자식 셀렉터 자.. 2023. 4. 4. CSS - 박스모델 border(테두리) 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다. 다음 코드를 통해 테두리를 실선으로 확인할 수 있다. p { border: 1px solid red; } border 속성에 적용된 값은 각각 border-width, border-style, border-color이다. margin(바깥 여백) p { margin: 10px 20px 30px 40px; } margin은 border를 기준으로 박스 외부의 여백을 지정한다. 각각의 값은 top, right, bottom, left로 시계방향이다. 값을 두 개만 넣으면 첫 번째 값이 상하, 두 번째 값이 좌우이.. 2023. 4. 4. CSS - 절대 단위와 상대 단위 절대 단위 - 주로 px을 사용한다. cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 - 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있다. em 요소의 글꼴 크기. ex 요소 글꼴의 x-height. ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. rem 루트 요소의 글꼴 크기. lh 요소의 라인 높이. vw viewport 너비의 1%. vh view.. 2023. 4. 4. fe-sprint-mini-node-server 생각 비교적 간단한 sprint 였지만, 사소한 실수들로 인해 많은 에러를 마주하였다. 열심히 구글링 해가며 오류를 해결해나가는 과정에서의 뿌듯함이 있었다. 요청의 body가 아래와 같이 되어야한다고 하는데 chunk와 Buffer 부분을 이해하지는 못했고 외우기에 그쳤다. let body = []; request.on('data', (chunk) => { body.push(chunk); }).on('end', () => { body = Buffer.concat(body).toString(); }); 2023. 4. 4. 이전 1 2 3 4 5 6 7 다음
