프론트엔드

[CSS] CSS 초기화(Reset) 코드 모음

[CSS] CSS 초기화(Reset) 코드 모음 (글쓴날 : 2020.03.12) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 초기화(Reset) 코드 1) CSS 초기화(Reset)란? 먼저, CSS 초기화란 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다. 대표적인 브라우저에는 Microsoft의 인터넷 익스플로러(Internet Explorer), Google의 크롬(Chrome), Apple의 사파리(Safari), Mozila의 파이어폭스(Firefox) 등이 있으며, 브라우저들마다 내장되어 있는 CSS의 기본값들이 서로 다르게 설정되어 있습니다. 따라서, 웹 프로그래밍 시 분명히 동일한 코드인데도 ..

[styled-components] styled-components 소개 및 설치 방법

[styled-components] styled-components 소개 및 설치 방법 (styled-components 버전 : 5.0.1, 글쓴날 : 2020.03.10) * 이 글은 styled-components에 대한 단순 소개 글입니다. styled-components 소개 및 설치 1) styled-components란? styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리입니다. 물론, 이러한 인라인 스타일링이 별로 달갑지 않은 분들도 계실 것 같습니다. 또한, 저의 경우에도, 인라인 스타일링을 선호하지 않는 편입니다. 그럼에도 불구하고 제가 styled-..

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법 (글쓴날 : 2020.03.02) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 레이아웃(이미지, div 등) 중앙 정렬 방법 1) flexbox란? 간단하게 설명하자면 flexbox란 CSS3에서 새롭게 추가된 웹 레이아웃 모델로, 개발자들이 기존 CSS의 position, float, display 등의 속성들로 해결하기 힘들었던 문제들을 쉽고 유연하게 구현할 수 있도록 제공하는 기능입니다. 주로 1차원 레이아웃의 공간 배분 및 정렬을 하기 위해 설계되었으며, 행과 열 중점의 2차원 레이아웃을 다루는 Grid 레이아웃과는 지향점이 조금 다르니 각자의 상황에..

[CSS] 레이아웃 height 100%로 동작하게 하는 법

[CSS] 레이아웃 height 100%로 동작하게 하는 법 (글쓴날 : 2020.03.01) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS height에 % 값 적용 방법 1) 부모 태그의 높이를 100%로 지정하기 아래의 화면처럼, 만약 height를 100%로 지정했을 때 원하는 데로 동작하지 않으신다면, 저도 그랬듯이 아마 대부분의 경우가 부모 태그의 height가 지정하지 않은 경우일 겁니다. 따라서, 위의 화면처럼 height를 %로 지정하고 싶으시다면 html, body와 같은 부모 태그의 height를 전부 지정해 주셔야 합니다. (ex) 1 2 3 4 5 6 7 8 9 html, body { height: 100%; } 적용할..

[React] React Hooks란 무엇인가?

[React] React Hooks란 무엇인가? (React 버전 : 16.12.0, 글쓴날 : 2020.02.24) * 이 글은 React Hooks에 대한 단순 소개 글입니다. * 글의 내용은 공식 홈페이지 Hooks 문서를 기반으로 공부하여 작성하였습니다. * React 버전 16.8.0 이상, React Native 버전 0.59 이상부터 Hooks를 지원합니다. React Hooks란? 1) Hooks 소개 기존 React 컴포넌트들이 작성되던 방식인 Class의 형태는 사람과 기계 양측 모두에게 좋지 않은 점들이 있었고 끊임없이 React 개발자들에게 문제를 야기해왔다고 합니다. 하지만, function을 이용한 함수형 React 컴포넌트에서는 state를 관리하기 어려운 큰 문제점이 있었고 ..

[React Native] React Navigation 설치 및 사용법

[React Native] React Navigation 설치 및 사용법 (React Navigation 버전 : 5~, 글쓴날 : 2020.02.07) * React Navigation V5 이전의 createAppContainer가 deprecated되었습니다... ㅠ.ㅠ 1. React Navigation 설치 1) React Navigation 패키지 설치 npm install @react-navigation/native * npm 및 패키지 설치에 관해 궁금하시다면 ☞ [Node.js] npm 소개와 설치 및 사용법 2) 의존 패키지 설치 npm install react-native-reanimated react-native-gesture-handler react-native-screens re..