[WEB] CSS 이해하기

  선택자(selectors)  

• universal *
• type Tag
• ID #id
• Class .class
• State :
• Attribute []

 

  layout  

display

• div는 블럭레벨(한 줄에 하나가 다 차지함)
  • display: inline-block; 으로 주면 인라인으로 속성 바뀜(상자로 변환, 지정된 사이즈가 있다면 그대로 변환)
  • display: inline; 으로 주면 span처럼 사용 가능(컨텐츠 자체만 꾸며줌)
• span은 인라인레벨(한 줄에 여러개)
  
  • display: block; 으로 주면 블럭으로 속성 바뀜

 

position

• 기본값으로 static을 가지고 있음(html순서대로 보여짐)
• position: relative; 로 주고 left, top등을 주면 그만큼 움직임
  • relative는 원래 자기 자리에서 값을 준 만큼 이동.
• position: absolute; 는 내 아이템이 담겨있는 박스(가까이에 있는 상자) 안에서 움직임
  • absolute는 내 상위 박스에 따라 값을 준 만큼 이동. 
• position: fixed; 는 상자에서 완전히 벗어나 윈도우(페이지) 상에서 움직임
  • fixed는 보이는 페이지에서 값을 준 만큼 이동.
• position: sticky; 는 원래 자리에 있으면서 스크롤링을 해도 없어지지 않고 자기 자리에 그대로 붙어 있음

* caniuse.com에서 호환성 확인하기

 

  FlexBox  

박스와 아이템

• 아이템과 이를 감싸는 박스(컨테이너)를 감싸는 속성값들이 각각 존재 함
  • 컨테이너: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
  • flex-flow는 flex-direction과 flex-wrap(한 줄에 아이템을 모두 넣을 것인지)을 한 줄에 적는 것.
  • justify-content는 중심축(main axis)에서 아이템 배치 속성.
  • align-items는 반대축(cross axis)에서 아이템 배치 속성.(baseline은 텍스트가 균등하게 배치)
  • align-content는 justify-content와 비슷하지만 반대축의 아이템 배치.
  • 아이템: flex, flex-grow, flex-shrink, flex-basis, order, align-self
  • flex-grow의 기본값은 0. 컨테이너가 점점 커질 때 어떻게 커질지 설정.
  • flex-shrink의 기본값도 0. 컨테이너가 점점 작아질 때 어떻게 줄 지 설정.
  • flex-basis의 기본값은 auto. auto이면 grow나 shrink에 지정된 값에 따름. grow나 shrink값 없이 각 아이템에 basis를 퍼센트로 주면 컨테이너의 width에 따라 각 퍼센트만큼 차지하면서 커지거나 줄어듦.
  • align-self는 특정 아이템만 정렬하고 싶을 때 사용.

 

중심축(main axis)과 반대축(cross axis)

•  정렬(flex-direction)에 따라 중심축과 반대축이 달라짐

 

* flexbox froggy로 연습

 

 

  반응형 유닛  

• 폰트사이즈를 px로 설정할 경우, 유저가 브라우저의 폰트 설정을 바꿔도 적용되지 않음.
• 따라서 em, rem, vw, vh, %와 같은 relative length unit 사용.

 

1. em

• font-family에 상관 없이 고정된 사이즈를 가짐.
• 부모의 fontsize에 곱한 값으로, 상대적으로 정해짐.(브라우저의 html fontsize는 16px)
• 8em = 800%

 

2. rem

• relative to root element
• html의 fontsize에 곱한 값으로 설정 됨.
• html의 fontsize를 변경하지 않은 상태에서 3rem이라고 한다면 3*16=48px

 

3. vw, vh, vmin, vmax

• viewport related
• vmin은 브라우저의 너비와 높이 중에 작은 값을 해당 값만큼 적용.
• vmax는 브라우저의 너비와 높이 중 더 큰 값을 해당 값만큼 적용.
• 데스크탑에서 50vmin이면 높이가 더 작으므로 높이의 50%를 적용 함.

 

 

 

 

 

참고 드림코딩 CSS이해하기