비전공자의 개발 도전기

Transform : 요소에 특정한 변형 효과를 제공                   요소를 2D또는 3D 공간에서 변형시키는데 사용                   주로 애니메이션과 인터랙티브 디자인에서 많이 사용 1. translate : X축과 Y축 방향으로 이동시키는데 사용 (기본적으로 X축은 오른쪽으로 Y축은 아래로 움직인다)                     -> 원래 위치를 기준으로 지정한 거리만큼 이동 가능                     + 2D 변형 : translate, 3D 변형 : translate3d or translatez.... translate(x, y): 요소를 X축과 Y축 방향으로 이동translateX(x): 요소를 X축 방향으로 이동translateY(y): 요..

Transition : 스타일 속성값 변경 ⏩ transition 단축 속성     - transition: property, duration, timing-function, delay;     - [전환 효과] [지속 시간] [진행 속도] [지연]     - [ex] .element {                                               ➡️      .elment {                    transition-property: width;                                  transition: width, 1s, ease-in, 0.3s;                   transition-duration: 1s;            ..

Animation :  transition(전환 효과)을 부드럽게 제어                   특정시점에 대한 설정값을 주어 연속되어 전환되도록 함 ⏩ @keyframes : 애니메이션이 지정되는 각 단계의 시점에 대한 설정값     - 이를 적용하려면 animation 속성을 사용해야함     - animation-name & animation-duration는 함께 사용     - 생김새        @keyframes animation-name{             from { 애니메이션의 시작 상태 }             to { 애니메이션의 끝 상태 }        ➡️ 'from' = 0%(애니메이션의 시작), 'to' = 100%(애니메이션의 끝)        + 애니메이션의 중..

FLEX LAYOUT을 만들기 위한 기본적인 HTML 구조 ➡️ 부모요소/ Flex Container        helloflex ➡️ 자식요소/ Flex Item.        abc        helloflex Flexd의 속성- 컨테이너에 적용하는 속성   * display: flex;      를 적용하는게 시작      이 한 줄 만으로 컨테이너 배치 시작          ➡️ item들은 가로 방향으로 배치, 내용물을 width 만큼만 차지, height는 컨테이너의 높이만큼 늘어남   * display: flex;       아이템 배치 보다는, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값- 아이템에 적용하는 속성 마저 정리하기

position : HTML 태그와 요소의 위치를 지정 position: static          속성을 별도 지정하지 않으면 기본값인 static 적용          HTML에 작성된 순서 그대로 화면에 표시          top, left, bottom, right, width, height 속성값➡️ position: static 일 땐 무시, 원래 위치의 상하좌우로 안움직인다.position: relative          요소를 원래 위치를 기준으로 상대적(relative)으로 배치          top, left, bottom, right, width, height 속성값 ➡️ 원래 위치의 상하좌우로 부터 얼마나 떨어지게 할지 지정position: absolute          배..

css/* 선택자 */- HTML 문서 전체 : * {~} - 태그/요소 : 특정 태그 {~} - id : #header{~}  /  id="header">    ➡️ #을 id로 받는다.  HTML 내에 id는 유일해야 해 - class : .header{~} / class="header">    ➡️ .을 class로 받는다. HTML 내에 재사용 가능 - 그룹 : ,를 이용해 단을 나누지 않고 한 번에 사용 가능    ➡️ h1 {} h2 {} h3 {} -> h1, h2, h3 {} - 복합    1. 일치선택자 : 조건을 만족해야 선택        선택자가 span.orange ➡️ 태그가 이면서 class="orange"를 가지고 있어야 적용           /* css */         ..