센터 정렬 방법
text-align: center;margin: auto;- width 값 필수display: flex;,justify-content: center;,align-item: center;- 상하좌우
margin은 상하로 되지 않음 -> flex를 이용해야함
width를 주면 블록 속성이 없어짐
input 관련 팁
-
input은 기본이 inline이므로 나열되는걸 방지할 경우 div 태그를 씌워 block화
-
input의 기본 border-style: inset;
-
textarea 기본 resize
-
CSS selector - text 타입의 인풋 selector 입력 시
input[type="text"] {}
CSS selector
selector:first-child {}
selector:last-child {}
selector:nth-child(odd) {}
selector:nth-child(even) {}표기 방법 중 해당 태그의 첫번째 순서인지, 마지막 순서인지, 홀수/짝수인지 알 수 있는 셀렉터 표기법이 있음
media query
-
반응형 웹 구현 테크닉. 특정 조건에서 해당 CSS를 적용하라는 규칙을 줄 수 있음
-
@media으로 작성
각 파트별 의미
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}@media - media query 시작
only screen - 스크린이 있는 디바이스에 적용
and (max-width : 480px) - 조건
Font Awesome 이용하는 방법 1
-
하단의 링크를 html 파일
<head>태그에 넣기
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> -
사이트에서 원하는 아이콘의 이름 찾기
https://fontawesome.com/cheatsheet#brands -
아이콘명을 넣은 하단의 태그를 텍스트 입력 하듯 입력하기
<i class="fas fa-아이콘명"> -
CSS로 사이즈나 컬러 변경하면 완료!
기타 팁
* {
border: 1px solid red !important;
}-
크롬 개발자도구에서 style에 상단의 코드 입력 시 요소별로 보더가 생겨 구분하기가 쉬워짐
-
padding이든 margin이든 어떤 property를 써도 좋음
