20210226 HTML5/CSS3에 푹 빠진 여섯번째 주

2021-02-26 19:51:07

파이썬을 마친 아쉬움이 가시기도 전에, HTML과 CSS를 빡세게 배웠다. 이틀에 한 번 4시간 들으며 개인적으로 공부하는 시간이 많았던 파이썬과는 달리 매일 6시간을 듣다보니 복습할 시간도 부족하긴 했지만 재밌고 많은 정보들을 얻을 수 있었다.

배운 것들

HTML와 CSS의 역할과 역사(XHTML-HTML4.0-HTML5, CSS의 모듈별 업데이트 현황 등)
구조(mark-up)와 표현(CSS)을 구분하여 가져가야 하는 이유
웹 접근성의 의의와 실현 방법(a11y-hidden 숨김콘텐츠 처리, ARIA 방법론 등)
웹표준의 의미와 이를 준수하는 것의 중요성, 한국의 웹표준 준수 현황 등
다양한 HTML 태그들과 CSS 속성 활용법
- semantic markup을 위해 header, nav, main, section, article, footer 등을 기능에 맞게 사용하는 방법
- 기본적인 CSS 속성들 및 배치(position주기, float, flex 등), 구조선택자(nth child), 디자인 측면에서의 CSS속성의 특징(line-height나 vertical-align issue로 인한 미세한 배치 차이)
- normalizer와 web font, 특수기호 import 하는 법
- 숨김콘텐츠와 리셋리스트로 특정 선택자들을 처리하는 법
그 외 개발자로서 가져야할 mindset을 애정어린 조언을 통해 배울 수 있었다.

mark-up 설계와 styling을 학습예제를 통해 실습해보았다.
- 논리적 분석: 시안의 layout 흘러가는 방향대로 디자인적 접근하기보다는 논리적 접근을 통해 mark-up을 설계할 것 (전체 배치는 3단 header(nav포함)-main-footer 또는 4단 header-nav-main-footer으로 짜고, 그 외 파트를 추가)
- semantic-mark-up: 전체 설계 및 각 component를 semantic mark-up으로 설계한다.
- class naming: styling 줄 때 사용할 적절한 class name을 부여한다.
다양한 게임과 예제를 통해 CSS 속성 활용법을 배웠다.
- CSS Tricks
- Flex Froggy

TIL에도 썼지만, 웹표준을 준수하며 웹접근성을 고려하여 마크업을 설계하고 코드를 짜는 것이 얼마나 중요한지를 배우면서 동시에 이게 얼마나 개발역량을 향상시킬지 깊이 느꼈다.
구조와 표현을 분리시키는 등 근거 있는 코드를 짜되, 디자이너와 기획자와의 유연하게 소통하는 것의 중요성도 배웠다. 앞으로 내 개발 철학으로 갖고 가기로 혼자 결심.
파이썬 수업도 너무 좋았는데 파이썬의 울군 선생님이 데레사 선생님의 강의를 진심으로 추천하시길래 기대를 했었다. 근데 기대와 상상을 뛰어넘는 명불허전의 수업이었다. 수업내용 뿐 아니라 수강생의 눈높이와 수준을 고려하며 짜는 강의와 전달력 덕분에 매일매일 강행군이었지만 정말 좋았다.
매일 복습에 허덕여서 심신이 지치긴 했다는 단점은 있지만 늘어졌다면 더 안좋았을 것 같다. 몰아친 덕에 조금이라도 더 부지런히 공부할 수 있었다. 연휴가 있어서 정말 다행이다.

문정동에서 코딩하는 하나나입니다.