UIUX 디자이너, 프론트엔드 학습_CSS 04

저번 글과 이어 css 속성에 대해 학습한 부분을 기입해 보려 한다.

---

크기 계산(box-sizing)

• 요소의 크기 계산 기준을 지정해 준다.
• content-box : 요소의 내용으로 크기를 계산한다.

• border-box : 요소의 내용+패딩+보더로 크기를 계산

 

 

넘침 제어(overflow)

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 어떻게 제어할지 정하는 단축 속성
• visible : 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라내고 스크롤바 생성
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  • scroll의 경우는 넘치는 것이 없어도 스크롤바를 노출시키기 때문에 오토를 많이 사용한다.
• overflow-x : x축으로만 넘치는 것을 대응(y도 동일)

 

 

출력 특성(display)

• 요소의 화면 출력(보임) 특성
• block : 상자(레이아웃) 요소 - div
• inline : 글자 요소 - span

인라인 요소인 span 태그를 사용했지만 display: block;를 통해 블록 요소로 바꿈

• inline-block : 글자+상자 요소
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보임 특성 없음, 화면에서 사라짐

 

 

투명도

• opacity
• 1 : 불투명
• 0~1 : 0부터 1 사이의 소수점 숫자
  • opacity: 0.07;이라면 7%
  • 0.4라면 40%

 

 

글꼴

• font-style
  • 글자의 기울기
• font-weight
  • 글자의 두께
  • normal, 400 : 기본
  • bold, 700 : 두껍게
  • 100~900 : 100 단위의 숫자 9개
• font-size
  • 글자의 크기
  • 16이 기본 값 rlqhs
• line-height
  • 한 줄의 높이, 행간
• font-family
  • 글꼴 1, 글꼴 2 - 글꼴을 지정할 수 있음
  • 글꼴 후보를 선정하는 

• 글꼴을 입력할 때 사용되는 글꼴뿐 아니라 다른 글꼴도 적는 이유
  • 글꼴 제일 먼저 입력되어 있는 것을 먼저 사용해 보고 사용 가능하면 후보는 무시한다.
  • 그러나, 첫 글꼴을 사용하지 못하면 후보 글꼴을 사용한다.
  • 후보도 사용하지 못하면 마지막 글꼴 계열을 사용하는 것

 

 

문자

• color : 글자의 색상
• text-alight : 가운데 좌/우측 정렬
• text-decoration : 문자의 장식 선
  • none : 장식 없음
  • underline : 밑줄
  • line-through : 중앙 선
• text-indent : 문자 첫 줄의 들여 쓰기
  • 음수를 사용하면 내어 쓰기가 된다.

 

배경

• background-color : 요소의 배경 색상
• background-image : 요소의 배경 이미지 삽입
  • url("경로"): 이미지 경로 명시
• background-repeat
  • repeat : 이미지를 수직, 수평 반복
  • repeat-x : 이미지를 수평 반복(y는 수직)
  • no-repeat : 반복 x
• background-position
  • 방향 : top.bottom. right, left, center
  • 단위 : x, y축으로 - px, em, rem

• background-size : 요소의 배경 이미지 크기
  • auto : 이미지의 실제 크기
  • cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
  • containe : 비율을 유지, 요소의 더 짧은 너비에 맞춤

• background-attachment : 요소의 배경 이미지 스크롤 특성
  • scroll : 이미지가 요소를 따라서 같이 스크롤
  • fixed : 이미지가 부포트에 고정되어 스크롤되지 않음