3 LEARNING CSS
3.6 Paddings and IDs
- padding margin 반대 개념
- padding은 box의 경계로부터 '안쪽'에 있는 공간이다.
- 값의 개수에 따라 적용되는 방향은 margin과 동일하다.
- 여러 div를 생성했을 때 'id'를 이용하여 div들을 구분할 수 있고, 각각 다른 속성을 적용시킬 수 있다.
- CSS로 first div에 속성을 적용 시킬 땐, #first {}
- 이는 body, span 등에서도 마찬가지다.
- CSS 코드의 id명은 HTML 코드에서 썼던 id명과 같아야 한다.
3.7 Border
- border는 box의 경계이다.
- border : 굵기, 스타일, 색상 순이다.
- border은 inline과 block 모두 적용됨.
- *는 전체를 뜻한다.
3.8 Classes
- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
- 하지만 padding은 사방에 가질 수 있다.
- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.
- 온점(.)은 class명이라는 뜻.
- id⇒ #tomato는 id="tomato" class⇒ .tomato는 class="tomato"
- id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 같이 쓸 수 있다.
- 와 같이 class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.
3.9 Inline Bloc
- inline-block은 block이 inline속성을 가지게해준다
- 즉, 옆에 둘수도있고, width와 height를 가질 수있다
- 정해진 형식이 없다. 그냥 본인 마음대로임. 그렇기때문에 잘 안쓰지않는다
3.10 Flexbox Part One
- 자식에게 명시하지 않고 부모에게 명시한다
div의 부모를 display:flex로 만든다- main axis=> 주축은 (수평)이 기본, justify-content는 main axis를 따라 움직임
- cross axis=> 교차축은 (수직)이 기본, align-items는 cross axis를 따라 움직임
- body가 height 값을 갖고있지 않으면 이미 맨 위아래를 차지하고 중심에 있으니까 align-items를 설정하더라도 바뀌지 않음.
이 때 height를 px로 해도 작동하지만, vh를 사용하면 화면 크기에 따라 바뀐다. 아이폰 맥북 아이패드에 따라 다 달라지니까 유용하다.
3.11 Flexbox Part Two
- justify-content나 align-items의 default를 변경하기 위해선, 'flex-direction'을 수정하면 된다.
- flex-direction에는 두 가지 속성, column과 row가 있다.
- display를 flex로 했을 때 default는 row이다. 따라서 flex-direction: column;을 주면 주축과 교차축이 반전된다.
- 원하는만큼 flex 부모-자식 엘리먼트를 만들어낼 수 있다.
- flex-wrap: nowrap;을 통해 wrapping이 일어나지 않게 할 수 있다.
- flexbox는 width값을 초기 사이즈로만 여기고, 모든 엘리먼트를 같은 줄에 있게 하기 위해 width를 바꾸기도 한다.
- flex-direction: column-reverse; 밑에서 시작해서 위로 올라가게 한다.(마찬가지로 row-reverse도 있다.)
- flex-wrap: wrap-reverse; 또한 있는데, 브라우저를 줄일 때, 엘리먼트가 겹쳐지는 위치가 역전된다.
