EtoC

음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다. margin, padding 쓰지말고 display나 grid를 쓰라고하는데 그게 뭐지 display: flex CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다. 플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정..

백엔드 공부를 하면서 mvp를 사용햇었는데 이제 css를 사용할 때가 왔다. 사용해오던 mvp부분을 지워주니 마음에 안들음.. 이제 사이트를 꾸며보려고하는데 cdnjs를 사용해야한다. 근데 cdnjs가 뭐지? CDN (Content Delivery Network) 분산된 서버 네트워크를 활용하여 웹 콘텐츠를 빠르고 안정적으로 제공하는 서비스이다. 웹 사이트의 이미지, 스타일 시트, 자바스크립트 파일 등과 같은 정적 콘텐츠를 여러 지역의 서버에 캐시하고, 사용자가 해당 콘텐츠를 요청할 때 가장 가까운 서버에서 제공하여 응답 시간을 최소화하고 부하를 분산할 수 있다. 이점으로는 다운로드 속도향상, 높은가용성, 트래픽 분산을 통한 부하 분산, DDos 방어를 통한 강한 보안이있다. cdnjs cdnjs는 Co..

내가 기억하기로는 프론트분들이 싸스라고 했던거같은데 왜 scss를 sass라고 부르는지 궁금해서 검색해봤다. SCSS(SASS)란? Syntactically Awesome StyleShee로 CSS의 단점(selector, 연산기능 등)을 보완하고 편의성을 높인 CSS 전처리기이다. 전처리기는 CSS가 동작하기 전, 개발단계에서는 SCSS를 사용하고, 웹에서는 CSS로 변환해서 작동한다. .sass? sass는 css의 전처리기로 해석되어 CSS로 컴파일되는 스크립트 언어이다. sass에서는 중괄호대신 들역쓰기를 사용하여 코드블록을 정의한다. body font-family: Arial, sans-serif .container background-color: $primary-color padding: 20..

webpack은 웹에서 사용되는 자원(asset)들을 번들링해주는 도구이다. 번들링은 여러파일의 종속성이 존재하는경우 그파일들을 모아서 압축,변형시켜 최소화하고 필요한 과정을 거쳐 정리한 코드를 결과물로 반환한다. 쉽게말해 그 종속성이 존재하는 파일을 하나의 파일로 묶어주는 패키징과정을 말한다. js를 구버번의 js로 바꾸거나 Sass를 CSS로 변경할 수 있는 등 많은 것을 할 수 있다. 보통 React난 Next.js 같은 것에는 webpack이 기본적을 포함되어있다. 모든 webpack.config.js파일들은 동일한 구조를 갖는데, entry, output, rules, 변형할 파일을 설정하는 방법은 기억해두자. Webpack 설치과정 webpack documentation npm i webpac..

CSS 레이아웃 보통 무언가를 만든다거나 계획을 세울때 우리는 기본틀부터 짜기 시작합니다. 이곳에는 이렇게하고 저기에는 저렇게, 저곳은 또 이렇게해야지 구성을 짜는것을 CSS에서는 layout이라 합니다. 즉, layout은 내가 원하는곳에 블록의 요소들을 배치하는 것입니다. 배치방법으로는 display 사용하는 방법, table태그 를 사용하는 방법, float 속성을 사용하는 방법 등이 있습니다. table태그를 사용하거나 float을 쓰는것은 과거에 많이 사용했으나 요즘에는 display:flex를 많이 쓴다고 합니다. 1.Position의 property(속성) CSS의 position은 웹문서 안의 요소들을 어떻게 배치하여 나타낼지를 정하는 속성입니다. position속성을 사용하면, html ..