| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- Netflix
- expo
- TiMER
- Nomad
- 바닐라 자바스크립트
- react-hook
- Firebase
- CSS
- 클론코딩
- 오류
- react-native
- Hook
- 자바스크립트
- 느낀 점
- 프로젝트
- 코코아톡
- Nicolas
- github
- 마무리
- coding
- Project
- react
- Nomad coder
- javascript
- Clone
- Vanilla
- vanilla js
- HTML
- 계획
- scflix
- Today
- Total
목록CSS (21)
꾸매코딩
[CSS] Grid에 대한 설명과 사용 방법
Grid란? Flex가 한 방향 레이아웃 시스템(1차원)이라면 Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이다. Flex도 충분히 좋은 기술이지만, 좀 더 복잡한 레이아웃을 위해 CSS Grid를 사용할 수 있다. Grid의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Grid Container(그리드 컨테이너), 자식 요소를 Grid Item(그리드 아이템)라고 부른다. "부모(컨테이너)는 Grid의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 6 7 8 9 Grid의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Grid 부모(컨테이너)에 적용하는 속성 grid 컨테이너 설정 displ..
[CSS] Flex에 대한 설명과 사용 방법
Flex란? Flex(플렉스)는 Flexible box, Flexbox라고 불린다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. Flex가 나오기 전 사용하던 float, inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다. Flex의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Flex Container(플렉스 컨테이너), 자식 요소를 Flex Item(플렉스 아이템)라고 부른다. "부모(컨테이너)는 Flex의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 Flex의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Flex 부모(컨테이너)에 적용하는 속성 flex ..
[CSS] HTML <img> vs background-image 차이 비교
서론 이미지는 항상 HTML 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다. 사용 방법 // HTML img tag // CSS background-image HTML HTML 에서 사용 가능 background-image 보다 SEO에 효과적 background-image 보다 성능에 효과적 default 이미지 포함 가능 이미지 불러오지 못했을경우 default 값으로 Broken image와 alt 텍스트가 보인다. background-image CSS에서 사용 가능 순수하게 디자인에 사용 이미지가 콘텐츠의 일부가 아..
[React] 동적인 타이머 만들기 React에서 FontAwesome 아이콘 사용/ 기본 배치 CSS
최종 결과 기존 타이머에 약간의 CSS를 적용시켰다. 아이콘은 FontAwesome에서 가져와 사용하였다. React에서 Font Awesome 사용 - 오류 JSX상에서 기존 HTML처럼 Font Awesome의 CDN키를 적용하니 아래와 같은 오류가 발생하였다. Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`? → JSX는 CamelCase를 사용하기 때문에 위와 같은 오류가 나온다고 생각한다. 관련 패키지 설치 Font Awesome의 SVG 기반 아이콘 활성화시키기 위한 패키지 npm i @fortawesome/fontawesome-svg-core Font Awesome에서 제공되는 Solid, Regular, Lig..
[React] Hook이란 무엇인가?
Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..
[React] React란 무엇인가? - React에 대한 개념 정리
React 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. [위키백과] facebook에서 제공해주는 프론트앤드 라이브러리. 사용자가 조작하기 위한 UI를 만들도록 도와줌. component 기반 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용 React 특징 1. Component 기반 구조 2. Data Flow 3. JSX 4. Virtual Dom 5. Props and State 1. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다. 스마트폰 배터리가 고장 나면 배터리를 고치면 된다. '액정', '배터리' 이를 Component 비유할 수 있..