le récit de ellie

서버에서 받아온 timestamp 형식의 시간 데이터를 javascript의 Date 형식으로 변환하면 연도, 월, 일, 시간, 분 등을 추출할 수 있다. const sendAt = "2021-11-23T20:33:58.876+00:00"; const date = new Date(sendAt); // Date 형식으로 변환 console.log(date.getMonth()+1, date.getDate(), date.getHours(), date.getMinutes());

엘리먼트를 정 가운데에 위치시켜야할 때가 많다. 이럴 때 보통 다음과 같은 방법을 생각 할 수 있지만, 이 방법을 사용해도 정 가운데 위치하지 않는다. position: absolute; top: 50%; left: 50%; 다음과 같이 한 줄만 더 추가해주면 정 가운데에 위치 시킬 수 있다!! position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

개념잡기 Web Club :: CSS 애니메이션(Animation), 키프레임(keyframes) (tistory.com) CSS 애니메이션(Animation), 키프레임(keyframes) CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임 webclub.tistory.com 애니메이션 모음 소셜 미디어 아이콘 클릭 효과 Social Media Icons (HTML and CSS) (codepen.io) Social Media Icons (HTML and CSS) In this pen I create social media links with effets. Cl..

오늘은 웹 프로젝트에서 폰트를 적용할 때 유용한 구글 웹 폰트의 사용 방법을 알아보자!! Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 폰트와 굵기를 선택해 다운 받지 않고도 와 @import 방식으로 적용할 수 있다. @import CSS 파일에 다음과 같이 적용하면 전체 글씨에 해당 폰트를 적용 할 수 있다. /* Font */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=..

리액트 다큐멘테이션 About the Documentation | Create React App (create-react-app.dev) About the Documentation | Create React App Welcome to the Create React App documentation! create-react-app.dev 프로젝트 구조 잡기 3-2. 프로젝트 구조 잡기 · GitBook (vlpt.us) 3-2. 프로젝트 구조 잡기 · GitBook 이번 섹션에서는 프로젝트를 생성하고 기본적인 설정을 해보도록 하겠습니다. create-react-app 을 통하여 프로젝트를 생성하고, 앞으로 우리가 필요한 모듈들을 설치해주세요. 뭔가, 의존 모듈이 redux-advanced.vlpt.us 절대..

text-decoration 텍스트의 장식을 지정하는 속성이다. (기본 값 : none currentColor solid) text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit; text-decoration의 속성 값 text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성이다. (기본 값 : none) none : 텍스트 꾸밈을 생성하지 않음 (기본값) underline : 밑줄로 꾸밈을 설정 overline : 윗줄로 꾸밈을 설정 line-through : 중간을 지나는 줄로 꾸밈을 설정 text-decoration-color 텍스트 꾸밈의 색상을 지정하는 ..

text-indent 텍스트의 들여쓰기를 지정하는 속성이다. (기본 값 : 0) text-indent: length | initial | inherit; text-indent의 속성 값 length : px, em 등을 이용해 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동한다. text-indent: 40px; text-indent: 1em; text-indent: -40px; /* 비추천 방식 */ percent(%) : 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기한다. 이때 부모의 width는 border, padding 등의 요소는 제외한 순수한 width를 말한다. text-i..

css를 통해서 텍스트를 수직, 수평 정렬 할 수 있다. 수직 정렬은 vertical-align 속성을 이용하며, 수평 정렬은 text-align 속성을 이용한다. 이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있다는 것이다. 따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 수직, 수평 정렬이 적용되지 않는다. vertical-align 요소의 수직 정렬을 지정하는 속성이다. (기본 값 : baseline) vertical-align: keyword | length | percent | initial | inherit ; vertical-align의 속성 값 keyword : baseline(기본 값), sub, sup..

font의 경우 앞서 배운 font와 관련된 다양한 값을 축약 속성에 넣을 수 있다. 다만 속성마다 선언 순서를 지켜야 하는 제약이 있음에 유의해야한다. 또한, 반드시 꼭 넣어야 하는 속성들이 있는 등 지켜야 할 규칙이 많고 가독성이 좋지 않기 때문에 실무에서 선호하는 편은 아님을 알아두자. 그렇지만 font로 선언된 속성을 보고 어떤 값들이 적용되어 있는지 해석할 수 있어야 한다. 축약 가능한 font 관련 속성 font-style, font-variant, font-weight, font-size/line-height, font-family 속성들은 한 번에 선언할 수 있는 축약형 속성이다. (기본 값 : 각 속성들의 기본 값) font: font-style font-variant font-weigh..

font-variant 글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환해준다. (기본 값 : normal) font-variant: normal | small-caps | initial | inherit ; 한글에는 적용되지 않는다. normal : 기본 값 small-caps : 소문자를 작은 대문자로 변형 font-variant: normal; font-variant: small-caps;