서식 양식

box-shadow: x좌표 y좌표(역순. 위로갈수록 음수) 그림자크기 색깔지정;

 

 border : 모서리 상하좌우 모두 서식
- border-bottom : 아래 테두리
- border-top : 위 테두리

- border-radius: n;  모서리 곡선으로 서식

 

display: inline;   가로로 정렬

 

text-decoration: none;  a태그랑 사용 시 링크 밑줄 제거

color:   글자색 변경

 

font-size:        글자 크기 조절 : 설정된 값으로 폰트 크기 변경. px를 많이 사용

font-weight:      글자 굵기 조절 최대 900

 

background-color:   배경색

 

margin: 0 auto; 형식 가운데 자동 정렬 설정

 

text-align: center; /글자 가운데 자동 정렬

 

font-face의 경우 한 폰트만 지정하기 때문에 많이 사용x 
font-family의 경우 여러 폰트를 작성해준 다음 만약 맨 앞에 작성한 폰트가 존재하지 않는다면 두 번째 작성된 폰트가 적용

font-family: A, B, C 일 때 A폰트가 존재하지 않을 경우 B폰트 적용
- 제일 먼저 적용되는 것은 A폰트
- 영문 폰트를 정의할 때는 '', "" 를 붙이지 않음
- 영문 이외의 폰트를 정의할 때는 '',"" 붙여서 작성

- font-family에서 폰트의 우선순위는 개발자가 결정

 

font-face : 외부에 있는 폰트 가져올 때 사용 -> 주로 jsdelivr.com 또는 구글폰트 사용

 

width: 가로 길이 설정

 

height: 세로 길이 설정

 

display: 보이기 설정

- inline : 문자처럼 취급

- block : 한 줄 전체 차지

 

margin: 다른 태그와의 간격 벌리기

 

align-items: 요소들내의 모든 대상에 대한 설정

 

justify-content: center;   :   태그 안에서 한 가운데로 정렬

 

overflow : 내용이 넘칠 때 어떻게 보일지 선택하는 속성 
- x : 좌우로 보이게 설정 
- y : 세로로 보이게 설정
           

align-self: 안에 있는 태그들 정렬 상태 설정

 

- flex 태그의 축 정렬 설정 : 
    flex-end : 태그를 맨 끝부분(아래쪽 또는 오른쪽)으로 정렬하겠다
    flex-start : 태그를 시작부분(위쪽 또는 왼쪽)으로 정렬하겠다

 

flex-wrap : 아이템들이 여러줄에 걸쳐 나타나는 것을 결정

- wrap : 아이템들이 여러줄에 걸쳐 나타나는 것

- nowrap : 아이템들이 한줄에 걸쳐 나타나는 것