CSS의 속성

Font

• font-weight: 글자의 두께(가중치)
  • 기본 두께(default): nomal, 400
  • 두껍게: bold, 700
• font-size: 글자의 크기
  • 단위: px, em, rem등 단위로 지정
• line-height: 한 줄의 높이
  • 숫자: 요소의 글꼴 크기의 배수로 지정
  • 단위: px, em, rem등의 단위로 지정

• font-family: 글꼴1, "글꼴2",...글꼴계열; ----글꼴계열은 필수로 작성 해야함.
  -글꼴 가져오는 주소는 '구글 폰트'와 '눈누 폰트'가 유용하다.
  
  

문자에 대한 속성

• color: 글자의 색상
• text-align: 문자의 정렬 방식
  • left, right, center, justify: 양쪽 정렬
• 문자의 장식(선)
  • none, underline, overline, line- through: 중앙선
    
    

박스 모델

특성은 크게 2가지로 구분됨.

• 인라인(inline)요소: 글자를 만들기 위한 요소들
• 블록(block)요소: 상자(레이아웃)를 만들기 위한 요소들.
  
  
  

Inline 요소

대표적으로는 span태그가 있다. - 요소가 수평으로 쌓임(가로 공간 공유됨).

• 요소의 가로, 세로 너비를 지정하는 CSS속성
  • inline요소에는 width와 height가 적용되지 않음.
• 요소의 외부,내부 여백을 지정하는 CSS 속성
  • div는 불가능하고 span은 가능하다.
  • margin은 가로만 적용이 되고, padding은 가로만 적용, 세로는 배경색만 적용이 된다.
    
    

Block 요소

대표적으로 div태그가 있다. - 요소가 수직으로 쌓임(가로 공간 독점).

• 요소의 가로, 세로 너비를 지정하는 CSS속성
  • 가로 style="width: 100px;", 세로 style="height: 100px;"
• 요소의 외부,내부 여백을 지정하는 CSS 속성
  • 외부여백 style="margin: 20px;", 내부여백 style="padding: 20px;"
  • margin은 가로, 세로 전부 가능하지만 세로는 상쇄된다.
  • padding은, 가로 세로 전부 가능하다.
    
    

inline-block요소

• Block요소의 문제점은 수직으로만 쌓임.
• inline요소의 문제점은 수평으로는 쌓이긴하나 해당 구역을 꾸미기가 힘듦.
  

이 두 요소의 문제점을 보완하여 만들어진 요소가 Inline-block 요소이다.

margin & padding

margin: 다른 요소와의 거리.

• 음수 사용 가능
• 개별 속성으로는 margin-top, margin-bottom, margin-left, margin-right가 있다.
• 단축속성 : 적는 순서가 중요
  • margin: top,right, bottom, left;
  • margin: top,bottom left,right;
  • margin: top left,right bottom;
  • margin: top right bottom left;
  

  ---

padding: boder 와 content 간의 안쪽 여백

• 요소의 크기가 커진다.
• 개별 속성으로는 padding-top, padding-bottom, padding-left, padding-right가 있다.
• 단축속성 : 적는 순서가 중요
  • padding: top,right, bottom, left;
  • padding: top,bottom left,right;
  • padding: top left,right bottom;
  • padding: top right bottom left;
    
    

width & height

auto: 브라우저가 너비를 알아서 계산함(default 값: 요소에 이미들어가 있는 속성 값)
단위: px, em, vw등 있다.

• max-width, max-height : 요소가 커질 수 있는 최대 가로, 세로 너비
• min-width, min-height: 요소가 작아질 수 있는 최소 가로, 세로 너비

단위

• px: 픽셀
• %: 백분율
• em: 요소의 글꼴 크기
• rem: 루트요소(html)의 글꼴 크기
• vw, vh: 뷰포트의 가로, 세로 너비의 백분율

calc()

• 사용자가 원하는 크기 값을 계산하여 적용
  ex): calc(100vh - 20vw), calc(1920px - 10vw)

line-height

• 영역 요소 내부 컨텐츠 글자의 줄 높이
• Box model의 크기 단위 적용 가능. (font에도 적용이 가능하다.)
• 컨텐츠가 1줄인 경우 box height와 lineheight를 동일하게 하면 세로 중앙 정렬 효과가 있다.
  

border

• boder-width: 요소 테두리 선의 두께. px, em, %등 단위로 지정.
• boder-style: 요소 테두리 선의 종류. none: 선 없음, solid: 실선, dashed: 파선
• boder-color: 요소 테두리 선의 색상을 지정하는 속성. transparent: 투명
  width, style, color 속성의 공통 단축 속성
  • (width, style, color): top,right, bottom, left;
  • (width, style, color): top,bottom left,right;
  • (width, style, color): top left,right bottom;
  • (width, style, color): top right bottom left;
• boder-방향, border-방향- 속성
  • boder-(top, bottom, right, left): 두께 종류 색상;
  • boder-(top, bottom, right, left)-width: 두께;
  • boder-(top, bottom, right, left)-style: 종류 ;
  • boder-(top, bottom, right, left)-color: 색상;
• boder-radius: 요소의 모서리를 둥글게 깎음 // 50%면 완전한 원.
  

1-2-3-4의 순서대로 속성값이 적용됨.

box-sizing

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

• content-box: 요소의 내용(content)으로 크기 계산
  

• boder-box: 요소의 내용 + padding + border로 크기 계산
  

opacity

요소의 투명도

• 1: 불투명
• 0~1사이의 소수점 숫자

visibility

요소를 숨기는 3가지 방법

• opacity로 투명하게 만들기 - 모습만 없애는 방법
  • 모습 X, 속성 O, 자리 O
• visibility : hidden - 자리만 차지
  • 모습 X, 속성 X, 자리 O
• display: none - 그냥 없애버리는 방법
  • 모습 X, 속성 X, 자리 X

overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible: 넘친 내용을 그대로 보여줌
• hidden: 넘친 내용을 잘라냄
• auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
• overflow-x, overflow-y로 개별적으로 제어를 할 수 있다.