CSS

css란 cascading style sheets의 약자로 html에 작성되어 있는 것들을 시각적으로 꾸미는 용도로 사용된다.

csss는 선택자, 선언, 속성으로 이루어져 있다.

CSS 속성들

1. font
   페이지에서 사용할 폰트의 정류를 외부에서 받아올 수 있다. 구글 폰트 페이지에서 import해서 사용도 가능하다.

   관련 속성 : font-size, font-family, font-weight, font-style

2. box-model
   HTML 요소는 박스 모델로 되어있다. 내용을 표시하는 영역부터 바깥 영역 여백까지를 한 박스 모델의 영역이라고 보면 된다.
   

• width
  => content영역의 가로 길이

• height
  => content영역의 세로 길이

• padding
  => content과 border사이의 영역을 나타냄. (안쪽 여백)

• border
  => padding 과 margin의 경계이며 테두리이다.

• margin
  => boder부터 box model의 최대 범위까지 나타내는 영역. 외부 요소와 거리 조절하는 용도로 사용

3. display
   이 요소를 어떻게 보여줄 것이냐? 를 결정해주는 속성이다.

• none
  => 그냥 안보여줄래.. 나중에 뭐 누르면 나타나게하는 js를 적용시키던가

• block
  => 일단 '이 한 줄은 내꺼야'를 시전하는 아이이다. 가로 영역을 전부 차지한다.
  width, height의 지정이 가능하지만, 다음 요소는 그 다음 줄에 나타난다.
  대표적으로 p, div, h, li태그가 있다.

• inline
  => 블럭요소와 반대되는 놈이다. content영역만 차지하기 때문에 한 줄에 여러개의 요소가 올 수 있다.
  대표적으로 span, i태그가 있다.

• inline-block
  => block와 inline 요소의 중간??? 크기 지정은 가능하고, 한줄로 나타난다.

4. flex
   가장 중요한 녀석인거 같다. 이녀석을 잘 이해하면 아주 효과적으로 웹페이지를 꾸밀 수 있다.
   flex는 부모요소와 자식요소를 잘 따져야되는거 같다.

먼저 부모요소의 속성을 알아봅시다.

• flex-direction
  안에 있는 요소들을 정렬할 때 어떤 순서로 정렬할 지, 가로인지 세로인지를 정할 수 있다.

  flex-direction : row | row-reverse | column | column-reverse

• flex wrap
  원래 한줄로 정렬을 하는데 중간에 끊고 다음 줄에 나타나게 해준다.

  flex-wrap : nowrap| wrap | wrap-reverse

• justify-content
  가로 축을 중심으로 아이템을 이쁘게 정렬시켜준다.
  justify-content : flex-start | flex-end | center | space-around | space-between

• align-items
  수직 축을 중심으로 아이템을 이쁘게 정렬시켜준다.

  align-items : flex-stert | flex-end | center | stretch

이제 자식녀석들을 확인해보자

• order
  각 요소들은 html에 나열된 순서로 우선순위가 매겨져 나타내준다. 하지만 order을 통해 우선순위를 임의로 지정할 수 있다.

5. align

• text-align
  => block요소 안에 있는 inline요소를 정렬시킨다. 정의는block요소에!!!!! 해야한다.
• margin
  => 정렬하고자 하는 요소의 width값이 지정되ㅓ 있으면 margin :0 , auto를 사용해서 중앙 정렬이 가능하다. (inline요소에는 사용 불가능)