본문 바로가기

장원익 기술블로그

📺 Front End71

[Styled-Components] Styled-Component를 create-react-app에 추가하고 간단히 사용해보기 Styled-Component는 사실 npm에 의해 추가될 수 있는 라이브러리일 뿐이다. 그래서 Create-React-App을 통한 react 앱 생성에서 npm을 이용해서 추가해주기만 하면 준비는 끝난다. 적용 순서 적용 순서는 매우 간단한 과정에 의해 수행된다. create-react-app으로 react 프로젝트 만들기 react 프로젝트 초기화 작업 npm 모듈로 styled-components 추가하기 create-react-app으로 react 프로젝트 만들기 프로젝트를 생성하자. react 프로젝트 초기화 작업 react 프로젝트를 만들면 기본적으로 생성되는 svg나 serviceworker등을 삭제하고 다음과 같은상태로 만들자. npm 모듈로 styled-components 추가하기 그리.. 2020. 10. 6.

[Styled-Components] Styled-Components를 배우기 위해 알아야 하는 Template Literal 오늘은 Styled-component를 사용하기 위해 가장 기본이 되는 Js 문법인 Template Literal에 대해서 가볍게 알아보고 넘어갈 것이다. Template Literal 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여기서 문자열 리터럴은 무엇이냐? 기본적 사용법 여기서 따옴표를 사용하는데 우리가 사용하는 '' 가 아닌 ``를 사용한다. 이는 따옴표라고 하지 않고 백틱 (grave accent)을 이용한다. 템플릿 리터럴은 ${expression}로 표현할 수 있고, 표현식과 그 사이 텍스트는 함수로 전달된다. 일반 문자열 const name = "jang"; const message = `welcome ${name}`; console.log(message); // "hel.. 2020. 10. 6.

[Styled-Components] React의 Styled-Components란 무엇일까? 일반적으로 우리가 HTML Element를 스타일링할 때는 Css 파일을 import하여 사용하는 방법을 이용했었다. 이 방법은 현재 많은 부분의 웹 서비스에 존재하는 방법이고 매우 멋지고 잘 정리된 방법이다. 하지만 적어도 React에서는 컴포넌트를 스타일랑하는 방법은 다른 도구를 사용하는 방법이 더욱 추천된다. Styling In React 리액트에서 컴포넌트를 스타일링 하는 방법은 크게 3가지가 있다. Sass Css Module styled-components 그 중에 우리는 React 공식 홈페이지에서 권장하는 Styled-Component에 대해서 알아볼 것이다. 또한 가장 인기있는 라이브러리 styled-component에 대해서 알아보기 전에 간단하게 3가지의 차이에 대해 표로 정리해보자... 2020. 10. 6.

[CSS] CSS 작업시에 꼭 거쳐야하는 필수 과정 :: CSS Reset, HTML 요소 초기화, 리셋 css 오늘은 웹 개발에서 CSS 파트를 작업할 때 거쳐야하는 필수 과정인 *Reset Css *에 대해서 알아보려 한다. CSS Reset css reset은 HTML Element의 Default 값들을 없애주는 작업이다. 일반적으로 margin, font, padding, line, size등등과 같은 속성의 값들을 0 또는 none으로 만들어야 한다. 위에서 보이다 싶이 Firefox3와 IE7이 보여지는 방식이 달라 개발자가 의도한 대로 웹이 보여지지 않을 때가 있다. 이 경우 위에서 말한 듯이 모든 Element의 속성 값들을 없애야 한다. 왜? 웹 표준을 지키며 작업해야 하는 현대 개발 환경에서 IE가 아닌 다른 여러 브라우저에서 개발자가 의도한 대로 보여져야 한다는 요구사항은 선택 사항이 아닌 필.. 2020. 10. 6.

[CSS] Css Box-Model과 box-sizing의 border-box 속성 지난 시간에 우리는 box-model의 크기 속성을 구하는 작업을 했었다. 하지만 지난 시간에도 말 했듯이 박스 모델링을 적용한 후 반응형 웹을 만들기 위해 크기의 단위를 px가 아닌 % 단위로 적용했다고 가정해보자. 그럼 아래의 Element의 속성 값 단위는 px가 아닌 %가 되어야 한다. 그럼 정말 정말 정말 복잡해진다. 힘들게 우리는 border, margin, padding 값을 구해서 ( 물론 그렇게 힘들진 않지만 ) width와 height의 계산식에 대입하여 구했지만 이 계산식이 %가 들어가면 단순 + 계산으로 힘들다는 것을 알 수 있다. 이러한 문제점을 해결하기 위한 방법이있다. 바로 Box-sizing이다. box-sizing 위의 절대 단위에서 상대 단위로 변경하는 문제점을 해결하기 .. 2020. 10. 5.

[CSS] Css Box-Modeling 사이즈 계산 오늘은 Box-model의 사이즈 계산 방법에 대해서 알아볼 것이다. Box-model의 기본적인 개념에 대해서 모르는 사람은 해당 링크로 가서 한 번 가볍게 읽고 오는 것을 추천한다. Box-Model Box 모델을 사용할 때 우리는 각 Element에 border, padding, margin을 이용하여 크기를 지정한다. 오늘은 해당 Element의 크기를 계산하는 방법에 대해서 알아볼 것이다. 예를 들어 아래와 같은 Element가 있다고 가정해보자. div { width: 50px; height: 50px; padding: 30px; border: 1px solid #ff margin: 30px; } 계산하기 계산는 height와 width가 따로 계산 되어야 한다. width height 그럼 .. 2020. 10. 5.

이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음

티스토리툴바