CSS의 속성

글꼴,문자
배경(background)
배치(position)
플렉스(정렬)
전환
변환
띄움
애니메이션
그리드
다단
필터
..

글꼴

• font-weight: 두께(굵기)
• font-size : 폰트 크기 px, em/rem(반응형 개발시)
• line-height: 줄의 높이(행간과 유사)
• font-family: 폰트

• 구글, 눈누폰트 사용
  - 구글폰트
  link 복사 > head에 link 작성 > CSS rules to specify families 항목 복사해 css에 붙여넣기

<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap"
      rel="stylesheet" />

      .google {
        font-family: "Indie Flower", cursive;
        color: rgb(85, 107, 54);
      }

• 눈누폰트
  style에 font-face 복사한거 붙여넣기 > css에 font-family적용
  

@font-face {
        font-family: "TTWanjudaedunsancheB";
        src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/TTWanjudaedunsancheB.woff2")
          format("woff2");
        font-weight: 700;
        font-style: normal;
      }
      .noonnu {
        font-family: TTWanjudaedunsancheB;
      }

문자

• color : 글자의 색상
• text-align : 문자 정렬 방식
• text-decoration : 문자 장식 (밑줄, 중간선, 윗선)

박스 모델

Inline 요소

컨텐츠 크기만큼만 설정이 됨 = 크기 설정이 불가능
인라인 요소에는 블록 요소 삽입이 불가능, 인라인 안에 인라인 요소 삽입은 가능

• span : 대표적인 인라인 요소
  a, img..
  

Block 요소

가로 너비를 전부 차지하게 됨
가로와 세로 크기 설정이 가능함
요소가 수직으로 쌓임

• div, h1..

Inline-block

block 요소의 수직으로만 쌓이는 문제를 해결하기 위해 나온 개념

margin

외부 여백(공간)을 지정하는 단축 속성
(다른 요소와의 거리/간격 = 바깥쪽 여백)

Margin 단축 속성
margin: top,right,bottom,left
margin: top,bottom left,right
margin: top left,right bottom
margin: top right bottom left

padding

내부 여백(공간)을 지정하는 단축 속성
요소의 크기가 커질 수 있음
(border와 content 간의 안쪽 여백)

Padding 단축 속성
padding: top,right,bottom,left
padding: top,bottom left,right
padding: top left,right bottom
padding: top right bottom left

width, height

요소의 가로/세로 너비
+) min,max 설정가능

Calc()

사용자가 원하는 크기 값을 계산하여 적용

border

테두리 선(요소밖에 생김)

• border-width :두께

• border-style : 선의 종류

  • none, solid, dashed, dotted...

• border-color: 선의 색상

• border-radius: 모서리를 둥글게 깎음

  transparent : 테두리가 선이 생기면 크기가 달라지기 때문에
  border-width랑 border를 합칠 수 없음

box-sizing

요소의 크기 계산 기준을 정함

• content-box: 요소의 내용(content)로 크기 계산
• border-box: 요소의 내용+padding+border로 크기계산
  border-box는 거의 안씀

요소를 숨기는 3가지

Opacity(투명하게 만들기)

요소의 투명도 0~1까지의 숫자로 지정

모습만 숨김/속성남음/자리차지함

Visibility:hidden

모습과 속성을 숨김 / 자리 차지함

display:none

그냥 없애 버리는 방법 / 자리도 사라짐

요소가 내용을 넘쳤을 때

overflow

• visible: 넘친 내용을 그대로 보여줌
• hidden: 넘친 내용을 잘라냄
• scroll: 넘친 내용을 잘라내고 스크롤바 생성
• auto: 넘친 내용이 있을 때만 잘라내고 스크롤바 생성

overflow-x , overflow-y

보여짐을 제어하는 개별속성