뷰포트
접속한 기기화면에 맞추어 확대하거나 축소해 표시 할 수있는 기능
<head></head>태그 사이에 작성
<meta name="viewport" content=t속성1,속성2....>
/*가장많이 사용하는 형태, 스마트폰에맞추고 초기화면 배율 1*/
<meta name="viewport" content="width=device-width,initial-scale=1">
그리드시스템
화면을 여러개의 칼럼으로 나누어 필요할 때마다 칼럼들을 묶어 배치하는 방법
화면 너비 값에 따라 '960 그리드시스템 ', '1200그리드 시스템'등으로 나뉨
컬럼 개수에따라 12,16,24 칼럼 그리드 시스템으로 나뉨
주로 960픽셀 12칼럼의 그리드 시스템 사용
가변 그리드 레이아웃을 사용할 경우 너비값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로
가능하면 간결한 디자인을 사용하는것이 좋음
고정 그리드 레이아웃
화면 너비를 일정하게 고정하고 레이아웃만듦
문서의 맨 바깥부분을 #wrapper요소로 묶고 너비를 960px로 지정
화면 너비가 좁아질 경우 내용의 일부가 가려질 수 있음
<style>
#wrapper {
width:960px;
margin:0 auto;
}
header { /* 헤더 */
width:960px;
height:120px;
background-color:#066cfa;
border-bottom:1px solid black;
}
.header-text{
font-size:40px;
color:white;
text-align:center;
line-height:120px;
}
.content { /* 본문 */
float:left;
width:600px;
height:400px;
padding:15px;
background-color:#ffd800;
}
.right-side { /* 사이드 바 */
float:right;
width:300px;
height:400px;
padding:15px;
background-color:#00ff90;
}
footer { /* 푸터 */
clear:both;
height:120px;
background-color:#c3590a;
}
</style>가변 그리드 레이아웃
전체를 감싸는 요소의 너비를 %로 변환(화면에 꽉차게 하고싶을경우 100%)
전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산
(요소의 너비/콘텐츠 전체를 감싸는 요소의 너비) * 100
ex) 본문영역 계산 (600px/960px)*100=62.5%
<style>
#wrapper {
width:96%;
margin:0 auto;
}
header { /* 헤더 */
width: 100%;
height: 120px;
background-color: #066cfa;
border-bottom: 1px solid black;
}
.header-text{
font-size:32px;
color:white;
text-align:center;
line-height:120px;
}
.content { /* 본문 */
float:left;
width:62.5%;
height:400px;
padding:1.5625%;
background-color:#ffd800;
}
.right-side { /* 사이드 바 */
float:right;
width:31.25%;
height:400px;
padding:1.5625%;
background-color:#00ff90;
}
footer { /* 푸터 */
clear:both;
width:100%;
height:120px;
background-color:#c3590a;
}
</style>
가변 레이아웃과 가변요소
가변 글꼴
em
부모 요소 폰트의 대문자 M너비를 1em으로 지정. 1em=16px
<style>
#wrapper {font-size:12px;} /*기준*/
.header-text{font-size:2em;} /* 사이즈 24*/
.fluid-text {font-size:1.5em;} /* 사이즈 36*/
</style>
rem
em 단위는 부모요소가 중첩될경우 글자 크기가 계속 달라짐
rem은 처음부터 기본크기를 지정하고 그것을 기준으로 글자크기 지정
<style>
body {font-size:16px;} /*기본크기 */
#wrapper {font-size:12px;} /*영향주지않음 */
.header-text{font-size:2rem;} /*사이즈 32*/
.fluid-text { font-size:1.5rem;}/*사이즈 24*/
</style>
가변이미지
브라우저 창의 너비가 변하더라도 이미지 너비값은 변하지않음
->브라우저 화면 너비를 줄일 경우 이미지 일부가 가려짐
가변이미지로 만들면 창의 너비에 따라 이미지 너비도 조절됨
css이용한 방법 max-width : 100%로 지정
단점:이미지를 줄여도 고해상도 이미지의 용량은 그대로기때문에 모바일경우 부담
<img>태그의 srcset 속성 : 이미지 크기+해상도
<picutre> +<source>태그 :이밎 크기 +해상도
가변비디오
css 사용해 max-width:100%로 지정
'개발 > CSS' 카테고리의 다른 글
| 플렉스 박스 (0) | 2022.09.06 |
|---|---|
| CSS 미디어 쿼리 (0) | 2022.09.03 |
| CSS3와 애니메이션 -변형 (0) | 2022.08.28 |
| CSS선택자 가상클래스와 가상요소 (0) | 2022.08.25 |
| CSS 선택자 -연결 , 속성 (0) | 2022.08.18 |
