애플 반응형 웹사이트 1

수평정렬
display : flex

align-items
기본값
nomal : stretch 높이값 지정 하지 않으면 교차축 최대한 늘어나려고 노력함.

아이템들이 수평 가운데 정렬
justify-content : center;

아이템들 수평 끝지점 (오른쪽) 정렬
justify-content : flex-end;

아이템들 균등 분활 정렬 (시작과 끝은 수평 끝지점. 나머지 공간을 남은 아이템이 균등하게 분활)
justify-content : space-between;

아이템들 균등 분활 정렬 (수평 공간 안 균등 분활. 아이템 양 옆으로 균등하게 여백이 존재.)
justify-content : space-around;

a 태그 밑줄 삭제
text-decoration: none;

배경이미지
background-image: url("")

배경이미지 크기
background-size: px;

배경이미지 배열
bacground-repeat: no-repeat;
기본값 repeat. 반복임 앞에 no-붙이면 반복 안됨.

이미지 가운데 정렬
background-position: center;
좌우위아래 정가운데.

이미지 삽입 후 글자 제거
text-indent: -9999px;
아예 지우는 것은 안됨. 대체 텍스트처럼 만들게 하기 위해서는
들여쓰기 내어쓰기. + 들여쓰기 - 내어쓰기. 값을 음수값을 넣어 화면에서 완벽하게 사라지게 만들어 준다.

가로너비와 내부 여백 합쳐진 크기 아닌 원하던 크기대로 사용하기
box-sizing: border-box;
요소의 크기 커지지 않게

단위가 다른 값 계산
calc 함수 사용.
calc(100% + 4px);

화살표 만들기
div 요소 하나 더 만들고 적당한 위치에 배치. position과 top right 이용.
그리고 before 라는 가상요소 선택자 추가

.arrow::before{
content:""  <<필수
크기 지정
transform: rotate(45deg); << 변환 속성을 통해 회전시켜줌 변환 기준점은 가운데 자동.
transform-origin: 0 0; << 변환의 기준점 변경 가능.  0 0 = x,y 축 0 지점으로 회전.
이후 원하는 위치 지정해주면 됨. (top right left..)
}

일부분만 보이기 div arrow 에
overflow: hidden;