[CSS] 자주 사용되는 코드

개발일기·2022년 2월 22일

CSS reset 테크닉 검색

margin : 0 auto
위아래는 값을 주지 않고 좌우로만 동등하게 값을 주어 가운데 정렬을 할 때 사용

*{margin : 0; padding : 0;}
브라우저에 기본적으로 설정된 모든 마진 패딩 값을 0으로 초기화

float , clear:both
float를 쓰게되면 다른 요소들까지 float 영향을 받게 되는데
이때 clear:both를 써주면 해당 요소를 영향을 받지 않게 된다.
(또 다른 방법으로는 overflow:hidden 적용)

inline 요소 정렬
수평 : text-align
수직 : vertical-align

block 요소 정렬
수평 : margin : 0 auto
수직 : line-height: 숫자px

position : absolute가 적용된 block 요소 정 가운데 정렬
top: 50%;
left: 50%;

position : relative
position : absolute의 기준점이 된다.(같이 사용)
다른 레이아웃에 영향을 주지 않고 움직일 때 사용

0개의 댓글