animation은 각 애니메이션 제어 속성의 단축 속성animation: 애니메이션이름 지속시간 대기시간? 타이밍함수? 반복횟수? 반복방향? 전후상태? 재생/정지?;값의미기본값animation-name@keyframes의 이름none animation-duration 지속 시간 0s animation-delay 대기 시간 0s animation-timing-function 타이밍 함수 ease animation-iteration-count 반복 횟수 1 animation-direction 반복 방향 normal animation-fill-mode 전후 상태 none animation-play-state 재생과 정지 running CSS Animation ..

css함수를 사용하면 css 속성의 값으로 계산식을 지정할 수 있다./* property: calc(expression) */width: calc(100% - 80px); 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다.표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따른다. calc() - CSS: Cascading Style Sheets | MDN, , , , , , 또는 를 받는 속성의 값으로 사용할 수 있습니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/CSS/calc" data-og-url="https://developer.m..

요소의 스택 순서를 지정한다. 스택 순서가 더 큰 요소는 항상 스택 순서가 더 낮은 요소 앞에 있는다. ✍🏻 (easy version) 요소가 겹쳤을 때, 누가 앞에 보일지를 정하는 숫자=> 어떤 요소가 앞에 보이고, 어떤 요소가 뒤로 가는지 정한다. 숫자가 클수록 앞에 보이고 숫자가 작을수록 뒤에 숨는다. z-index는 position이 있는 요소에만 적용된다. z-index에 값을 명시하지 않으면 auto가 된다.

var()사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속서의 값으로 지정할 때 사용var(--header-color, red); 값이 아닌 속성이름, 선택자 등 다른 곳에 사용할 수 없다.시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계 없는 값이 된다. 첫번째 인수는 값을 가져올 사용자 지정 속성의 이름이다.선택적으로 제공할 수 있는 두번째 인수는 대체값이다. 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용한다. 대체 값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용한다.var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue이다.=> 첫번째 쉼표 뒤쪽은 모두 대체값이 된다. 두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자 ..

Float 자식이 부모로부터 떠오르다. 즉! margin을 없애다. 📘 The Code Magazine Blog Challenges Flexbox CSS Grid .main-header { background-color: #f2f4f3; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; /*height: 80px;*/ } /* SMALLER ELEMENTS */ h1 { color: #dc0073; font-size: 26px; text-transform: uppercase; font-style: italic; } 아직 float 속성을 입력하기 전 화면이다. float ..

Layout 레이아웃은 텍스트, 이미지 및 기타 콘텐츠에 배치되고 웹페이지에 정리되는 방식이다. 레이아웃은 페이지에 시각적 구조를 배치하여 콘텐츠를 배치한다. 레이아웃을 만든다는 것은 페이지 요소를 단순히 배치하는 대신 시각적 구조로 구성하는 것을 의미한다. 페이지 레이아웃(page layout) 과 구성 요소 레이아웃(component layout) 웹 페이지 내부의 큰 콘텐츠, 웹사이트는 요소를 배치하는 시점까지이다. 더 확대한 그림은 구성 요소 자체가 더 작은 콘텐츠로 구성 요소 레이아웃으로 되어 있다. CSS 빌드하는 3가지 방법 Float Layouts 레이아웃을 구푹하는 오래된 방법, float css를 사용 flexbox, CSS Grid같은 최신 기술로 대체되고 있다. 오래된 웹사이트에서는..

responmsive design(반응형 디자인) 사용하는 기기의 화면 크기에 따라 반응하는 웹사이트를 만드는 것이다. media queries(미디어 쿼리) media queries를 통해서 이 작업을 할 수 있다. media queries는 CSS와 style sheet에서 작성할 수 있다. 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 보통 화면 너비나 기기 종류에 맞춰 움직이는 방향을 통해 스타일을 조정한다. 매우 작은 화면이면 내비게이션 바를 접어서 공간을 넓힌다. 브라우저 속성에 맞추는데 뷰포트 너비나 높이 화면 방향같은 속성이 있다. 다양한 특징 및 매개변수가 다양하다. 미디어 쿼리는 @media로 시작한다. 괄호안에 미디어 기능을 다양하게 넣을 수 있다. width를 클..

flex sizing properties 공간이 있을때/없을때 어떻게 늘어나고 줄어드는 지 알 수 있다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; /* height: 500px; */ margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #container div { width: 200px; height: 200px; text-align: center; } fle..

align-content 행이나 열이 여러개일 때 교차축을 기준으로 정렬하는 것이다. 즉 열(행) 사이를 조정한다. align-content: space-between align-content: flex-start align-content: flex-end align-content: center 줄바꿈없이 단일 행/단일 열이라면 align-content는 아무것도 바뀌지 않는다. align-self align-self는 align-item과 비슷하지만 단일 요소에 사용하거나 플렉스 컨테이너에서 두 개 요소에 개별로 사용한다. 플렉스 컨테이너 자체에는 쓰이지 않는 특성으로 개벼 요소에 적용할 때 사용한다. 교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있다. align-self: space-betw..