3.6~3.11

3. LEARNING CSS

3.6 Paddings and IDs

padding / ID

padding

• margin과 달리 box의 경계로 부터 안쪽의 공간.
• 입력방식은 margin 과 같음

  ▶️ pading-top / left / right / bottom모두 따로 지정할 수 있음
  ▶️ padding:
  1 value = top / left / right / bottom 모두 같은 값
  2 value = 첫번째 값 은 top / bottom , 두번째 값은 right/left
  4 value = top / right / bottom / left 순서대로 적용

id

• 고유식별자.

• CSS에서 #id명으로 스타일속성 지정

  
  

  ---

  
  

3.7 Border

Border

border

• box의 경계선
• inline / block 요소에 모두 사용할 수 있음
• 여러타입이 있는데 필요시 구글검색 (border style mdn)
  - 많이 사용하는 스타일 : solid(실선) dashed(점선)

  {border:2px solid black}
    // 굵기  종류  색상 순서

전체 box에 같은 스타일주기

• *을 이용해 같은 스타일을 모든 box에 한번에 적용할 수 있다.

   *{
   border:2px solid black
   }

• 그중 한개의 border style을 다르게 지정하고 싶다면, CSS 의 cascading특징을 활용.
  - *로 전체 border style을 주고 밑 부분에 해당 요소에 다른 스타일 적용.

  
  
  

  ---

  
  

3.8 Classes

inline 요소의 box 크기조정 & class

inline 요소의 box 크기조정

▶️inline요소는 높이와 너비를 가질 수 없다 (block요소로 변경하면 가능)

• padding 값 & margin-left/right 값은 가짐.

class

▶️id와 달리 여러태그에 중복으로 사용할 수 있다.

• 여러태그에 같은 스타일 주고 싶을때 사용

  #id1,#id2,#id3{style속성} 👉 태그들에 같은 class 지정후, .class{}

• 하나의 태그에 여러개의 class를 사용할 수 있고, 사용시 class이름 사이에 띄어쓰기

  <<h1 class = "ab cd fed ">
    // h1태그에 ab , cd , fed라는 class를 적용

---

3.9 Inline Block

block요소를 inline으로 변경시 주의점

▶️display:inline & display:inline-block으로 변경할 수 있지만 문제가 있다.

display:inline의 문제점

• height , width 를 설정할 수 없다.

display:inline-block의 문제점

• height , width , margin도 가질수 있고, 옆에 다른요소가 올 수도 있지만
  • 디폴트로 box사이에 공간이 생긴다. (margin / padding /border으로 해결안됨.)
  • 정해진 형식이 없어 박스크기에 따라 여백공간이 규칙없이 달라짐
  • 반응형 디자인(Responsive Design)을 지원하지 않는다.

---

3.10 Flexbox Part One

Flexbox1 _ display:flex

▶️ 박스들을 어떤곳이든 둘 수 있다.
- block 요소들을 margin / padding 값이 있는 상태로 나란히 배열가능

사용시 규칙

1. 자식 element에 아무것도 적지 말고 부모element에만 명시해야함
   • 부모element를 flex container으로 만듦 display:flex
2. 디폴트로 주축main axis (수평)과 교차축cross axis (수직)을 가지고 있다.
3. 여러 속성을 지정할 수 있다 (역시 부모요소에)
   Click ! display:flex속성정리

• justify-content는 주축main axis(수평) 에 적용
• align-items는 교차축cross axis(수직)에 적용

  부모element에 따로 높이가 지정되어 있지 않다면, 자식요소와 부모요소의 높이가 같기때문에 align-items을 설정하더라도 바뀌지 않는다
  ▶️부모 element의 height를 100vh(viewport height : 화면 높이)으로 지정

---

3.11 Flexbox Part Two

Flexbox2 _ display:flex

Click ! display:flex속성정리

• display:flex 는 디폴트로 flex-direction이 row이다
  - column으로 변경할 경우:
  - justify-content가 수직에 적용
  - align-items는 수평에 적용