NomadCoders Kakao Clone #1 HTML

노마드코더 카카오톡 클론코딩 실습편 결제. 이론+실습 번들은 $90이고 따로 구매하면 각각 $50씩 해서 현재 환율로 6만원 정도. 비싸다..ㅠㅠ

수업노트

• Visual Studio Code (Editor)

원래 생활코딩에서 쓰는 Atom을 썼었는데 니콜라스가 요즘은 Atom보다 VSCode라고 해서 따라 받아봤다. 초보라 세세한건 잘 모르겠지만 화면도 더 깔끔하고 눈이 덜 피로해서 이걸로 바꿔타기로 했다.

• Prittier (VSCode Extension)

코드를 '더 예쁘게' 정돈해주는 확장기능. 정말 편하다. 저장할 때마다 정돈 기능이 실행되게 하려면 따로 설정을 해줘야하는데 노마드코더의 가이드영상을 보고 따라하면 된다.
대충 써도 알아서 잘 정돈해주지만 라인을 구분하는 정도는 해주는게 좋다. 코드를 그냥 한줄에 쭉 적은뒤 저장하면 종종 태그를 쪼개서 줄을 나눠버린다. 예를들면 </a>를 한꺼번에 다음줄로 넘겨야 하는데 앞 꺽쇄는 놔두고 /a>만 넘기는 식.

• Font Awesome

아이콘을 무료로 사용할 수 있다. 물론 유료회원은 더 많은 아이콘을 쓸 수 있다. 이미지를 다운받지 않아도 링크를 걸어 사용 가능하고 사이즈도 자유롭게 조절 가능하다.

• <i> 

본래는 italic의 의미로 기울어진 글씨를 표현하는 태그였지만 최근 HTML 태그의 이름을 기능이 아닌 의미를 나타내는 방향으로 가면서 현재는 icon의 의미로 많이 사용되고 있다. 기존의 italic 기능도 여전히 가지고 있다.

• <main> 

디자인 측면에서 메인이 되는 부분. 한 페이지에 <main>은 하나만 올 수 있다. 문서의 주요 기능이 검색 폼이 아닌 이상 사이드바, 네비게이션, 저작권정보와 같이 모든 문서에 반복적으로 있는 컨텐츠는 포함하지 않아야 한다. 참고.

• <header>

한 페이지에 여러개의 <header>를 사용할 수 있다. 단 <header>, <address>, <footer>의 후손으로 올 순 없다.

• Naming

파일명, 포맷명, 폴더명은 소문자로 써야 한다고. 구체적인 이유는 모르겠지만 아무튼 많은 문제를 예방해준다고 한다고 하니 그렇게 하기로.

니콜라스는 모종의 규칙대로 클래스 이름을 짓는데 이게 생각보다 많은 도움이 될 것 같다. 그동안 나름대로 머리를 굴려서 클래스 이름을 지어왔지만 항상 불만족스러웠고 더 체계적인 규칙이 있었으면 좋겠다고 생각했기 때문. CSS 파트를 들어가면 더 장점이 돋보일것 같다.