[CSS] 자주 사용하는 CSS 정리

1. 가운데 정렬 

position: absolute;
left: 50%;
top: 50%:
transform: translate(-50%, -50%);

2. display - block, inline, inline-block

◼ block: 줄바꿈 o. 높이와 너비 지정할 수 있음. margin, padding도 지정할 수 있음. 

◼ inline: 줄바꿈 x. 높이와 너비 지정 x. margin은 위 아래엔 적용 x. padding은 시각적으로는 추가되지만 공간을 차지하지는 않음. 

◼ inline-block: 줄바꿈 x. 높이와 너비 지정할 수 있음. 

 

3. css 디자인 가져오는 사이트

https://getbootstrap.com/docs/4.0/getting-started/introduction/

 

4. box-shadow

box-shadow: x-offset, y-offset, blur, color;

 

5. 미디어 쿼리 사용하기 

@media screen and ()

-> max-width, min-width 등을 지정

https://developer.mozilla.org/ko/docs/Web/CSS/@media (참고)

 

6. flex 개념이 잘 정리된 블로그

https://studiomeal.com/archives/197

 

7. noto sans 글씨체 추가 (fonts.google.com)

https://fonts.google.com/noto/specimen/Noto+Sans+KR?query=noto+sans+ 

 

8. form 요소(select, input)의 기본 속성 초기화하기

input{outline-style:none;} /*크롬 브라우져 input 주황색 테두리 없애는법*/
border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */
-webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */ 

출처: https://freemi99.tistory.com/entry/select-input등-form요소의-기본속성-초기화방법 [꿈을꾸고있는]

 

9.  input 박스 클릭했을 때 나타나는 테두리 없애기

input:focus {outline:none;}

 

10. textarea의 크기 조절 부분 없애기 

resize: none; 적용

 

11. textarea의 스크롤바 없애기 

overflow: hidden 또는 overflow:auto 적용 

 

12. div 오른쪽 정렬하기 

float: right 로 설정

 

CSS 외에

+) 리액트 아이콘 삽입 사이트

https://react-icons.github.io/react-icons

+) html에서 input box에 나타날 안내 내용

placeholder=" "

+) 리액트 Link to 로 연결할 때 button을 Link to로 감싸주면 됨.