[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고(2) | CSS

1. 이번 목표:
   position과 transform, transition, flex, animation에 대해 알아보자!

 

2. 배운 내용 요약

1. position 속성

static	기준 없음 (기본값)
relative	요소 자신을 기준으로 배치
absolute	부모 요소를 기준으로 배치
fixed	뷰포트 기준으로 배치
stickey	스크롤 영역 기준으로 배치

 

1-1. Top, Bottom, Left, Right 속성

• top : 요소의 position 기준에 맞는 위쪽에서의 위치를 설정
• bottom : 요소의 position 기준에 맞는 아래쪽에서의 위치를 설정
• left : 요소의 position 기준에 맞는 왼쪽에서의 위치를 설정
• right : 요소의 position 기준에 맞는 오른쪽에서의 위치를 설정

1-2. relative

 

 

1-3. absolute

   요소를 일반적인 문서 흐름에서 제거한다.
   가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

• 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
• 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)

 

 

 

 

 

1-4. fixed

   뷰포트를 기준점으로 삼으려면 fixed를 사용한다.

• 요소를 일반적인 문서 흐름에서 제거한다.
  페이지 레이아웃에 어떠한 공간도 배정하지 않는다.
• 뷰포트( 브라우저)를 기준으로 배치한다.

 

 

1-5. z-index

요소의 우선도(숫자가 높을수록 앞에 위치하게 된다)

 

 

- 요소의 display 변경

   position속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 block로 변경된다.

 

2. display 속성

요소를 화면에 출력할 때 레이아웃을 결정하는 특성

• block: 가로 영역 모두를 차지하고 항상 줄 바꿈이 된다. 크기나 여백 등을 지정할 수 있다. (상자)
• inline: 문장의 크기, 길이만큼  크기가 지정됨. 크기 여백 등을 지정할 수 없다. (글자)
• inline-block: inline처럼 줄바꿈이 되지 않지만 블록 요소처럼 크기나 여백을 지정할 수 있다.
• flex: 아이템들의 1차원 배치
• grid: 아이템의 2차원 배치 방식. column과 row의 비율이나 크기를 지정한다.
• none: 영역을 차지하지 않고 요소를 렌더링하지 않는다.
• table, table-row, table-cell ...

 

3. Transform

특정 요소에 대해 회전이나 크기 변경 등 동작을 하게 하는 이벤트

• scale(width, height) - 크기조정. 기존 크기는 1, 1.5나 0.8 등으로 크기를 크게 하거나 줄일 수 있다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0.8, 1.5);
}

 

• rotate(deg) - 회전. 회전시킬 각도를 인자로 적는다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(30deg);
}

 

• skew(x축, y축) - 비틀기. x축, y축으로 비틀 각도를 deg로 적는다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skew(20deg, 30deg);
}

 

• translate(가로, 세로) - 이동. 가로, 세로 입력값만큼 이동한다.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(30px, -20px);
}

 

 

4. Transition

hover와 click같이 요소에 이벤트가 동작하면 실행되는 이벤트

.box {
  /* 효과를 적용하고자 하는 css속성 */
  transition-property: width;
  
  /* 효과가 나타나는데 걸리는 시간 */
  transition-duration: 3s;
  
  /* 효과의 속도, linear(일정한 속도)*/
  transition-timing-function: linear;

  /* 특정 조건. 2s는 2초 후 발동된다. */
  transition-delay: 2s;
}

/* 위의 코드를 한번에 나열할 수 있다. */
.box {
  transition: width 3s linear 2s;
}​

/* 특정 이벤트가 있을 때 동작하므로 특정 이벤트시 변경되는 것을 적어준다. */
.box:hover {
  width: 200px;
}

 

5. Animation

@keyframes를 통해 애니메이션 특정 지점마다 CSS 속성값을 지정해서 세밀하게 애니메이션을 조절할 수 있다.
CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능.
키프레임을 변수에 선언하고 해당 변수를 CSS에서 불러와서 사용 가능.

• animation-name (이름)
• animation-duration (지속시간)
• animation-delay (지연시간)
• animation-iteration-count (반복횟수)
• animation-timing-function (반복형태)
• animation-direction (애니메이션 방향)

.box {
    /* transition의 특성과 같다. */
    animation-name: colorChange;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 2s;

    /* animation 지속 횟수 */
    animation-iteration-count: infinite;

    animation-direction: alternate;
    /* alternate = from => to => from
       normal = from => to, form => to
       reverse: to => from, to => from
    */
}

@keyframes changeColor {
    from {
       background-color: red;
    }
    to {
       background-color: green;
    }
}


/* 한 줄로 단축하여 사용 가능 */
.box {
	animation: colorChange 4s linear 2s infinite alternate;
}

 

3. 회고

수요일과 금요일에 몸이 좋지 않아서 학원을 나가지 못했다. 그나마 다행이었던 점은 아직 CSS 진도를 나가고 있었기에 놓친 수업 내용을 빠르게 따라잡을 수 있었다. 실습과 과제를 하며 오랜만에 애니메이션 효과를 지정하기도 하고 여러 transform을 써보면서 다시 한 번 CSS를 익힐 수 있었다. 최근 혼자 공부할 때는 tailwindCss를 사용했는데 그거에만 익숙해져서인지 정통(?) CSS를 써보니 반갑기도 한데 살짝 멀어진 어색한 사이같이 느껴지기도 했다. 

 

역시 제일 기본기를 잘 닦아야 나중에 다른 새로운 지식들이 쌓일 때 헤매지 않는 것 같다. 수년간 써왔던 HTML, CSS일지라도 자만하지 말고 처음 배울때의 자세로 열심히 배워야지.

 

학원 꾸준히 잘 다니는 성실함도 실력이다. 체력관리던 몸관리던 열심히 해서 앞으로는 수업을 빠지지 않도록 노력해야겠다.