CSS :: 속성(2)

📝 CSS

💡 text

• text-align
  • 문자의 정렬 방식
  • right : 오른쪽 정렬
  • center : 가운데 정렬
    
    
• text-decoration
  • 문자의 선
  • underline : 밑줄
  • line-through : 중앙 선
    
    
• text-indent
  • 문자 첫 줄 들여쓰기
  • 음수 가능
    
    

💡 background

• background-image
  • 요소의 배경 이미지 삽입
  • url("경로")
    
    
• background-repeat
  • 요소의 배경 이미지 반복
  • repeat-x : 이미지를 수평 반복
  • repeat-y : 이미지를 수직 반복
  • no-repeat : 반복 없음
    
    
• background-position
  • 요소의 배경 이미지 위치
  • top bottom left right center
    
    
• background-size
  • 요소의 배경 이미지 크기
  • cover : 비율 유지, 요소의 더 넓은 너비에 맞춤
  • contain : 비율 유지, 요소의 더 짧은 너비에 맞춤
    
    
• background-attachment
  • 요소의 배경 이미지 스크롤 특성
  • scroll : 이미지가 요소를 따라서 같이 스크롤
  • fixed : 이미지가 뷰포트에 고정, 스크롤 안됨
    
    

💡 position

• 요소의 위치를 지정하는 속성
• 기준 설정 → 위치 설정
• 기준 설정
  • relative : 요소 자신을 기준
  • absolute : 위치 상 부모 요소를 기준
  • fixed : 뷰포트를 기준
• 위치 설정
  • 음수 사용 가능
  • top bottom right left z-index
• z-index : 요소의 쌓임 정도를 지정
• position 속성의 값이 absolute 또는 fixed 라면 display 속성이 block으로 변경
  
  

💡 정렬

• display
  • flex container의 화면 보여짐 특성
  • Flex Items 에게 적용
    • block : Items(자식 요소)들을 수직 정렬
    • flex : Items(자식 요소)들을 수평 정렬
  • Flex Container 에게 적용
    • flex : 블록 요소와 같이 정의, Container 들을 수직 정렬
    • inline-flex : 인라인 요소와 같이 정의, Container 들을 수평 정렬
• flex-direction
  • 주 축 설정
  • row-reverse : 행 축(우 → 좌)
  • column : 열 축(상 → 하)
• flex-wrap
  • Flex Items 의 줄 바꿈 여부
  • wrap : 여러 줄로 묶음
• justify-content
  • 주 축의 정렬 방법
  • flex-end : Flex Items 를 끝점으로 정렬
  • center : Flex Items 를 가운데 정렬
• align-content
  • 교차 축의 '여러 줄' 정렬 방법
  • Items이 이미 두 줄 이상이어야 하므로 활용도 ↓
  • flex-start : Flex Items 를 시작점으로 정렬
  • flex-end : Flex Items 를 끝점으로 정렬
  • center : Flex Items 를 가운데 정렬
• align-items
  • 교차 축의 '한 줄' 정렬 방법
  • align-content 보다 활용도 ↑
  • flex-start : Flex Items 를 시작점으로 정렬
  • flex-end : Flex Items 를 끝점으로 정렬
  • center : Flex Items 를 가운데 정렬
• order
  • Flex Items 의 순서
• flex-grow
  • Flex Items 의 증가 너비 비율
• flex-shrink
  • Flex Items 의 감소 너비 비율
  • 0 : 공간이 줄어도 요소 자체의 너비는 유지
• flex-basis
  • Flex Items 의 공간 배분 전 기본 너비
    
    

💡 전환

• transition : 속성명 지속시간 타이밍함수 대기시간 ;
  • 요소의 시작과 끝 효과를 지정하는 속성
  • 지속시간은 필수로 포함되어야 함
• transition-property
  • 전환 효과를 사용할 속성 이름 지정
  • ex. width: 가로 너비에만 속성을 적용
• transition-duration
  • 시간 : 지속시간(s) 설정
• transition-timing-function
  • 전환 효과의 타이밍 함수 설정
  • linear : 일정하게
  • ease-in : 느리게-빠르게
  • ease-out : 빠르게-느리게
  • ease-in-out : 느리게-빠르게-느리게
• transition-delay
  • 전환 효과가 몇 초 후에 시작할 지 대기 시간 지정
  • 시간 : 대기시간(s) 설정
    
    

💡 변환

• transform : 원근법 이동 크기 회전 기울임 ;
  • 요소의 변환 효과
• 2D 변환 함수
  • translate(x,y) : 이동 (x축, y축)
  • translateX(x) : 이동 (x축)
  • translateY(y) : 이동 (y축)
  • scale(x,y) : 크기 (x축, y축)
  • rotate(degree) : 회전 (각도)
  • skewX(x) : 기울임 (x축)
  • skewY(y) : 기울임 (y축)
• 3D 변환 함수
  • perspective(n) : 원근법 (거리)
    • 하위 요소를 관찰하는 원근 거리를 지정
  • rotateX(x) : 회전 (x축)
  • rotateY(y) : 회전 (y축)
• backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
  • hidden : 뒷면 숨김