본문 바로가기

CSS6

[React] html 파일에서 css 파일 연결하기 - 떽떽대는 개발공부 react 에서 css 파일을 추가하는 것은 아래의 글에서 다룬 적이 있다. 2021.01.15 - [React] - [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React.. ddeck.tistory.com 이번 글에서는 index.html 파일에서 css 를 적용하도록 하겠다. 간단하게 html 에서 css 를 연결해준 방식과 동일하다. .. 2021. 3. 24.
[html/css] 반응형 웹 적용하기 - 떽떽대는 개발공부 혼자 웹페이지를 만들다가 반응형 웹에 대해 알게 되어 포스팅한다. 반응형 웹은 모바일 호나경이 시작되면서 장치(device)가 다양해지며 해상도의 크기 및 비율이 제각각 다른 경우가 생기며 발생했는데, 이전에는 동일한 비율(1024x768, 1280x960)에만 대응하면 됐지만, 지금은 비율이 매우 다양해지고 해상도가 높아져서 페이지 설계 시 고려할 사항이 많아졌다. 먼저, 모바일 브라우저에서 시도해야 할 부분은 viewport 이다. 이 부분은 html 에서 meta 태그를 활용하여 viewport 의 크기와 초기 줌 레벨 등을 기기에 맞게 적용되도록 선언하는 것이다. /* header 태그 안에서 사용 */ 위의 부분은 vs code 를 이용하여 html 을 생성하면 자동으로 적용된다. 만약 이 부분.. 2021. 2. 17.
[React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 ddeck.tistory.com 이전 글에서 webpack 을 이용하여 개발환경을 구성했다. 작성한 프로젝트에 css를 추가하고자 한다. src 디렉토리가 위치한 동일 디렉토리에 public 디렉토리를 생성하고 css 디렉토리를 생성한 후 style.css 파일.. 2021. 1. 15.
[React] react-dom 과 css animation 을 이용하여 loading 중 아이콘 구현하기 - 떽떽대는 개발공부 2021/01/11 - [React] - [React] ReactDOM 을 사용하여 팝업창 띄우기 [React] ReactDOM 을 사용하여 팝업창 띄우기 오늘은 react-dom 을 사용하여 팝업창 생성을 해보도록 하자. react 프로젝트가 생성될 때 하나의 돔이 생성되고 그 위에 view 가 그려진다. 따라서 팝업창을 생성하기 위해선 이미 펼져쳐 있는 dom 위 ddeck.tistory.com 이전에 react-dom 을 이용하여 팝업창 띄우기를 공부했다. 이 것을 응용하여 loading 중 아이콘도 구현할 수 있다. 동일하게 this.state값을 이용하여 로딩중 아이콘이 있는 팝업창을 나타낼 것이다. import React, {Component} from 'react'; import PopupD.. 2021. 1. 12.