TIL 20211029 [항해99 44일차]

나보기 편한 CSS 정리

a태그/하이퍼링크 밑줄 없애기

a { text-decoration:none } 

중앙 정렬 방법

display: "flex",
justifyContent: "center",
alignItems: "center",
minHeight: "100vh",
//flex된 div가 여러개여서 가로로 정렬됐을때 column을 주면 세로로 중앙 정렬됨
flexDirection: "column",

grid로 card를 한줄에 3개 나타낼 수 있게 표현

const Div = styled.div`
display: grid;
grid-gap: 64px;
grid-template-columns: repeat(3, minmax(auto, 1fr));
align-items: center;
// 최대넓이 설정
max-width: 1110px;
justify-content: space-around;
// 양 옆 여백 간격 통일 - 가운데 정렬
margin: auto;

수직 가운데 정렬

line-height: height와 동일한 값!

// 텍스트 수직 가운데 정렬 & 테이블의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때 
vertical-align: middle;

placeholder css변경

// Internet Explorer 10 이상에 적용
input::-ms-input-placeholder { color: #fff; }
//  Webkit, Blink, Edge에 적용
input::-webkit-input-placeholder { color: #fff; } 
// Mozilla Firefox에 적용
input::-moz-placeholder { color: #fff; }

이미지 사이즈 맞추기

// 이미지 태그나 비디오 태그에서 사용가능
object-fit: cover; -> 가로세로 비율은 유지하면서 컨테이너를 꽉 채운다.
배경이미지에서 쓰는 background-size: cover;와 동일하다.

textarea박스 사이즈 조절 막기

resize: none;

내용 줄바꿈 적용

white-space: pre-line;

요소들을 정렬하는 기능

// 정렬된 요소들의 넒이는 부모 넒이에 맞게 모두 자동 축소
flex-wrap: nowrap;

스크롤 자동 추가

overflow: auto;

---