[css] css 공부 정리3_간단한 속성들

박스 모델

글꼴, 문자

배경

배치

플렉스(정렬)

전환

변환

띄움

애니메이션

그리드

다단

필터

Font

font-weight => 글자의 두께(가중치)

 

font-size => 글자의 크기

 

line-height => 한줄의 높이, 행간과 유사

 

 

 

문자에 대한 속성

 

 

박스 모델(중요)

 

 

Inline 요소

 

Block 요소

Inline-bloc 이란?

• Block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념
• 디자인이 중요시 되면서 블록을 가로로 나열 하는 경우가 많이 생겼는데, span 태그는 inline 요소라서 해당 구역을 꾸미기가 어려움!
• 따라서, 둘의 특징을 합쳐서 만든 inlineblock!

 

 

margin & padding

margin : 다른 요소와의 거리, 바깥쪽 여백
padding: border 와 content 간의 안쪽 여백

 

단축속성

 

Margin, 단축 속성 정리

 

Margin, 개별 속성

 

Padding 단축 속성

 

Padding, 단축 속성 정리

 

Padding, 개별 속성

Width, Height

 

Calc() 이란?

• 사용자가 원하는 크기 값을 계산하여 적용
• Ex
     • Calc(100vh – 20vw)
     • Calc(1920px – 10vw)

 

line-height 이란?

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

 

Border

 

 

Border-width, 단축 속성 정리

 

 

Border-style, 단축 속성 정리

 

Border-color, 단축 속성 정리

 

Border-radius

 

Box-sizing

 

 

Opacity

Visibility

요소를 숨기는 3가지 방법!
• opacity(투명하게 만들기)
     => 모습만 숨기는 방법 / 속성 남음 / 자리 차지
• visibility : hidden
     => 모습과 속성을 숨기는 방법 / 자리 차지
• display : none
     => 그냥 없애 버리는 방법 / 자리도 사라짐

 

Overflow