091

01. 애니메이션 - CSS 애니메이션은 속성 값의 변화를 시간에 따라 자동으로 실행시킬 수 있게 해줍니다.@keyframes name_of_animation {0% {}50% {}100% {}/*---위처럼 더 자세하게 지정할 수도 있습니다. 이후에 애니메이션을 직접 사용할 때 시간을 정하고 정해진 시간 내에서 비율에 따라 나누는 것입니다----*/from {}to {}}#identifier {animation-name: name_of_animation;animation-duration: (위해서 말한 애니메이션 진행 총 시간, 1s,2s ...etc);animation-timing-function: (시간곡선);animation-delay: (시작 전 대기시간);animation-iteration-c..

01. Flexbox - flexbox(flexible box layout)는 컨테이너 안에 있는 아이템을 유연하게 배치할 수 있도록 해주는 레이아웃 시스템 -> 컨테이너에 적용되는 코드: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, -> 아이템에 적용되는 속성 : flex-grow, flex-shrink, flex-basis, order, align-self (1) flex-direction, flex-wrap -> flex-flow- flex-direction은 기본값을 row로 가지며, 정렬 방향을 의미합니다. row-reverse, column, column-reverse가 있습니다.- fle..

01. 위치- position 속성의 경우, 기본값이 static으로 문서 흐름대로 배치하며, top,bottom 같은 요소의 위치를 조절하는 속성들이 작동하지 않습니다. top,right,bottom,left은 속성값으로 크기를 지정하면 됩니다.속성 값의미 및 설명static기본값. 문서 흐름대로 배치됨relative현재 위치 기준으로 조금 이동 가능absolute가장 가까운 position이 설정된 조상 기준으로 절대 위치로 지정fixed브라우저 창 기준으로 고정(스크롤해도 움직이지 않음)sticky스크롤에 따라 relative->fixed처럼 동작함(특정 위치에 고정됨) - z-index는 요소의 쌓임을 지정하는 속성으로 속성값으로 숫자를 작성합니다. 숫자가 클수록 앞에 표시됩니다. relative..

01. 박스 모델(Box Model)- 웹 페이지에서 모든 요소는 박스로 취급을 하며, 한 박스는 margin, border, padding, content의 4개의 영역으로 구성┌────────────────────────────┐│ margin │ ← 요소 바깥 공간 //시각적으로 나타낸 박스모델│ ┌──────────────────────┐ ││ │ border │ │ ← 테두리│ │ ┌────────────────┐ │ ││ │ │ padding │ │ │ ← 안쪽 여백│ │ │ ┌──────────┐ │ │ ││ │ │ │ content │ │ │ │ ← 실..

01. 레이아웃 태그- 레이아웃 태그는 웹 페이지의 구조를 정의하고 배치하는 데 중요한 역할을 합니다.태그 설명 ... 일반적인 블록 레벨 요소 (스타일링이나 레이아웃을 위해 사용) ... 콘텐츠의 의미 있는 구분 (주제별 섹션) ...  독립적인 콘텐츠 블록 (예: 블로그 글,  뉴스 기사) ... 본문과 간접적인 관련이 있는 보조 콘텐츠 ...  내비게이션 링크 그룹화 (탐색 메뉴) ...  페이지나 섹션의 머리글 (사이트 소개 등) ... 페이지나 섹션의 하단 (저작권 정보 등) 02. 텍스트 태그 - 텍스트 태그는 본문이나 제목, 링크 등과 관련된 텍스트의 구조나 서식을 정의하는데 사용됩니다.태그 설명 ~ ... ~  페이지나 섹션의 제목 (하위 숫자가 중요도 감소) ...  단락 (일반적인 ..

01. VS Code 기본코드 - 위의 코드는 VS Code 내에서 !(느낌표)+Enter를 눌러 Emmet Abbreviation 기능의 작동으로 생성되는 기본 코드입니다. Emmet은 HTML, CSS 코드를 빠르게 작성할 수 있도록 도와주는 코드 자동완성 도구로, 특정 명령어를 입력 후 Tab을 통해 확장할 수 있습니다. - : 표준 모드(Standard Mode)로 렌더링하기 위해 넣어주는 코드입니다. 표준 모드란 최신 웹 표준을 준수하는 모드이며, 호환성 모드(Quirks Mode)란 오래된 웹사이트와의 호환성을 위해 브라우저가 옛날 방식으로 HTML을 해석하는 모드입니다. - ... : HTML 문서에서 가장 상위에 있는 요소인 루트 요소입니다. HTML 요소에는 루트, 블록, 인라인 ..