태그: CSS

[React] Styled Components 사용법

지난 포스트에서 외부 라이브러리 없이 CSS 만으로 React 컴포넌트를 스타일링하는 방법을 알아보았습니다.이번 포스트에서는 대표적인 CSS-in-JS 라이브러리인 Styled Components를 사용해서 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. CSS in JS?먼저 CSS in JS의 개념을 짚고 넘어가겠습니다.CSS in JS는 스타

React 컴포넌트 CSS 스타일링 기본

React 공식 레퍼런스에 따르면 React에서는 명확한 스타일 가이드를 제공하지 않습니다. React does not have an opinion about how styles are defined. 그도 그럴 것이 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문에 React에서 꼭 찝어 어느 방식을 따르라고 얘기하기가 조심스러울 것입니다

Font Awesome 5 사용법 (ver 4 포함)

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.Font Awesome 5가 출시된지 시간이 꽤 흘렀음에도 불구하고, 아직까지도 Font Awesome 4가 많이 사옹되고 있습니다.여러가지 이유가 있겠지만 저는 개인적으로 Font Awesome가 일부 아이콘들을 유료화하는 과정에서 다소 복잡해진 부분이 없지

CSS 상대 단위 - em과 rem

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다.이번 포스트에서는 em과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록 하겠습니다. 상대 단위란?상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유

CSS 박스 모델

웹페이지 상의 모든 엘리먼트는 하나의 박스의 개념으로 모델링 할 수 있습니다.이 박스 모델이라고 불리는 컨셉은 CSS의 근간이 되기 때문에 반드시 이해하고 있어야 합니다. Box Model 이란?우리가 웹페이지에 배치하는 모든 HTML 엘리먼트는 3개의 층을 가진 사각형 구조의 형태를 띠고 있습니다. 가장 외곽의 층을 margin 영역이라고 부르는데, 보

[CSS] display 속성: inline, block, inline-block

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다.여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하겠습니다. inlinedisplay 속성이 inline으로 지정된 엘리먼트는 전후

웹팩(Webpack) 기본 설정법 (Entry/Output/Loader/Plugins)

React나 Vue, Angular와 같은 자바스크립트 프레임워크를 기반으로 프로젝트를 하다보면 webpack.config.js라는 파일과 자주 마주치게 됩니다. 바로 웹팩 설정 파일인데요. 이번 포스트에서는 이 설정 파일을 기본으로 한 웹팩 기본 설정법에 대해서 알아보도록 하겠습니다. 웹팩에 대한 기본 개념이나 사용법을 모르시는 분은 지난 포스트를 먼저

[CSS] 메뉴바 상단에 고정 시키기

fixed position을 이용해서 스크롤에 해도 따라가지 않고 항상 화면 상단에 고정되어 있는 메뉴바를 만들어보겠습니다. fixed position의 특징CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다.어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히

[CSS] 이미지의 일부로 캡션 넣기

지난 포스트에서 absolute position의 기본적인 특징과 작동 매커니즘에 대해서 살펴보았습니다.이번 포스트에서는 absolute position를 응용해서 이미지의 일부로 캡션을 넣는 방법에 대해서 알아보겠습니다. 기본 이미지 캡션 배치웹페이지 상의 이미지에 캡션을 넣을 때는 보통 HTML5에서 도입된 <figure/>와 <figc

[CSS] Absolute Postion - 자유로운 엘리먼트 배치

부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치시킬 수 있는 absolute position에 대해서 알아보겠습니다. 엘리먼트 배치 관련 CSS 속성CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다.기본값은 static이며 relative나 absolute, fixed 등으로 변경이 가능합니다.이번 포스트에서