[패스트캠퍼스 FE MGS] Day5(7월 1일/금 - CSS 속성)

1sol·2022년 7월 1일

패스트캠퍼스 FE MGS

목록 보기
6/11

LEARN!

  • CSS 속성의 종류
  • 박스 모델
  • 글꼴, 문자
  • 배경

1. CSS 속성의 종류

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

2. 박스 모델

1) 너비(width, height)

  • 요소의 가로와 세로 너비를 지정하는 속성

  • auto(기본값) : 브라우저가 너비를 계산

  • 단위 : px, em, vw 등 단위로 지정

  • 인라인 요소들은 브라우저가 자동으로 가로와 세로 너비를 계산할때 콘텐츠 크기만큼 자동으로 줄어들게 설계되어 있음

  • 블록 요소들은 브라우저가 자동으로 크기를 계산할때 가로 사이즈를 최대한 늘리도록 되어있음 반대로 세로는 인라인 요소와 같이 컨텐츠 크기만큼 줄어들도록 계산함

  • max-width , max-height

    • none(기본값): 최대 너비 제한 없음
    • 단위 : px, em, vw 등 단위로 지정

  • min-width ,min-height

    • 0(기본값) : 최소 너비 제한 없음
    • : px, em, vw 등 단위로 지정

2) 단위

  • px: 픽셀(하나의 점을 의미)
  • % : 상대적 백분율. (자식요소인 경우 부모요소 크기의 퍼센트 만큼)
  • em : 본인이 갖고 있는 요소의 폰트사이즈를 기준으로 박스의 크기를 설정함. ex) 폰트 사이즈가 16px일 경우 10em은 160px이 됨
  • rem : 루트요소(html)의 글꼴 크기를 기준으로 크기가 설정됨(html의 기본 font size: 16px)
  • vw : 뷰포트 가로 너비의 백분율. 100vw는 화면의 100%를 사용하며 화면이 줄어들고 늘어남에 따라 크기가 달라짐
  • vh : 뷰포트 세로 너비의 백분율. 화면이 줄어들고 늘어남에 따라 크기가 달라짐

3) margin

  • 요소의 외부 여백(공간)을 지정하는 단축 속성
  • 음수 사용 가능
  • 0 : 외부 여백 없음
  • auto : 브라우저가 여백을 계산
    • 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용!
  • 단위: px, em, vw 등 단위로 지정
  • margin: 10px; (top, right, bottom, left)
  • margin: 10px 20px; (top, bottom / left,right)
  • margin: 10px 20px 30px; (top / left,right / bottom)
  • margin: 10px 20px 30px 40px; (top/right/bottom/left 시계방향)
  • margin에 음수를 사용하게 될 경우 적용된 값만큼 겹쳐져서 표현됨
  • 개별속성으로 적용도 가능.

4) padding

  • 요소의 내부 여백(공간)을 지정하는 단축 속성
  • 0 : 내부 여백 없음
  • 단위 : px, em, vw 단위로 지정
  • % : 부모 요소의 가로 너비에 대한 비율로 지정
  • padding도 margin과 같은 단축속성으로 4개의 값을 추가할 수 있고 적용되는 방향도 동일하다.
  • 개별속성으로 적용도 가능.

5) border : 선-두께 선-종류 선-색상;

border-width

  • 기본값은 medium이고 thin,thick으로 설정 가능하지만 단위로 지정하는것을 권장함.
  • 개별속성이면서 단축속성이고 단축속성의 순서는 margin, padding과 같음
  • 테두리선의 두께가 늘어날수록 요소의 크기가 늘어남

border-style

  • 기본값 : none
  • solid: 실선
  • dashed: 파선(---)
  • dotted: 점선(...)
  • 개별속성, 단축속성 사용 가능

border-color

  • 기본값: black
  • 색상 표현(CSS)
    • 색상 이름
    • Hex 코드 : 16진수 색상 / (#000, #ffffff)
    • RGB : 빛의 삼원색 / rgb(255,255,255)
    • RGBA : 빛의 삼원색 + 투명도 / rgba(0, 0, 0, 0.5)

border-radius

  • 요소의 모서리를 둥글게 깎음
  • 단축속성으로 4개의 값 적용가능(시계방향으로 적용됨)
  • border-radius: 50%; 를 적용하며 원을 만들수 있음

6) box-sizing

  • 요소의 크기 계산 기준을 지정
  • content-box : 요소의 내용(content)으로 크기 계산
  • border-box : 요소의 내용 + padding + border 로 크기를 계산함

7) overflow

  • 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축속성
  • visible(기본값) : 넘친 내용을 그대로 보여줌
  • hidden : 넘친 내용을 잘라냄
  • scroll : 스크롤바를 생성해서 넘친 내용을 보여줌
    • 가로만 넘치고 세로는 넘치치 않더라도 가로, 세로 (x축,y축) 모두 스크롤바가 생성됨
  • auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
    • 넘치는 방향만 스크롤 바 생성
  • overflow-x, overflow-y : 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 개별속성들

8) display

  • 요소의 화면 출력(보여짐)특성을 지정
  • block : 상자(레이아웃) 요소
  • inline : 글자 요소
  • inline-block : 글자 + 상자 요소
  • flex : 플렉스 박스(1차원 레이아웃)
  • grid : 그리드 (2차원 레이아웃)
  • none : 보여짐 특성 없음, 화면에서 사라짐
  • 기타 : table, table-row, table-cell 등 ...

9) opacity

  • 요소의 투명도를 조절
  • 1 : 불투명
  • 0: 완전한 투명
  • 0~1 : 0부터 1사이의 소수점 숫자

3. 글꼴

  • font-style:

    • normal(기본값)
    • italic(이탤릭체)
    • oblique(기울어진글자/잘 사용하지 않음)

  • font-weight:

    • normal,400 : 기본두께
    • bold,700 : 두껍게
    • bolder, lighter : 상위(부모)요소보다 더 두껍게 , 얇게(상대적인 두께)
    • 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께

  • font-size : 기본 크기(16픽셀), 단위를 지정해서 사용

  • line-height: 한 줄의 높이 행간과 유사함.

    • 숫자: 요소의 글꼴 크기의 배수로 지정
    • 단위: px, em, rem등의 단위로 지정
    • 지속적인 크기를 유지할 수 있기 때문에 배수 단위를 사용하는것을 권장함(글자 크기가 변하면 line-height 같이 변함)

  • font-family: 글꼴1, "글꼴2", ... 글꼴계열;

    • 글꼴계열: 필수 작성!(모든 글꼴 적용되지 않을 경우 적용)
    • 맨 앞의 글꼴을 사용
    • 첫번째 글꼴을 적용할 수 없으면 다음 명시된 글꼴을 적용함
    • 글꼴 이름에 띄어쓰기가 있다면 " " 안에 작성해야함

4. 문자

  • text-indent : 문자 첫 줄의 들여쓰기, 음수를 입력하면 내어쓰기가 됨.

  • text-align :

    • left(기본값) : 왼쪽 정렬
    • right : 오른쪽 정렬
    • center : 가운데 정렬
    • justify : 양쪽 정렬

  • text-decoration :

    • none : 장식없음
    • underline: 밑줄
    • overline: 윗줄
    • line-through : 중앙 선

5. 배경

  • background-color : 배경 색깔을 넣을 수 있음.

    • 기본값: transparent(투명)

  • background-image :

    • 기본값: none(이미지 없음)
    • background-imagie: url("경로");
    • 상대경로 또는 절대 경로 사용

  • background-size : 배경 이미지의 사이즈를 결정.
    만약 배경이미지가 배경사이즈와 다르다면 배경이미지가 반복됨.

  • background-repeat: 요소의 배경 이미지 반복

    • repeat : 이미지를 수직, 수평 반복
    • repeat-x : 이미지를 수평 반복
    • repeat-y : 이미지를 수직 반복
    • no-repeat : 반복 없음

  • background-position: 요소의 배경 이미지 위치

    • 방향 : top, bottom, left, right, center 방향
    • 단위 : 이미지의 위치를(x, y 축에 값을 넣어) 단위로 지정

  • background-size : 요소의 배경 이미지 크기

    • auto(기본값) : 이미지의 실제 크기
    • 단위 : px, em, rem 등 단위로 지정
    • cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
    • contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

  • background-attachment : 요소의 배경 이미지 스크롤 특성

    • scroll(기본값) : 이미지가 요소를 따라서 같이 스크롤
    • fixed: 이미지가 뷰포트에 고정, 스크롤 X
profile
1sol
be driven
이전 포스트

[패스트캠퍼스 FE MGS] Day4(6월 30일/목 - Basic CSS)

다음 포스트

[패스트캠퍼스 FE MGS] Day6~7(7월 4일~7월 5일/월 ,화- CSS 속성2)

0개의 댓글