CSS :: 속성(1)

📝 CSS

💡 margin

• 외부 여백을 지정하는 속성
• 1개 지정 : top, right, bottom, left
• 2개 지정 : top, bottom left, right
• 3개 지정 : top left, right bottom
• 4개 지정 : top right bottom left
  = 지정 갯수에 따라 상하좌우 조절 가능
  
  

💡 padding

• 내부 여백을 지정하는 속성
• 요소의 크기가 커짐
• 지정 갯수에 따라 상하좌우 조절 가능
  
  

💡 border

• border : border-width border-style border-color ;
• 요소의 테두리 선 지정하는 속성
• 요소의 크기가 커짐
• border-width : 선-두께
  • 지정 갯수에 따라 상하좌우 조절 가능
• border-style : 선-종류
  • none : 선 없음
  • solid : 실선
  • dashed : 파선(점선)
  • 지정 갯수에 따라 상하좌우 조절 가능
• border-color : 선-색상
  • 지정 갯수에 따라 상하좌우 조절 가능
• border-radius : 요소의 모서리를 둥글게 깎음
  
  

💡 box-sizing

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

💡 overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
• visible : 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  
  

💡 display

• 요소의 화면 보여짐 특성
• block : 상자 요소
• inline : 글자 요소
• inline-block : 글자 + 상자 요소
• flex : 1차원 레이아웃
• grid : 2차원 레이아웃
• none : 보여짐 특성 없음, 화면에서 사라짐
  
  

💡 opacity

• 요소 투명도
• 0 ~ 1 : 0(투명) ~ 1(불투명)
  
  

💡 font

• font-style
  • 글자의 기울기
  • italic : 이텔릭체
    
    
• font-weight
  • 글자의 두께
  • 100 ~ 900 : 100(얇게) ~ 400(기본 두께) ~ 700(두껍게) ~ 900
  • bold : 두껍게
    
    
• line-height
  • 한 줄의 높이, 행간과 유사
  • 숫자 : 요소의 글꼴 크기의 배수로 지정
    
    
• font-family
  • 글꼴 설정
  • serif : 바탕체 계열
  • sans-serif : 고딕체 계열
  • monospace : 고정너비(가로폭 일정) 글꼴 계열