SasS 썸네일형 리스트형 [트위터] Webpack 리액트 컴포넌트 분리 안녕하세요. 서비스 기획자 소소한 G입니다. 오늘은 트위터 예제를 이용하여 리액트 컴포넌트 분리하는 방법에 대해 배워보아요. twitter 홈 만들기 컴포넌트 분리(button, sidebar), svg 불러오기를 통해서 왼쪽 메뉴를 만들어봅시다. components 폴더를 생성하여 컴포넌트로 분리할 button, Sidebar 폴더를 생성합니다. 우선 Sidebar 부터 분리해보자. [Sidebar] 1. index.jsx 에서 기본 설정을 해준다. 그리고 css module을 사용해서 스타일을 사용하기 위해서 아래와 같이 scss 파일도 import 해 준다. 전체적인 Sidebar 의 index.jsx의 코드는 아래와 같다. 1. Sidebar의 parameter 안에 titleImg, list 데.. 더보기 [마이리얼트립] SASS(SCSS)로 반응형 꾸미기, 컴포넌트화 안녕하세요. 약 1년 6개월의 솔루션 웹기획, 그리고 이제 막 서비스 기획 4개월차 아기 기획자 소소한G 입니다. SCSS로 마이리얼트립 페이지를 반응형도 만들어보고, 재 사용할 수 있는 부분을 컴포넌트화 시켜 나누는 작업을 해보려고 합니다. 먼저 '마이리얼트립' 의 헤더부분을 마크업, css 꾸미기 후, 컴포넌트화 시킬거에요. SASS(SCSS)를 설정해주는 방법을 알아볼까요? module.scss를 사용하여 꾸며줄 거에요. 이 파일은 scss를 사용하는데 css-module까지 사용함을 의미합니다. 1) scss 모듈 설치하기 css, scss, node-sass, css-module이 필요해요. 우리는 이미 다른 모듈들은 설치했기 때문에 node-sass, sass-loader 모듈만 설치할게요. .. 더보기 [CSS] CSS, SASS, BEM, CSS-module 안녕하세요. 약 1년 6개월의 솔루션 웹기획, 그리고 이제 막 서비스 기획 4개월차 아기 기획자 소소한G 입니다. 이전 포스팅에서 CSS의 Flexbox에 대해 설명했었는데요. 오늘도 오랜만에 CSS에 대해서 알아보아요. [CSS] [CSS의 진화 과정] CSS (Cascading Style Sheets) html : 논문을 보여주기 위한 포맷 WWW(World Wide Web)을 점점 개인이 쓰게 되면서 웹이 개발되고 사람들이 커뮤니티 사이트를 사용하기 시작했다. 1) 웹 시장이 커지면서 90년대 '와우팩터'가 높은 웹을 만드는 것이 유행하게 되었다. 2) 그래서 html과 CSS를 잘 짜는 방법을 사람들은 고민하기 시작했다. 3) CSS는 코드를 예쁘게, 깔끔하게 짜기가 어렵다. 4) 이 후 30년간.. 더보기 이전 1 다음
