220329

🦐KEEP

• 그래, flex-flow라는 게 있었지
  • 반응형 웹 페이지 만들 때 flex box는 정말... 최고인 것 같다. 왜 안 될까 하고 키보드만 두드리다 문득 이럴 때 썼던 속성이 있었던 거 같은데... 하다가 결국 해냈다. 따봉 플렉스 플로우야, 고마워!
• 랜딩 페이지 만들고 강의 해설과 비교
  • 우여곡절 끝에 코딩애플 HTML, CSS 강의의 실습 과제인 랜딩 페이지를 만들었다. 육안으로는 거의 비슷하게 만든 후에 해설 코드와 비교했다.
  • 나는 div마다 margin을 적용했는데, 그럴 필요 없이 작은 div를 감싸는 전체 div 안에 padding을 적용하는 방법이 더 쉬워 보였다. 일일이 margin을 주면 스타일을 통일하기 어려우니 부모 요소에 padding을 적용하는 방법이 더 좋은 듯.
  • 텍스트에 적용할 수 있는 속성 중에 vertical-align이 있다는 것을 새삼 깨달았다. 다음에 꼭 써보도록.
  • 요소를 만들 때 class 하나에 모든 속성을 다 집어 넣지 말고, 뼈대와 다른 속성들을 분리하는 연습을 해보자. 뼈대는 같고 특성 속성만 다른 요소가 여러 개라면 코드의 유연성이 생길 듯.
  • box-sizing과 padding의 조합이 괜찮군.
  • z-index랑도 친해지자.

---

🦐PROBLEM

• CSS 지옥
  • 아직도 콘텐츠 가운데 정렬과 flex box가 어렵다. 이것저것 적용해서 원하는 결과가 나와도 이해하고 썼다기보다는 그냥 얻어 걸린 것 같아!

---

🦐TRY

• 그저 코드를 많이 짜고 많이 만들어 보는 수밖에
  • 포트폴리오에 들어갈 만큼 퀄리티가 높지 않더라도 일단 계속 만들어 봐야겠다. 만들다 보면 이해되겠지. 그럼그럼.
• 잊지 말자, 코드 짜기 전에 항상 콘티부터 짜자
  • 콘티 말고 다른 말이 있을 텐데 생각이 안 나니 대충 콘티라고 하자. 아무튼 HTML이든, CSS든, JS든 뭔가를 만들기 전에 한글로 과정을 먼저 적어보자. 글자 가운데 정렬, 폰트 사이즈 구분, 본문과 버튼 분리 등등. 그래야 코드가 길어져도 방황하지 않는다!