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개의 댓글