요소, 클래스, ID 선택자(Type, Class, ID Selector) Child, Descendant & Sibling Combinators Structural Pseudo-classes User Action Pseudo-classes

CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.CSS 애니메이션은 기존에 사용되던 스크립트를 이용한

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면

background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다.배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다.배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다.

Typography 글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다. (1) 스타일 종류 1) 글자 가. font-family 나. font-size 다. line-height 라. font-weight 마. font-style

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게

static: 일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.relative: 여기서 태그의 위치를 살짝 변경하고 싶을 때 positio

Block속성 가로배치Box의 정의 중 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합=부모의 height(x)(집 나간 내 새끼, 찾을 길 없네)블록으로 신분 상승길막을 못해 슬픈 블록플로트는 나만 볼 수 있어요(feat. 인라인)ove

가로 width 세로 height안쪽 여백, 즉 content와 border 사이의 공간을 나타내는 padding테두리를 타나태는 border바깥 여백, 즉 요소와 요소 사이의 간격을 나타내는 margin

Media 예제

Table 예제

사용자로부터 Input을 받기 위한 태그입력창, 인풋 필드 input field폼 양식에 이름을 붙이는 태그

인용 Quotations 태그 에제

정의 목록 Description List 1.용어를 정의할 때 사용하는 정의리스트 2.key-value로 정보를 제공할 때 태그 정의 예제

순서가 중요하지 않은 목록순서가 중요한 목록

이미지 태그

현 위치에서 다른 위치로 이동새 탭 후 해당 위치로 이동

프로젝트 이름/설명DreamLog(현재 IT 트렌드와 개발일지를 기록할 수 있는 반응형 블로그)프로젝트 생김새(레이아웃)개발해야 하는 기능들3-1. 회원가입, 회원탈퇴, 로그인, 정보수정(authService)3-2. Mark-Down editor를 사용하여 글 쓰기,

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하낭의 객체로