profile
꿈 을 코딩하자

CSS Selectors

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

2020년 12월 2일
·
0개의 댓글

CSS Animations

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

2020년 12월 2일
·
0개의 댓글

CSS Transition

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

2020년 12월 2일
·
0개의 댓글

CSS Background 이해하기

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

2020년 12월 2일
·
0개의 댓글

CSS Typography

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

2020년 12월 2일
·
0개의 댓글

CSS Media Query

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

2020년 12월 2일
·
0개의 댓글
post-thumbnail

CSS Flexbox

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

2020년 12월 2일
·
0개의 댓글

CSS Position 이해하기

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

2020년 12월 2일
·
0개의 댓글

CSS Float 이해하기

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

2020년 12월 2일
·
0개의 댓글
post-thumbnail

CSS Box Model 이해하기

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

2020년 12월 2일
·
0개의 댓글

Media

Media 예제

2020년 12월 2일
·
0개의 댓글

표 Table

Table 예제

2020년 12월 2일
·
0개의 댓글

Form 태그

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

2020년 12월 1일
·
0개의 댓글

인용 Quotations

인용 Quotations 태그 에제

2020년 12월 1일
·
0개의 댓글

정의 리스트 Description List

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

2020년 12월 1일
·
0개의 댓글

목록 List

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

2020년 12월 1일
·
0개의 댓글

이미지 Image

이미지 태그

2020년 12월 1일
·
0개의 댓글

Anchor(링크)

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

2020년 12월 1일
·
0개의 댓글
post-thumbnail

[스파르타 코딩클럽]나만의 웹서비스 만들기 "DreamLog(개발 일지 블로그)" 5주차 - 'DreamLog' 그려보기

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

2020년 10월 24일
·
0개의 댓글

리덕스 라이브러리 이해하기

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

2020년 10월 20일
·
0개의 댓글