고정 헤더 영역
상세 컨텐츠
본문
반응형
뷰포트 설정
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
</head>
<body>
.
.
.
</body>-
- width=device-width : 사용자가 접속하는 기기(디바이스)의 크기에 맞춰 뷰포트의 너비를 조종해준다.
- width=device-height : 사용자가 접속하는 기기(디바이스)의 크기에 맞춰 뷰포트의 높이를 조종해준다.
- inital-scale : 기본 스케일의 초기 배율. 1.0이 기본, 2.0이면 2배 확대, 0.5는 1/2로 축소
- user-scalable : yes는 사용자가 화면 확대/축소 가능, no는 불가능. 기본값은 no
- minimum-scale : 사용자가 축소할 수 있는 최소 축소값. 기본값은 0.25
- maximum-scale : 사용자가 확대할 수 있는 최대 확대값. 기본값은 5.0
가변 그리드
: css에서 width를 %로 설정하여 웹페이지에서 화면의 크기가 달라짐에 따라 화면에 맞춰 달라지는 기능을 함
<style>
nav {
width : 25%;
float : left;
}
section {
width : 75%;
float : left;
}
</style>
<body>
<header> 주제 </header>
<nav>
<ul>
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ul>
</nav>
<section> 콘텐트 내용 </section>
</body>
calc() 함수
: 가로방향으로 놓인 요소들 중 일부 요소만 반응형으로 만들어주는 함수
calc(100% - 같은 행에서 고정되는 요소의 픽셀 크기)
<style>
nav {
width : 100px;
float : left;
}
section {
width : calc(100% - 100px);
float : left;
}
</style>
<body>
<header> 주제 </header>
<nav>
<ul>
<li> 메뉴1 </li>
<li> 메뉴2 </li>
<li> 메뉴3 </li>
</ul>
</nav>
<section> 콘텐트 내용 </section>
</body>
em 단위
: 글자의 크기를 나타내는 단위 (스마트폰 위주의 글자 크기 단위)
1em = 16px
12열 그리드 시스템
: 하나의 행을 12개로 나누어 비율을 정할 때 사용하는 속성
<style>
* { margin:0; padding:0; box-sizing:border-box; }
.col_1 { width: 8.33% }
.col_2 { width: 16.66% }
.col_3 { width: 25% }
.col_4 { width: 33.33% }
.col_5 { width: 41.66% }
.col_6 { width: 50% }
.col_7 { width: 58.33% }
.col_8 { width: 66.66% }
.col_9 { width: 75% }
.col_10 { width : 83.33% }
.col_11 { width : 91.66% }
.col_12 { width : 100% }
[class*="col_"] {
float: left;
padding: 15px;
}
</style>
[class*="col_"] 선택자 : 클래스 이름이 "col_"가 포함된 모든 요소를 선택자로 지정
아래 표는 <body> 태그에서 각 클래스로 지정하면 화면에 적용되는 예시
| col_3 | col_3 | col_3 | col_3 | ||
| col_6 | col_2 | col_2 | col_2 | ||
| col_9 | col_1 | col_2 | |||
| col_12 | |||||
nth-child() 함수
: li 요소를 지정할 수 있다.
<style>
.main li { float: left; height: 200px }
.main li:nth-child(1) { backgroind-color: blue; }
.main li:nth-child(2) { backgroind-color: red; }
</style>
<body>
<ul id="main">
<li> 2번 내용 </li>
<li> 2번 내용 </li>
</lu>
</body>
미디어 쿼리 @media only screen and ( ) { }
: 웹과 앱의 화면 노출을 다르게 해줄때 사용하는 기능
아래는 웹(데스크톱)에서는 배경이 파랑(blue)으로 나오게, 스마트폰(600px미만 화면)에서는 빨강(red)으로 나오게 설정
<head>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<style>
body { background-color: blue; }
@media only screen and (max-width: 600px) {
body {
background-color: red;
}
}
</style>
</head>
선택자 ::after
: float, clear를 사용할 때 해당 요소가 아닌 해당 요소 다음부터 기능을 적용시키는 설정
반응형
'STUDY > HTML' 카테고리의 다른 글
| [HTML/CSS] CSS 선택자 (0) | 2025.05.14 |
|---|---|
| [HTML/CSS] CSS 박스모델 (0) | 2025.05.14 |
| [HTML/CSS] CSS 속성 (0) | 2025.05.14 |
| [HTML] <input> 입력, 선택, 버튼 (0) | 2025.04.30 |
| [HTML] 경로이동 <a> (0) | 2025.04.25 |
