시작

CSS만 나오면 쭈구리가 되는 나. 익숙하지가 않아서 더 힘들다. 오늘 절실하게 느꼈는데 이전에 아예 HTML/CSS를 안한게 아닌데도 빈 화면에 무언가를 만들어야 된다는 공포감이 든다. 글쓰기를 시작하고 얼마 안됐을때 하얀 화면을 한시간동안 쳐다보고 있던 느낌처럼. 어떻게 풀어나갈지 깝깝한 느낌이다. 이럴때는 많이 하면 된다. 도구와 표현법이 익숙해지면 그 이후부터는 반복된다. 지금도 딱 이 부분이겠지. 많이 하자.

일단 레이아웃 짜는 연습을 꾸준히 하는게 어떨까? 하루에 페이지 하나씩 레이아웃만 짜는거다. 세세하게 꾸미기까지 하려면 코스트가 너무 많이 들어가니까 시작은 간단하게.

CSS 중급

• CSS의 기본적인 셀렉터 #와 .의 차이를 이해하고 있다.

• 절대 단위와 상대 단위를 구분할 수 있다.

• CSS 박스 모델에 대해 이해하고 있다.

• 박스 측정 기준(content-box, border-box) 두 가지의 차이를 이해하고 있다.

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.

  • 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.

• 레이아웃을 위한 HTML을 만들 수 있다.

  • Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
  • 방향: flex-direction
  • 얼마나 늘릴 것인가?: flex-grow
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

웹 화면 설계하기

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
• 와이어프레임만 보고 HTML로 코딩할 수 있다.
• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

여기 웹 화면 설계하기 부분에서 용기를 많이 얻었다. 내가 흰 화면 공포증을 해결했던 방법은 내가 쓰고 싶은 주제 3줄로 간략하게 쓰고 확장시켜나가는 방법을 쓴다. 그 부분에서 이 와이어프레임은 잘 맞는 느낌이라는 생각이 든다. 코드를 작성할 때도 노트에다가 대략적인 진행 방향을 적는걸 좋아하는데 그것과 닮았다.
특히 과정 중 소개된 figma라는 웹앱이 디자인도 톡톡 튀고 기능도 강력해서 자주 사용할 것 같다.

https://www.figma.com/