SUE 개발 블로그

Styled-component ? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않으며 스타일 지정된 컴포넌트 생성하여 Tag 를 쓰듯 스타일 컴포넌트를 사용하는 .리액트에서 UI 단위를 나누어 컴포넌트화 하듯 스타일을 컴포넌트화 하여 재사용이 가능하고 전역에서 중첩되지 않게함. 설치 $ npm install --save styled-components 사용법import React, { Fragment } from 'react';import styled from 'styled-components'; const App = () => { return ( Hello Hello )}const Button = styled.button` borde..

레이아웃 하면 가장 많이 쓰게되는 것이 Flex와 Grid 이다. Flex는 1차원적으로 수평, 수직 영역 중 하나의 방향으로 레이아웃을 나눈다. Grid는 2차원으로 수평, 수직을 동시에 영역을 나눌 수 있다. 어떻게 보면은 Flex는 메뉴가 몰려있는 nav같은 곳에 일정하게 아이템들을 배치 및 정렬하거나 텍스트와 이미지 등을 작업할 때도 유연하며 편리하고, Grid는 전체적인 레이아웃과 틀을 구성할 때 사용하면 편리하다. 이와 같은 작업은 사실 Flex나 Grid 둘 중 한가지만 사용하더라도 구현할 수 있지만 각자 더 적합한 사용 용도가 존재하며 궂이 한 가지 방법을 고수할 필요는 없다. 둘 다 적절히 사용하면 좋은 결과물을 낼 수 있다. https://developer.mozilla.org/ko/d..

CSS 속성 중 일부는 CPU를 많이 잡아먹는 Reflow나 Repaint 현상을 발생시켜 성능을 저하시킨다고한다. 우리는 이러한 부분을 최대한 최적화할 줄 알아야한다. Reflow와 Repaint의 의미와 발생시키는 속성들을 참고하자. Reflow width, height 같이 레이아웃 계산을 다시하며 추가/삭제, 크기/위치 변경 등 레이아웃에 영향을 주는 상황에 발생하여 실행된다. width height padding margin position top bottom left right border border-width clear display float font-family font-size font-weight line-height min-height overflow text-align verti..

사이트에 처음으로 진입했을 때 글자가 나오는데 시간이 걸리거나 적용한 폰트가 늦게 적용되는 현상이 발생할 때가 있다. 이 현상을 FOIT과 FOUT라고 지칭한다. Flash of Invisible Text ( FOIT ) 브라우저가 폰트를 다운로드를 끝내기 전까지 글자가 보이지 않는 현상. Flash of Unstyled Text ( FOUT ) 브라우저가 폰트를 다운로드를 끝내기 전까지 폰트가 적용되지 않는 현상. 브라우저는 렌더링시 HTML 문서를 요청 HTML 응답시 DOM 구성 시작 ( CSS, JS 및 기타 리소스를 요청 ) 모든 CSS 콘텐츠를 수신 후 CSSOM을 구성 하고 CSSOM을 DOM 트리와 결합 시켜 렌더링 트리를 구성 ( 폰트 리소스도 요청 ) 콘텐츠를 화면에 그려줌 ( 이때 폰..

오늘 작성한 미션 파일 코드들을 정리하여 제출했다. HTML / CSS를 공부하면서 느낀점은 생각보다 너무 만만하게 봤다는 것이다. 물론 JS와 같이 기능적인 부분의 코드를 짜는 것 보다는 쉽고 재밌지만 HTML의 시멘틱 작성과 CSS의 레이아웃 구성은 생각보다 골 아픈 작업이었다. 어디에 어떤 태그를 써야 맞는거지? Grid Layout은 어떻게 짜야하지? 등의 연속이었다. 하지만 역시 프론트엔드의 매력답게 실시간으로 변해가는 내 페이지의 모습을 보는 것이 나름 즐거워서 지치지 않고 한 것 같다. 그 중 어려웠던 것은 역시나 Grid. Flex에 절여진 내 뇌는 자꾸 미션을 진행하면서 왜 이걸 Grid로 짜야하지? 아니 왜 머리 아프게 이렇게 해야... 모든 것을 Flex로 해결하려던 나에게 Grid를..

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다. - Sass 공식 홈페이지 CSS는 규모가 커질수록 코드가 복잡하고 길어지며 그에 따라 유지보수가 어려워진다. 같은 내용의 코드를 재사용하려면 복사와 붙여넣기를 해야하는 등 불편한 점이 존재한다. Sass는 컴파일 과정을 통해 CSS파일을 생성해주는 확장 언어이자 전처리기(preprocessor)로 다양한 기능을 가졌으며 코드를 작성하는 시간 단축과 유지 관리를 쉽게 도와준다. 하지만 Sass는 CSS의 확장 언어이지, CSS를 대체하는 언어가 아니라는 점. Sass는 제공하는 문법으로 코드를 작성하면 이를 컴파일하여 CSS파일을 빌드해 스타일시트를 생성해주는 것이란 점을 알자. Sass를 사용해야 하는 이유는 뭘까 ?..

프론트에 관심이 있고 어느정도 검색을 해본 사람이라면 바로 HTML, CSS, Javascript 를 떠올리게 된다. HTML은 웹의 구조 ( 뼈대 ) 를, CSS는 외관을 ( 인테리어 ) , JS 는 기능을 ( 상수도, 전기배관, 엘리베이터, 인터넷 ) 만들어주며 건축에 비유해 해석하면 금방 이해가 될 것이다. 그 중 CSS ( Cascading Style Sheets ) 는 정확히 어떤 아이일까 ? 이름을 그대로 해석해보자면 Cascaing Style Sheets 계단 방식으로 스타일을 작성하는 시트란 뜻으로 HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. p { color: blue; font-size: 16px; } 1번줄 선택자 (selectors) :..

1. position 속성 - relative, absolute, fixed 2. inline, inline-block, block Position 태그 및 속성은 웹 문서의 요소들을 어떻게 배치할지를 정하는 속성으로 이용시 텍스트나 이미지 등을 원하는 위치에 배치할 수 있다. CSS를 이용해 문서의 레이아웃을 배치하고, 수정 작업을 해야하는 프론트개발자에겐 화면구현에 있어서 중요한 부분으로 Position 속성을 제대로 알고있어야 레이아웃에 대한 작업이 쉬워진다. Position의 속성은 static, relative, absolute, fixed 가 기본적으로 있으며 비교적 최근에 추가된 sticky가 있다. MDN 에서 더 자세히 알아보기 오늘은 메인 키워드인 Position 속성 relative,..