CSS 기초 이론, 레이아웃 정리, 색깔 코드 사이트, Emmet 사용법

CSS 복습을 다시해보려고 한다. 이번에는 생활코딩이 아닌 '드림코딩엘리' 유튜브 채널에서 공부를 하였다. 이 강의를 보고나니 생활코딩의 강의는 너무 오래됐다는 것을 알게되었다. 오래된 강의를 보고 어려운 방법으로 어렵게 개발하는 것은 좋지 않다고 생각한다. IT 쪽은 매년 많은 업데이트가 일어나는데 구식에 얽매여있기 보다는 좋은 기능을 유용하게 쓰는 현명한 사람이 되자.

출처: https://www.webtips.dev/10-best-practices-for-quickly-improving-your-css

CSS 기초이론

• padding은 안 쪽 여백 / border는 테두리 / margin은 바깥 쪽 여백 이다. 
• padding: (top, bottom,) (right, left) 순으로 적는데 생략해서 쓰려면 ( ) 는 세트로 생각하며 된다.
• padding: 20px 0px; 이렇게 하면 (위 아래)는 20px (양옆)은 0px 이렇게 된다.
• border-width, border-style 이렇게 일일이 타이핑 하기보다는
• border: 2px soild red; 이렇게 width, style, color를 한 번에 넣고 쓰면 좋다.
• 반응형 웹사이트를 만들 때는 px보다는 Flex grid, Flex box, % ,vw, vh 를 쓰는 것이 좋다.

100% vs 100vh 

%의 뜻은 그 class에 들어있는 부모의 높이의 100%를 채우겠다는 말이다. 반면, 100vh는 body나 부모와는 상관없이 아이템이 보이는 Viewpoint에 100%를 다 쓰겠다고 하는 것이다. Viewpoint의 80%를 쓰겠다하면 80vh이다. vh는 ViewpointHeight 의 줄임말이다.

CSS 레이아웃 정리

Display 3가지

• inline은 ITEM으로 생각하며, 존재하는 컨텐츠의 양에 따라 크기가 바뀐다. 한 줄에 여러개가 진열 될 수 있는 물건. 
• inline-block은 BOX인데 한 줄에 여러개가 진열 될 수 있는 특별한 상자.
• block은 BOX인데 1줄당 하나씩 들어가는 상자.

Position 5가지

• static : 기본 위치
• relative : static 위치에서 이동 / 원래 있어야 하는 위치에서 상대적으로 이동한다.
• absolute : 가까운 위치에 있는 부모 상자 위치에 배치된다. 이 때 부모는 속성에 static이 아닌
  [relateive, absolute, fixed] 를 써주어야 하며, 아닐 시 부모밖으로 나가버린다. 아이템이 담겨있는 상자 안에서 위치가 변한다
• fixed : 상자를 벗어나 윈도우 내부에서 위치가 바뀐다. (페이지상에서 이동되는 것)
• sticky : 윈도우 상에서 static위치를 계속 고수한다. 스크롤링이 되어도 고정된다.

예전에는 jQuery와 Bootstrap을 많이 사용했는데 이는 브라우저 자체에서도 제공되는 api가 많이 빈약해서 그랬다. 하지만 요즘은 새로운 기능이 많이 나와서 이 둘은 예전보다 필요하지 않게 되었다. 고로 배울 때는 요즘에 많잉 쓰이는 최신의 것들을 쓰고 발전하며 성장하는 개발자가 되어라.

CSS 참고할 사이트 

1. 레이아웃과 블럭 참고사이트

Layout and the containing block - CSS: Cascading Style Sheets | MDN

2. CSS Selector

CSS selectors - CSS: Cascading Style Sheets | MDN

3. CSS Reference

CSS reference - CSS: Cascading Style Sheets | MDN

4. CSS 속성 목록

CSS Properties Reference - CSS: Cascading Style Sheets | MDN

Emmet 사용법

div.container>div.item.item${$}*10

div 태그의 class는 container이고, 이 contianer 안에 또 다른 div.item을 만들건데, class는 item이라고 전부 지정하고, 각 item마다 별도의 고유번호를 $로 지정할 것이다 라는 뜻이다. 그 안에 텍스트{ }도 번호를 자동으로 지정하고 싶으면 {$}이렇게 쓸 수 있다. 이것을 * 10번 지정한다.

div.container>div.item.item${$}*10
하고 tab을 누르면 밑에 처럼 뜬다.

<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
</div>

더 많은 Emmet은 여기서 확인할 수 있다.

Cheat Sheet

CSS 유용한 사이트 목록 

1. JS Bin - HTML, CSS, JavaScript 다운로드 없는 실습사이트 

JS Bin

2. Color Tool - 다양한 팔레트 색깔코드들을 찾고 싶을 때 이용하는 사이트이다. 여기서 색깔코드를 찾고 복사해서 코드에 넣으면 된다.

Color Tool - Material Design

3. CSS 연습할 수 있는 사이트

CSS Diner

총 32 가지의 css 기본을 연습할 수 있고, 답지는 클릭하면 볼 수 있다. 다 외우는 것보다는 필요할 때 찾아보는 식으로 하는 게 좋다.

1. A
2. A
3. #id
4. A  B
5. #id  A
6. .classname
7. A.className
8. Put your back into it!
9. A, B
10. *
11. 1A  *
12. 1A + B
13. 1A ~ B
14. A > B 
15. :first-child
16. :only-child
17. :last-child
18. :nth-child(A)
19. :nth-last-child(A)
20. :first-of-type
21. :nth-of-type(A)
22. :nth-of-type(An+B)
23. :only-of-type
24. :last-of-type
25. :empty
26. :not(X)
27. [attribute]
28. A[attribute]
29. [attribute="value"]
30. [attribute^="value"]
31. [attribute$="value"]
32. [attribute*="value"]

01 plate
02 bento
03 #fancy
04 plate apple
05 plate#fancy pickle
06 .small
07 orange.small
08 bento orange.small
09 plate, bento
10 *
11 plate *
12 plate + apple
13 bento ~ pickle
14 plate > apple
15 plate orange:first-child
16 plate apple:only-child, plate pickle:only-child
17 #fancy apple, pickle:last-child
18 plate:nth-child(3)
19 bento:nth-last-child(3)
20 apple:first-of-type
21 plate:nth-of-type(even), plate:nth-of-type(2n)
22 plate:nth-of-type(2n+3)
23 plate apple:only-of-type
24 orange:last-of-type, apple:last-of-type
25 bento:empty
26 apple:not(.small)
27 [for]
28 plate[for]
29 [for='Vitaly']
30 [for^='Sa']
31 [for$='ato']
32 [for*='obb']