💅🏻 CSS 자주 쓰는 것 정리

ul list

element를 중앙에 놓기

.form__main{
    background-color: #F7F7F7;
    width: 340px;
    margin: auto;
}

margin을 auto로 주고 width을 원하는 만큼 잡아주면(ex. width: 50%, width : 300px 등) 컴포넌트가 중앙에 위치 하게 됨

• width을 정해줘야지 해당 엘리먼트가 공간을 다 차지 하는 것을 막아주고, width만큼 공간을 차지 하면 양 옆이 알아서 같은 크기로 margin이 잡히게된다.

방법 2. display: flex 이용하기
자식들이 모두 div 일 때 부모에게 display: flex를 적용해 주면

.parent{
   display : flex;
  flex-direction : column; // 자식들 세로 기준으로 맞출 것임
  justify-content: center; // 
  align-items : center; 
}

.parent{
   display : flex;
  flex-direction : row; // 자식들 가로로 정렬
  justify-content: center;
  align-items : center; 
}

flex 자료는 A Complete Guide to Flexbox와 여기를 참고하였다.

input element 꾸미기

input{
   padding: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 5px;
}
input:focus {
  outline: none;
}

*:focus{
  outline: none;
}

• input은 조금 뚱뚱한게 이쁘기 때문에 padding을 넣어주고, 둥근 테두리 만들기
• input 입력시 테두리에 파란 테두리가 생기는데 outline: none으로 없애준다.