플렉스 박스
-align-items - 부모 태그 적용(flex) -> 자식요소 : stretch, flex- start(상단), flex(하단), center(가운데)
-align-self - 자식 요소 별 적용
-align-content : justify-content와 동일속성 - 하나의 행
-여러행에 걸쳐있는 경우 적용
-flex-wrap : wrap되어 있는경우
뷰포트
뷰포트: 화면에서 실제 내용이 표시되는 영역
1.뷰포트 지정하기
<meta name="viewport" content="<속성1=값>, <속성2=값>"-width : device-width
-height : device-height
-user-scalable : yes -> 축소,확대 조작 가능
-inital-scale : 처음 로딩시 화면 배율
-minimum-scale : 축소 가능 배율
-maximum-scale : 확대 가능 배율
미디어 쿼리
:CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해줌
1) 미디어 유형의 종류
@media screen and (min-width: 200px) and (max-width: 360px) {
...
}all: 모든미디어 유형
print: 인쇄장치
screen: 컴퓨터 스크린
2) 미디어 쿼리의 조건
width, height
min-width, minheight
max-width, max-height
orientation: 방향 장비
-portrait: 세로모드
-landscape: 가로모드
@media screen and (min-width: 300px) { /*300px 이상일 경우*/
body{
background: orange;
}
}미디어 쿼리 적용하기
link 태그 사용하기
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">화면 너비가 768px 이하일 때 적용할 태블릿용 스타일 시트 파일을 만들어 놓았다면 조건을 좀 더 추가가능하다.
