[멘토링] 웹 프론트엔드 기초 스터디 (CSS)

들어가기 전에

• 프론트엔드장으로 활동하고 있는 소프트웨어학부의 앱/웹 개발 동아리 APPS에서 신입부원을 대상으로 웹 프론트엔드 기초 스터디 진행을 진행한다.
• 다른 운영진들과 HTML, CSS, JavaScript를 나눠서 스터디를 진행하게 되어있는데, 그 중 나는 CSS 파트를 담당하였다.
• 해당 주차에 발표를 담당하는 사람이 신입부원(16명)을 대상으로 과제를 제공하고, 코드 리뷰를 통해 피드백을 제공하는 형식으로 진행된다.

---

어떤 내용으로 진행하였는가

1) 스터디 내용

• CSS 기본 개념 익히기

  • 선언 형태

    

  • CSS를 적용하는 3가지 방법

    • 인라인 스타일링

    • 내부 스타일 시트(Internal style sheet)

    • 외부 스타일 시트(*.css) → 가장 선호되는 방식

      

• CSS 박스 모델 및 주요 속성

  • padding, border, margin
  • 블록요소, 인라인 소요
  • Property
    • width & height, display, font-family 등
  • 표현 단위
    • px, vw, vh, % 등

• CSS 선택자 속성

  • 기본 선택자(Selectors)
    • 전체 선택자, 유형/태그 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자
  • 복합 선택자(Combinator)

    • 일치 선택자, 자식 선택자, 하위(후손) 선택자, 인접 형제 선택자, 일반 형제 선택자

      

• CSS 요소 배치하기 - Position 속성

  • fixed, absolute, relative 등

2) 실습

3) 과제 안내

• 방식

  • 이미지와 일부 소스코드를 제공하고, 주요 속성 코드를 작성해보는 방식으로 진행하였다.
  • CSS를 처음 다뤄보는 사람에게는 어려운 과제이지만, 꼭 알아야하는 부분 위주로 실습할 수 있도록 하였다.

• 요구사항

  

• 구현 화면

  

4) 코드 리뷰

• 16명 신입부원의 코드를 리뷰하게 되었는데, 모두의 코드가 가지각색이라 리뷰한는데 시간이 꽤나 걸렸지만, 문제를 찾아가는 과정에서 CSS 속성에 대한 이해가 더 생겼다.

• 코드 리뷰 했던 부분 일부 발췌

  

  

  

  

---

마치며

오늘 스터디 발표를 위해 무려 9시간 동안 CSS 강의를 들었다. 그만큼 CSS라는 바다는 넓고 깊었다. 그래서 한 시간 안에 CSS 전반을 다루기란 쉽지 않았고, 중요한 내용을 최대한 담으려 하다 보니 슬라이드가 무려 53페이지나 되었다.

또한 16명의 신입 부원 코드를 리뷰하게 되었는데, 각자의 코드가 모두 달라 리뷰와 수정을 반복하는 데 많은 시간이 걸렸다. 하지만 다른 이들의 코드에서 문제와 원인을 찾아가는 과정에서 나 역시 CSS 속성과 디버깅에 대한 이해를 한층 더 깊게 할 수 있었다. 이 경험을 통해 더 나은 코드 리뷰를 위해 클린 코드에 대한 관심이 생겼고, 관련 스터디를 해보고 싶어졌다.

많은 사람들의 코드를 한꺼번에 보는 것은 처음이었는데, 리뷰에 쏟은 시간만큼 얻어가는 것도 많은 시간이였다 🙌