4일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL

서론

4일차가 시작되었다

4일차 pt.1 - 특강 시간이다.

참고로 pt.1은 특강 시간의 내용, pt.2는 강의 시간의 내용이다.

 

프로그래머스 데브코스에서 뭘 특강 할 것인지가 좀 궁금한데, 일단 듣자 하니 HTML과 관련된 특강이라고 한다. 아마 HTML 강의가 끝나면서 하는 모양이다. 그래도 지금까지 배운 걸 실전형에 맞춘다는 걸 보면 꽤 흥미로워 보인다. 프로그래머스 측에서 제공해주는 약간 꿀팁 위주의 강의로 보인다.

 

특강을 진행하시는 분은, 프로그래머스 클라우딩 어플리케이션 엔지니어링 데브코스(프로그래머스 클라우딩 웹앱 데브코스) 강사를 맡고 계신 김태영 강사님이다.

 

이번 일차는 HTML 특강 및 CSS이다.

 

스크린샷을 보며 화면 설계하기

1. body 태그 내부에 main, header, nav, div, section을 사용함으로써 설계.
2. 수치적인 정보 제공 목적으로 dt, dd는 잘 사용 안 함.
3. 최상단 제목이 h1 태그.
4. 그 아래의 섹션의 제목들은 h2 이하의 태그들이 달린다.
5. 검색창은 form 태그를 사용하는 것이 좋다.
   검색엔진이나 접근성 기기들이 구분을 잘할 수 있다. 당연하게도 검색 버튼은 버튼 태그의 submit 타입이 좋다.
6. footer에도 h 태그가 들어가야 한다. 즉, 사측 로고 같은 곳에 들어가는 것 같다.
7. 태그 입력/표시 공간에는 aside를 사용해도 된다.

 

문서화 구조가 뭘까?

1. h 태그가 포함된 내용은 대체로 아티클이다.
2. 사이드에 있는 바는 aside 태그를 사용한다.
3. 이러한 aside에는 필연적으로 카테고리 목록이나 메뉴 목록 같은 것이 나온다.
4. 해당 목록을 묶어서 나타내는 최상위 표시는 h 태그를 달아주는 것이 좋다.
5. 크롬 확장프로그램, 'HTML outliner'를 사용하면 페이지의 구조 개념을 빠르게 파악할 수 있다.
   다르게 말하자면 내가 만든 페이지가 SEO에 적합한 구조인지 파악하는 데 사용할 수도 있다.
6. 실무에서도 실수하는 점인데, h 태그가 낮아질수록 작아지니까 이를 이용해 작은 글자라고 낮은 h 태그를 다는 경우가 있다.
   즉, h1->h2->h3...의 순서를 무시하고, 글자 크기 기준만으로 판단해서 h1->h2->h5 같은 실수를 하는 경우가 있다.
   이런 경우 검색 엔진의 순위로 작용하는 SEO 점수에서 손해를 보게 된다.
7. 제목을 나타낼 때 h 태그 대신 strong 태그를 사용할 수도 있다.
   어쨌거나 속성을 조절하면 비슷하게 구현 가능하고, strong에도 강조 표현이 달려 있기 때문이다.
8. 개발자 도구의 Lighthouse나, 별도의 툴을 사용하면 SEO 점수를 대략적으로 짐작할 수 있다.
9. section 태그는 구역을 나누는 태그. (비슷한 거로 div가 있는데, 별 의미가 없음.)
   div와 다르게 h 태그를 가져야 함.
10. article 태그는 독립적인 내용을 나누는 태그.
    div와 다르게 h 태그를 마찬가지로 가져야 함.
11. article이 신문 내의 자잘한 기사(기사 제목, 기자 이름, 기자 이메일 등)를 뜻하면, section은 주제별 기사를 모아둔 영역을 뜻한다.

 

알아주면 좋은 것

1. 디비티스(divitis)를 조심하자.
   디비티스는 초보 개발자들이 div를 너무 많이 쓰는 것을 뜻한다.
   div를 많이 쓰는 건 좋지 않다. 애당초 의미도 없고 구분용 태그에 불과하기 때문이다.
2. 젠코딩(zencoding) 기법은 유용하다.
   HTML&CSS를 빠르게 만들고 스타일링할 수 있게 해주는 기법이다.
   빠르게 프로토 타이핑할 수 있다. 물론 가독성을 그리 좋지 않다.
3. MDN 사이트는 신이고 무적이다.
   그리드 부분이 특히 많이 헷갈리는데 그리드 항목을 많이 보도록 하자.
4. 추천 확장 프로그램
   HTML5 Outliner
   Perfect Pixel
   Wappalyzer
5. CSS 공부 사이트
   Flexbox Froggy

 

사족

진짜로 없다.

내용도 다수 빼먹고, 이런저런 걸 요약하기는 했지만, 대략적으로는 저런 내용들이었던 거로 기억하고 있다. 추후 까먹거나 놓친 중요 부분이 있다면 따로 보강하던지 하겠다.

 

그리고 이걸 제외하면 이번 화의 사족은 없다. 본격적인 서론과 사족은 pt.2에 적도록 하겠다.