반응형 웹 기초(3)

'유노코딩'님의 <입문자를 위한 반응형 웹 기초 강의>를 토대로 작성한 글입니다. 이 자리를 빌어서 양질의 강의 제공에 대한 감사의 인사를 전합니다.

모듈화 디자인

• 반응형 컴포넌트를 만들고 조립해 하나의 페이지를 만들면 자연스럽게 반응형 페이지가 된다.

• 스타일 재사용이 용이하다.

• 페이지의 일관성을 유지하기가 용이하다.

• 컴포넌트 별로 css파일이 각각 있다.(헤더, 네비바, 썸네일 등)

미니 프로젝트 - 유튜브 메인 화면

• 알게된 것(HTML5)

1. 시맨틱 태그: <header>, <nav>, <section>, <article>, <footer> 등. 이미 배워서 아는 내용이었지만 의미론적 마크업 정도로 이해했었고, 시맨틱 태그라는 용어도 들어보았는데 둘을 일치할 수 있었음.
   1. 클래스 명을 header__input--button와 같이 언더바와 하이픈을 개수에 구애받지 않고 자유롭게 이용할 수 있다.

• 알게된 것(CSS)

1. reset.css : 배웠던 내용이지만 실제로 쓰이는 것을 보게되어 한 번 더 머리 속에 새기고 싶어졌다. 기본 설정되어있는 각 태그의 css를 초기화 해주는 고마운 태그.
2. box-shadow: 0 0 3px #000; : 네이버 클론코딩 때는 뭣도 모르고 썼지만 오랜만에 다시 써보니 효과를 확실히 알겠는 태그.
3. z-index : 마찬가지.
4. 실전에서 rem 단위를 쓸 때, 소수점 첫째자리까지 쓰면 아주 유용하다. 당연한 것인데도 이전엔 엄두가 안 나던 것인데 애용해야겠다.
5. calc(100% - ?px) : 이것도 네이버 코딩에서 자주 썼는데 설명과 함께 쓰게 되니 아주 쉬운 내용임에도 알고 쓰는 것과 그렇지 않은 것은 아주 큰 차이가 있었다.

• 수강을 완료하며

1. 역사가 오래된 포털 사이트 같은 경우 범용성이 중시되기에 flex나 grid같은 개념이 쓰이진 않았지만, 역시 흐름은 flex, grid에 관한 내용을 확실히 알고는 있어야 한다는 점. flex까지는 많이 써보았지만 grid는 아직 생경하므로 이론 학습과 실습을 통해 내 것으로 만들어야 할 것이다.
2. 진행했었던 프로젝트의 반응형 웹 작업에서 어려운 점이 어느 정도 해소되었다.