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

html 구조도는 html 중요도에 따라 작성하면 된다. section이나 article요소에도 h도 쓰인다.최신 자료가 article영역이거나 banner가 section이면 h가 필요하다.  관공서 사이트가 웹 표준을 잘 지킨다.  이런식으로 화면 구성을 나눌 수 있다.  각각의 필요한 이미지를 개발자 도구를 통해서 다운받으면 된다.png는 배경이 투명한 것을 허용한다.  css는 중요도가 높은 것을 밑에 작성해야된다. cdnjs - The #1 free and open source CDN built to make life easier for developers cdnjs - The #1 free and open source CDN built to make life easier for develope..

CSS Box ModelContent(내용) - 텍스트와 이미지가 나타나는 상자 내용Padding(패딩) - 콘텐츠 주변에 투명한 영역을 만들어 border과 content사이에 여백을 추가하는 역할border(경계, 테두리) - padding과 content를 둘러싸는 테두리Margin(여백) - border 외부에 투명한 영역을 만들어 요소와 다른 요소 사이의 간격을 조정⭐ CSS로 요소의 너비와 높이 속성을 설정할때는 Content 영역의 width와 height만 설정하면 된다. 요소의 전체 width와 height를 계싼하려면 padding과 border도 포함해야한다. 요소의 총 너비는 350px이고 총 높이는 80px이다.div { width: 320px; height: 50px; pa..

HTTP 메서드란?클라이언트와 서버 간 통신을 관리하는 중요한 방식그러나 잘못 사용시, 보안에 취약할 수 있다. GET 방식은 URL에 데이터를 포함하여 전송하므로 ?이름=값과 같은 형태로 데이터가 노출된다.반면 POST 방식은 데이터를 요청의 본문(Body)에 포함하여 전송하기 때문에 상대적으로 보안성이 더 높다.그렇지만 두개의 방식 모두 적절한 보안 조치를 적용하지 않으면 취약점 발생 💀 PUT 방식은 데이터를 수정할 때 사용하는 HTTP 메서드이다.DELETE 방식은 데이터를 삭제할때 사용하는 HTTP 메서드이다.이들은 RESTful API에서 CRUD(Create, Read, Update, Delete)작업을 표현하는데 사용된다. RESTful이란?HTTP 메서드(GET, POST, PUT, D..

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..

Flexbox flexbox는 items을 금 긋기(열, 행을 긋기) 위한 표면적인 레이아웃 방법이다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용된다. flexbox는 1차원 레이아웃을 만드는데 사용할 수 있는 CSS 속성의 집합 flexbox의 주요 아이디어는 conatiner 요소 내부의 빈 공간이 자식 요소에 의해 자동으로 나눔 flexbox를 사용하면 부모 container 내부에서 수평 및 수직으로 항목을 자동으로 정렬 가능 flexbox는 수직 정렬 및 동일한 높이의 열 생성과 같은 일반적인 문제를 해결한 flexbox는 floats를 바꾸는데 완벽하고, 더 적은 코드와 HTML과 CSS를 깔끔하게 작성 float에 대해서 ..