SUE 개발 블로그

레이아웃 하면 가장 많이 쓰게되는 것이 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 트리와 결합 시켜 렌더링 트리를 구성 ( 폰트 리소스도 요청 ) 콘텐츠를 화면에 그려줌 ( 이때 폰..

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,..