CSS_Tips

8725 단어 CSSCSS

Cascading 순서

1. Author style

2. User style

3. Browser

!important: 위의 순서를 무시하기 떄문에 되도록 지양

선택자(selectors)

  • * : wild card
  • tag : type
  • #id : ID
  • .class : Class
  • : : state
  • [] : attribute

간격 설정

  • margin : 테두리 바깥
  • border : 테두리
  • padding : 테두리 안

레이아웃

1. display

  • block : 한줄에 하나
  • inline : 한줄 여러개 / 내용물에 따라 변경
  • inline-block : 한줄에 여러개 / 내용물 상관 없음

2. position

  • static : 디폴트 / 고정
  • relative : 원래 자리서 바뀜
  • absolute : 부모 상자 기준으로
  • fixed : 상자에서 벗어나 페이지 기준으로
  • sticky : 원래 자리서 바뀌면서 스크롤할때 따라감

e.g.)

nav {
 position: sticky;
 top: 0; // 위치 맨 위에 붙여줌
}
스크롤 하면서 Nav바 계속 위에 고정하고 싶을 때 사용

Flex Box

float : 텍스트와 이미지가 같이 있을때 이미지 위치 지정 (left, center, right)

container (부모 상자)

  1. display: flex;
    => flex 사용
  1. flex-direction : 디폴트 row
    row, row-reverse, column, column-reverse
  1. flex-wrap : 디폴트 nowrap 한줄에 붙일지 말지
    nowrap, wrap, wrap-reverse
  1. flex-flow : 2,3번 속성 한번에 작성가능
  1. justify-content : 중심축의 아이템 배치 결정
    flex-start, center, flex-end, space-around, space-between, space-evenly
  1. align-items : 반대축의 아이템 배치 결정
    => baseline: 내용물 같은 위치
  1. align-content: 반대축이 두 줄 이상으로 배치되어 있을 경우 각 줄 배치 결정

  2. flex-box 간격 줄때 margin대신 사용

div {
	display: flex;
	gap: [row-gap] [column-gap];
	
}

item (자식 요소)

  1. order: default 0; 순서 위치 설정

  2. flex-grow: 디폴트 0; 늘어날때 비율 설정

  3. flex-shrink: 디폴트 0; 줄어들때 비율 설정

  4. flex-basis: 디폴트 auto; 비율 설정

  5. flex: 2,3,4 동시에 사용

  6. align-self: 아이템 하나만 지정 가능

반응형 디자인

Media Query : 모바일 / 테블릿 / 랩탑 / 데스크탑 크기 별로 설정 가능

@media screen and (min-width: 800px) {
	
}

속성1: screen, all, print, speech

속성2: and, not, only, ,(comma)

반응형 유닛

1. Absolute

px : 픽셀 => 고정 적임

2. Relative

em : 현재 폰트 사이즈를 나타내는 단위 => 현재 폰트 사이즈가 16px이면 1rem == 16px / 자식은 부모의 크기 기준으로 상대적

rem: root + em => root 크기 기준

vw: 너비 100vw => 브라우저의 100%

vh: 높이 위와 유사

%: 부모요소의 상대적으로 기준 em과 유사 100% == 1em


부모를 기준으로 변경해야할때: em, %

브라우저를 기준으로 변경해야할떄: v*, rem


요소의 너비에 따라 변경해야 할때: %, v*

폰트 사이즈에 따라 변경해야 할때: em, rem


em VS rem: rem은 어디서 쓰든 똑같은 사이즈, em은 부모에따라 유동적

:root

기본 css 지정 가능
=> 불러올 떄는 var(변수)

:root {
  --text-color: #f0f4f5;
  --background-color: #263343;
}

* {
 color: var(--text-color);
}

문장줄 길이 제한

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
3줄로 부터 감춰짐

이미지 관련 팁

  • mask-image: url(); : 이미지 안에 이미지를 오버랩 할수 있음
  • background-attachment: fixed; : li안에 하나의 이미지를 공유 퍼즐 조각처럼 나옴
  • object-fit: cover; : 이미지 크기를 원본 비율로 맞춰줌
  • 이미지를 호버했을때 크기를 키우고 싶다면
img:hover {
	transform: sale(1.2); : 1.2배 커짐
	transition: 1s; : 1초 동안 커짐
}
  • 이미지를 사선으로 자르고 싶을 때

transform: skew(0deg, -10deg); (x축, y축)

Animation_transition

  • transition-property: all; : 너비와 불투명 효과
  • transition-duration: [시간];
  • trandision-delay: 애니메이션 기다렸다가 작동하게해줌
  • transition-time-function: ease; 효과 속도 지정
  • transition: [property] [duration] [function] [delay];
    한줄로 위의 4가지속성 함축 가능
    e.g.) transition: width .35s ease .is; 속성 / 시간 / 변화 / 지연

스크롤 스냅

부모에 스크롤 스냅을 타입 설정하면
scroll-snap-type: y mandatory;

자식 요소들이 스크롤 스냅 설정 가능
scroll-snap-align: center;

자잘한 팁

  • calc(): 사칙연산 메소드
  • text-transform: 글자 변형 (e.g. uppercase: 대문자로)
  • --webkit : 여러 브라우저 호환성을 위해 사용
  • @support: 브라우저 지원 여부에 따라 css 설정 가능
  • 선택자 코드 축소 가능
    :is(...args) [selector]
  • aspect ratio
    영상이나 이미지를 원하는 비율로 설정 가능
img {
  aspect-ratio: 16 / 9; => 16:9 비율
} 

좋은 웹페이지 즐겨찾기