NomadCoders Kakao Clone #2 CSS

수업노트

• Reset CSS

각 HTML 요소들은 기본적으로 스타일을 가지고 있다. 브라우저마다 기본값이 다르기도 하기 때문에 reset.css를 쓰는게 좋은 선택. 사람들이 만들어놓은 것을 복사해서 쓰면 된다. 비슷하게 normalize.css도 있다. reset은 기본값을 0으로 만들어 준다면 normalize는 모든 브라우저에서 공통적인 기본값을 만들어주는 것.

• Never Use Pure Black

0% 밝기의 검정색 폰트는 눈을 피로하게 만든다. 100% 밝기의 흰 배경과 함께 쓰이면 더더욱. 폰트와 배경색이 반대여도 마찬가지. 너무 강한 대비는 눈을 피로하게 만든다.

• Class

니코는 클래스를 엄청나게 많이 사용한다. 나는 최대한 안쓰는게 좋은줄 알았다. 생각해보면 아무도 그렇게 말한 적은 없었지만 중복은 좋지 못하다는 얘기 때문에 그렇게 생각한 것 같다. 또 니코는 스타일시트를 작게 나누는데, 관리하기에 좋은 것 같다. column이라는 네이밍도 마음에 든다.

• Display: flex   

display: flex;
justify-content: space-between;

align-items: center; (line-height로 했었는데..<<쓰긴씀)(default: stretch)

flex-direction: column;
#2.9에서 flex 두번 적용한거
justift-content: space-around

가운데정렬..
display: flex; justify-content: center; align-items: center; (flex container이 가질 수 있는 속성)

align-self: flex-start;
align-self: flex-end;
참고

• cursor: pointer

• color: inherit (정말 간단한데 몰랐던거!)

• box-sizing: border-box

width 100%가 항상 100% 값은 아님. box-sizing이 기본값으로 되어있고 패딩을 추가했다면 100%값+패딩값이 됨

• Google Fonts

customize해서 필요한것만 가져오면 로딩을 최대한 빠르게 만들 수 있다. fontweight 등 설정할때는 import한 값 참고.

• position: fixed (sticky element)

width를 설정해줘야 한다. (다른것들과 분리돼서(absolute하게) 위치하기 때문의 자신만의 크기값을 갖는게 필요하다는듯. height는 내용에 따라 정해질거고)

• .class1.class2

class1과 class2를 둘다 가진 요소에 적용

• CSS 명명규칙 (참고)

solid class name ?
(airbnb design system - ui module)

• 가운데정렬(이게뭐지?)

margin: 0 auto;
left: 0;
right: 0;

• box-shadow

• input: focus {outline: none;}

• subtle patterns

• min-height : 100vh;

• uigradients.com

background-image: linear-gradient(to right, color1, color2);

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 파트를 들어가면 더 장점이 돋보일것 같다.