[HTML] 반응형 화면 만들기

유하민 2025. 5. 16. 10:15

2025. 5. 16. 10:15

뷰포트 설정

<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

일상