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

CSS) z-index

z-index 속성은 요소가 쌓이는 순서를 지정한다. 낮은 값을 가진 요소가 밑에, 높은 값을 가진 요소가 위에 온다. 즉 서로 겹쳐있을 때 값이 낮은 요소는 값이 높은 요소에 가려지게 된다. 

• z-index의 기본값은 0이 아니라 auto이다.
• position의 속성이 absolute, relative, fixed, sticky일 때만 적용된다.
• 같은 depth을 가지는 요소끼리 비교된다.
• 자신의 z-index값보다 부모의 z-index값이 우선되는 기준이다.

참고 :

• http://dev.epiloum.net/904
• https://www.w3.org/TR/CSS2/visuren.html#z-index

JS) The Modulus Operator (%)

나머지 연산이란 어떤 한 수를 다른 한 수로 나눈 다음 그 나머지값을 구하는 계산법이다.

a modulo n (축약해서 a mod n, javascript에서는 a % n)에서 a는 나누어지는 수(피제수, dividend)고 n은 나누는 수(제수, divider)다. 즉 '5 % 2'의 결과는 1이고 '9 % 3'의 결과는 0이다.

정수의 나머지 연산에서 결과는 항상 0과 n-1 사이의 값이 된다(javascript의 경우 a가 양수일 경우에만 해당인듯?). a % 1의 값은 항상 0이다. 또한 a modulo 0의 값은 undefined이기 때문에 이러한 연산은 프로그래밍 언어에서 오류가 될 것이다. Javascript에서는 NaN(Not a Number)으로 처리된다.

a 또는 n이 음수인 경우는 프로그래밍 언어에 따라 처리하는 방식이 다르다. Javascript에서는 나머지 연산 결과값의 부호는 피제수의 부호를 따른다. 즉 피제수가 양수인 경우 결과값은 항상 양수, 피제수가 음수인 경우 결과값은 항상 음수가 된다.

공식은 피제수 = 몫 * 제수 + 나머지




참고 :

• https://en.wikipedia.org/wiki/Modulo_operation
• https://riptutorial.com/javascript/example/760/remainder---modulus----

CSS) Float Layout and Clear(clearfix)

float를 사용해서 레이아웃을 짜다보면 영역이 깨져서 요소의 위치가 뒤죽박죽이 되곤 한다. 그럴땐 float를 준 요소의 부모요소에 clear 속성을 부여해주면 해결된다. 이러한 기능의 클래스 이름을 보통 clearfix라고 쓰는 것 같다.


.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}

• ::before와 ::after는 해당 요소 안, 앞뒤로 가상의 영역을 만들어준다. 
• display: block과 content: ''는 가상의 영역을 실체로 만들어준다고 생각하면 될 것 같다. 
• clear: both는 해당 요소의 좌우에 다른 블록이 올 수 없게 하는 것. 

즉 clearfix는 영역의 위아래에 구분선을 그어주는 역할인 것 같다.

드롭다운 메뉴

..

CSS) position: absolute & position: relative

origin point