CSS 썸네일형 리스트형 [마이리얼트립] 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년간.. 더보기 [CSS] Flexbox 안녕하세요. 약 1년 6개월의 솔루션 웹기획, 그리고 이제 막 서비스 기획 4개월차 아기 기획자 소소한G 입니다. 이번시간에는 CSS시간이에요. Flexbox를 알지 못했을 때는 float를 이용하여 객체들을 나란히 붙일 때 객체를 띄워서 붙이기만 했었는데, Flexbox를 알고 나서 더 깔끔하고 목적에 맞게 적절히 아이템들을 나열할 수 있었어요. Flexbox에 대해 알아볼까요? [WHY : 왜 사용할까?] Flex는 flex container가 사용 가능한 공간을 가장 적절하게 잘 채울 수 있도록 flex items의 너비와 높이를 변경할 수 있는 능력을 제공한다. 유연한 flex container는 사용 가능 한 공간을 채우기 위해 flex items을 확장하거나 오버플로우를 방지하기 위해 아이템을.. 더보기 이전 1 다음
