노마드 코더 - 코코아톡 클론코딩 정리(2)

LEARNING CSS

 

선택자{속성 이름:속성 값;}

 

속성은 띄어 쓸 수 없다.(-를 사용한다.)

 

'*'은 '전체 선택자'를 뜻하며, css에서 전체 요소에 어떤 속성을 적용하려면 *{ }처럼 사용할 수 있다.

 

여러 div를 생성했을 때 'id'를 이용하여 div들을 구분할 수 있고, 각각 다른 속성을 적용시킬 수 있다. 

css로 first div에 속성을 적용시킬 땐, #first { }라고 입력하며, 이는 body나 span등에서도 마찬가지다.

css코드의 id명은 html 코드에서 썼던 id명과 같아야 한다.

 

class는 여러 개의 속성들이 공용으로 사용할 수 있는 스타일 형식이고, 여러 개의 속성에 같은 스타일을 적용하고 싶을 때 사용한다.

(이름을 붙여주는 것)

class는 '.'속성으로 사용하며 class를 여러 개 가질 수 있다.

 

inline이 block보다 훨씬 적다.(span, a, image)

display를 이용해 inline을 block으로 block을 inline으로 바꿀 수 있다.

inline은 높이와 너비가 없고, block은 높이와 너비가 있다.

inline은 박스가 아니고 block은 box다.

box에는 세 가지 속성이 있다.-margine, border, padding

---

1. magine은 box의 경계(border)의 바깥에 있는 공간이다.                                                                   

margin: 20px; ->상하좌우 20px씩                                                                                                 

margin: 20px 15px; ->상하 20px, 좌우 15px씩                                                                                   

margin: 20px 15px 10px 5px; ->상 20px, 우 15px, 하 10px, 좌 5px씩(시계방향)                                           

'collapsing margins 현상'-두 개의 박스의 경계가 위아래로 같다면 두 마진은 하나의 마진으로 취급하는 현상

 

2. padding은 box의 경계로부터 '안쪽'에 있는 공간이다.                                                                         

padding은 margin과 반대 개념으로, 값의 개수에 따라 적용되는 방향은 margin과 동일하다.

 

3. border는 box의 경계이다.                                                                                                             

border-style mdn을 구글에 검색하면 많이 나오지만 거의 한 종류만 사용한다.(soild)                                       

적용 예시 → border: 2px solid black; 너비(두께), 스타일, 색깔

---

border은 inline과 block 모두에 적용된다.

padding, margin​은 block에만 적용된다.

span이 inline 속성이라 높이와 너비를 가질 수 없어 위아래 margin을 가질 수 없고, 좌, 우에만 적용된다.           

이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

 

diplay로 inline-block이라는 속성을 box에 부여할 수 있는데, inline-block은 block처럼 높이, 너비를 가지면서 inline처럼 옆에 무언가가 올 수 있게 해주는 속성이다.                                                                                     

그러나 이는 정해진 형식이 없기에 쓰는 사람의 모니터에 따라 달라질 수 있고, 변수가 너무 많이 생겨서 요즘엔 쓰지 않는다.                                                                                                                                   

 

이를 해결하는 것이 flex다.

---

배우는 내용이 점점 늘어나는 만큼 신기할 따름이다. 배우는 모든 걸 기억할 순 없겠지만 이해하려고 노력 중이다. 빨리 더 많은 속성들을 알고 싶다.