1)@media 태그
2) bootstrap (css프레임워크)
1) @media 태그
@media : 화면에크기별로 다른 css 적용이가능함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응협 웹</title>
<style type="text/css">
@media(max-width:599px){/*창의 가로길이 599px까지*/
body{background-color: red;}
}
@media(min-width:600px) and (max-width:999px){
/*창의 가로길이 600~999px*/
body{background-color: green;}
}
@media(min-width:1000px){ /*창의 가로길이 1000px 이상일 때*/
body{background-color: blue;}
}
</style>
</head>
<body>
<h1>@media태그 예제</h1>
<p>화면의 크기 별로 바탕색이 달라져요</p>
</body>
</html>
2)bootstrap
css를 매번 처음부터만드는것도 쉽지않다
그것을 해결할 수 있는 방법중 하나가 부트스트랩(bootstrap)이다
사용가능한 두개의 사이트를 보여주겠다
https://www.w3schools.com/bootstrap5/bootstrap_flex.php
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
열
flexbox 그리드 시스템을 통해 정렬, 순서 지정 및 오프셋을 위한 소수의 옵션으로 열을 수정하는 방법을 알아보세요. 또한 column 클래스를 사용하여 그리드가 아닌 요소의 너비를 관리하는 방법을
getbootstrap.kr
CDN 방식이 좀 더 간단함!!
<!--CDN 방식 : content delivery network.
인터넷상에서 바로 CSS 파일 전송받기-->
다음과같은 example을 복사붙여넣기해보겠다
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CDN 방식 : content delivery network.
인터넷상에서 바로 CSS 파일 전송받기-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Flex</h2>
<p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
</body>
</html>2-1) template 이용하는법
https://www.w3schools.com/w3css/w3css_templates.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
다음과 같이 기본적인 템플릿 등을 제공한다!!!
w3.css 혹은 부트스트랩을 들어가면 있다.
'부트캠프(HTML,CSS)' 카테고리의 다른 글
| 부트캠프32일차(css(layoutStyle)) (0) | 2025.03.18 |
|---|---|
| 부트캠프31일차(CSS) (0) | 2025.03.17 |
| 부트캠프30일 (HTML,CSS) (0) | 2025.03.14 |
| 부트캠프29일차(HTML) (0) | 2025.03.13 |