[POSCO x Codingon] position, display, animation | 웹개발자 풀스택 과정 12기 2주차 회고 1

 

1주차에 이어서 css를 배우는 중인데 엄청난 디자인적인 부분은 아니지만,

동적으로 화면을 변경하며 구현해보는 것이 매우 재미있다..!

 

실습도 가끔 생각지 못했던 방법도 있었지만, 대부분 배운 내용을 활용해서 구현할 수 있는 정도라

어렵지 않게 진행할 수 있었다.╰(*°▽°*)╯

 

 

 

2주차 회고를 시작해보려 한다.

 

이전과 마찬가지로 새롭게 알게된 내용과 중요한 내용 위주로 정리해보겠다.

 

 

2주차 회고

 

CSS에서 position, display, transform, transition, animation 등의 개념을 배웠으며, 이를 활용해 동적인 화면을 구현하는 실습 과제도 수행해볼 수 있었다.

 

 

---

 

 

1. position

: position은 필요한 순간에만 적절히 사용하는 것이 좋다고 한다..!

• static : 정적인 위치 지정
• relative : 요소 자신을 기준으로 상대적인 위치 지정
• absolute : position 속성을 갖는 부모 요소를 기준으로 위치 지정
• fixed : 뷰포트를 기준으로 위치 지정

 

position 속성과 z-index 속성을 활용하여 애벌레를 화면에 구현하는 실습도 진행했다.

 

=> 실습이 어렵지는 않았지만, z-index와 circle들의 위치를 세심하게 잡느라 시간이 좀 걸렸던 기억이 난다...!!

 

애벌레.html .css

 

먼저, html파일에 circle 여러개를 만들어 주고 잔디를 표현하기 위한 img도 같이 넣어주었다.

 

그리고 잊어서는 안되는..!!

css 링크를 걸어주었다. css를 적용하기 위해서는 link를 잊지 말고 꼭 적어주어야한다.

 

 

본격적으로 css를 적용해주기 시작했다.

 

position속성을 이용해 위치를 지정하기 위해 가장 큰 div 요소에 relative속성을 지정하고,

자식요소인 circle클래스에는 absolute 속성을 주어 모든 circle의 위치를 조정했다.

 

z-index 속성을 이용해 circle이 사용자에게 보여지는 순서도 조정하면서 배운 개념을 활용해볼 수 있었다. 

 

 

애벌레 결과물

 

 

---

 

 

2. display:flex

⭐⭐⭐⭐⭐ => 중요! 별 5개..!!!!!

 

프론트엔드 개발자를 꿈꾼다면 display:flex 개념은 매우 중요한 부분이라고 한다!!

나 역시도 프론트엔드에 더 관심을 두고 있는 상황이어서 수업을 더더더..!!!
열심히 들었고, 실습에서도 많이 사용해보려 노력했다.

중요한 개념인만큼 좀 더 세심하게 정리해보고 가겠다.

 

 

: 부모 요소에 대해 자식 요소가 수평으로 정렬

• flex-direction : 주 축 설정
  flex-direction: row, row-reverse; => 주축 - 가로방향

  flex-direction: column, column-reverse; => 주축 - 세로방향
• flex-wrap : 줄 바꿈 처리 => 자식 요소가 부모 요소의 크기를 벗어나는 경우, 자식 요소를 자동으로 줄바꿈 처리
      /* flex-wrap: nowrap; */ : 줄바꿈 x

      /* flex-wrap: wrap; */ : 줄바꿈

      /* flex-wrap: wrap-reverse; */ : 역방향으로 줄바꿈
• justify-content : 주 축에 대한 요소 배치 방법
      /* justify-content: flex-start; */

      /* justify-content: flex-end; */

      /* justify-content: space-between; */ : 처음, 끝 요소는 부모 끝에 붙이고, 나머지 요소 간격 동일하게

      /* justify-content: space-around; */ : 여백의 비율이 ex.1:2:2:2:1 양쪽 끝 간격이 얇음

      /* justify-content: space-evenly; */ : 여백의 비율이 ex.1:1:1:1:1 여백 간격 모두 동일
• align-items : 교차 축에 대한 요소 배치 방법
      /* align-items: flex-start; */

      /* align-items: flex-end; */

      /* align-items: center; */

      /* align-items: baseline; */
• align-content : 여러 행에 대한 정렬
      /* align-content: stretch; */

      /* align-content: flex-start; */

      /* align-content: flex-end; */

      /* align-content: center; */

 

여기까지가 display:flex와 같이 사용할 수 있는 속성들이다.

 

이를 활용해서 여러 종류의 header를 만드는 실습을 진행했는데,

특히 4번째 header의 경우는 구조를 고민하면서 css를 적용하려고 했던 것 같다.

 

 

=> 구조를 잡는 방법은 물론 여러가지이겠지만,

리더님의 방법도 궁금해서 4번째 header에 대한 풀이를 부탁드렸다..!

 

header 만들기 실습 결과

 

 

먼저 semantic한 구조를 위해 div태그만 사용하기 보다,

header태그, ul태그 등을 같이 사용해주었다.

 

css 코드에서 보일지는 모르겠지만,

최대한 공통이 되는 css는 한번에 정의하려 노력했다..!

 

 

실습을 하면서 내 코드에서 아쉬운 부분이 있었는데...

=> '필요하지 않은 클래스나 div를 좀 더 정리할 수 있지 않았을까?' 라는 생각이 들었다.

 

여러종류 header 만들기.html .css

 

 

 

또한, 내 코드는 4번째 header에서 왼쪽 영역의 logo, menu1,2,3을 모두 하나의 div로 묶었는데,

 

=> 리더님은 logo는 기능을 따로 생각해서 다른 영역으로 묶어서 진행하셨다.

(생각해보지 못해서 새로운 깨달음을 얻었달까...?👍 확실히 프론트엔드는 구조의 구성이 중요한 것 같다.)

 

 

728x90

 

---

 

 

3. animation

: CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능이다.

 

다음과 같이 keyframes로 설정된다.

@keyframes bounce1 {

    to {

        top: 50px;

    }

    from {

        top: 300px;

    }

}

 

 

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

 

애니메이션을 지정할 때 사용하는 속성들이다.

 

애니메이션 속성을 활용하여 글자가 들어오는 효과를 적용해보았다.

이 과정에서 글자가 들어오는 것까지는 표현했으나, 글자들이 각각 다르게 들어오는 것을 어떻게 표현해야할지 모르겠어서 리더님께 질문을 드렸다.

=> 리더님께서 width를 조정해보는 것이 좋겠다는 힌트를 주셨다!!

 

div {

    position: relative;

    animation-name: text;

    animation-duration: 3s;

    animation-timing-function: ease-in;

}

@keyframes text {

    to {

        left: 0;

        width: 100%;

    }

    from {

        left: 100%;

        width: 300%;

    }

}

 

 

그렇게 완성한 결과물이다.

 

글자에 애니메이션 적용하기

 

 

---

 

 

마지막으로 애니메이션을 이용한 실습 중 하나는 과제로 집에서 시도해보았다.

=> 애니메이션 동작이 많아서 조금 복잡한 동적 화면을 표현하는 것이었다.

 

 

애니메이션 동작들 중 해와 달이 번갈아 가면서 회전하는 동작을 표현하는 게 가장 힘들었던 것 같다.

어느 부분에 효과를 주고 없애고 조정을 해야할지 생각할 게 조금 많았다.

 

처음에는 반대로 돌아가기도 했고, 갑자기 빠르게 돌아가기도 했고.....뭔가 이슈가 많았다...

 

그래도 포기하지 않고 페이지를 실시간으로 확인하며 코드를 수정해서 결국엔 완성해낼 수 있었다.

=> 생각보다 이 과정이 매우 재미있었다.

 

애니메이션 실습.css

 

 

css 코드는 위와 같이 작성하였고, 결과물도 영상으로 첨부하겠다.

 

 

애니메이션 실습

 

 

 

---

 

 

 

이렇게 해서 1주차에 이어 HTML부터 CSS까지 배울 수 있었다.
열심히 수업해주시고 실습도 도와주신 '션 리더님' 감사합니다❤️

기본적으로 display 속성에 대해 알고는 있었지만 디테일하게 개념을 학습하고, 실습까지 여러 종류의 방법으로 경험해볼 수 있어서 매우 좋았다.
특히 display:flex 속성은 중요하다고 하니 연습을 계속해서 해봐야할 것 같다. 아직까지 헷갈리는 속성들이 있어서 css를 적용할 때 사용할 수 있는지 계속 생각하면서 적절히 사용하려 해야겠다.

display 속성까지는 무리없이 잘 따라갔는데, 애니메이션 속성을 거의 처음 사용해봐서 중간에 시간이 오래걸리는 부분도 꽤 있었다. 그래서 모르는 내용은 리더님께 질문드리고 해결하려 했고, 적용되는 과정을 이해하려고 여러 방법으로 바꿔보면서 실행을 확인하기도 했다.
이런 과정이 2주차 현재까지의 수업에서 가장 재미있었고 결과가 제대로 실행이 되었을 때 느끼는 뿌듯함이 컸다.

앞으로의 수업에서도 계속해서 스스로 확인하고 변경해보고 연습해나가야 성장할 수 있겠다는 생각이 들었다.
남은 기간의 수업도 열심히 참여해서 계속해서 성장해나가고 싶다.