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이다.=> 첫번째 쉼표 뒤쪽은 모두 대체값이 된다. 두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자 ..

Fluid Layout(유동형 레이아웃) 현재 뷰포트 width (또는 height)에 적응하도록 웹페이지를 설정하려면 다음을 사용 레이아웃에 % (또는 vh / vw) 단위를 사용하여 뷰포트에 적응해야 하는 요소에 대해 px 대신에 사용 width 대신 max-width를 사용 Responsive Units 대부분의 길이에 대해 px 대신 rem 단위를 사용 전체 레이아웃을 자동으로 축소 (또는 확대)하는 것을 쉽게 만들기 위해 Flexbile Images 기본적으로 뷰포트를 변경할 때 이미지는 자동으로 크기가 조정되지 않으므로 이를 수정 이미지 차원에 대해 항상 %를 사용하고 max-width 속성과 함께 사용 Media Queries 특정한 뷰포트 너비(breakpoints)에서 CSS 스타일을 변..

1단계 #pond { display: flex; justify-content: flex-end; } 2단계 #pond { display: flex; justify-content: flex-end; } 3단계 #pond { display: flex; justify-content: space-around; } 4단계 #pond { display: flex; justify-content: space-between; } 5단계 #pond { display: flex; align-items: flex-end; } 6단계 #pond { display: flex; justify-content: center; align-items: center; } 7단계 #pond { display: flex; justify-con..

사용 방식: img 속성은 HTML 이미지 요소()에 직접 적용됩니다. 이 속성은 이미지 파일의 경로를 지정하여 해당 이미지를 표시합니다. background-image 속성은 CSS 스타일 시트에서 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 요소의 내용과 겹쳐서 배경 이미지를 표시합니다. 적용 대상: img 속성은 주로 단일 이미지를 표시하기 위해 사용됩니다. HTML에서 요소를 사용하여 이미지를 삽입하고, src 속성을 사용하여 이미지 파일의 경로를 지정합니다. background-image 속성은 요소의 배경에 이미지를 적용하는 데 사용됩니다. 이 속성은 텍스트나 다른 내용과 겹쳐서 배경 이미지를 표시할 수 있습니다. 이미지 크기 조절: img 속성은 이미지의 원본 크기를 유지하거나..

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같은 최신 기술로 대체되고 있다. 오래된 웹사이트에서는..