29th
반응형_간단하게 사진과 메뉴, logo로 반응형 맛보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.07.05. responsive web(반응형) 01</title>
<link rel="stylesheet" href="../assets/css/common.css">
<link rel="stylesheet" href="./css/step01.css">
</head>
<body>
<header>
<div class="contaier">
<h1>LOGO</h1>
<i class="xi-bars mbtn"></i>
</div>
</header>
<nav class="gnb">
<ul class="container">
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<section class="step01">
<h2>우리나라 대한민국 만세만세만만세</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non rem voluptas obcaecati.</p>
<div class="container">
<figure><img src="./img/lesedilarona01.jpg" alt=""></figure>
<figure><img src="./img/lesedilarona02.jpg" alt=""></figure>
<figure><img src="./img/lesedilarona03.jpg" alt=""></figure>
</div>
</section>
<script src="../assets/js/jquery-1.12.4.min.js"></script>
<script src="./js/step01.js"></script>
</body>
</html><html>
html { font-size: 20px; }
body { font-size: 0.8rem;}
.container { display: flex; gap:30px; width: 60rem; margin: 0 auto; }
header { line-height: 5rem; }
.gnb { background: #f1f1f1; }
.gnb>ul { gap: 0; }
.gnb>ul>li { flex: 1; text-align: center; }
.gnb>ul>li~li { border-left: 1px solid #ddd; }
.gnb>ul>li>a { display: block; line-height: 2rem; }
.step01 { padding: 5rem 0; background: #ff0; text-align: center; }
.step01 h2 { font-size: 1.25rem; margin: 0 0 0.5rem 0; }
.step01 p { font-size: 0.75rem; margin: 0 0 1.5rem 0; }
.mbtn { display: none; }
@media screen and (max-width: 1200px) {
.container { width: auto; }
.step01 { background: #f00; }
}
@media (max-width: 768px) {
.container { padding: 0 0.75rem; }
.step01 { background: #369; }
}
/* screen and 생략 가능 */
@media (max-width: 560px) {
html { font-size: 16px; }
.mbtn { position: fixed; inset: 1rem 1rem auto auto; display: block; }
.gnb { display:none; background: #fff; }
.gnb>ul>li~li { border-left: none; border-top: 1px solid #ddd; }
.container { flex-direction: column; }
.step01 { background: #369; color: #fff; }
.step01 h2 { font-size: 7vw; }
.step01 p { font-size: 0.75rem; margin: 0 0 1.5rem 0; }
}
/* 글자가 흘러넘칠 때, font-size에서 vw를 써서 화면 사이즈가 바뀌어도 글자가 유지되게 함 ex메인슬라이드에서 슬로건 */
/* .gnb { display:none;}을 주고 js에서 애니메이션 주면 됨 */<css>
$('.mbtn').on('click', () => {
$('.gnb').slideToggle();
})<js>
디스플레이 블록 큰 박스(1200)는 사이즈를 안 준다. 높이는 오토(포지션 앱솔루트로 하는 경우 제외)
글자는 텍스르 얼라인으로 센터
글자와 글자 사이즈는 마진(패딩아님)으로 아래쪽만 준다. 위쪽ㄴㄴ
섹션 아래위 공간은 패딩값 같게 준다.
판매를 목적으로 하는 사이트는 글자를 작게, 공간은 많이 해서 이미지를 돋보이게.
정보를 많이 전달해야하는 경우는 패딩이 작아짐(관공서, 대학교)
| 📌📌반응형에서 가장 중요한📌📌 이미지를 2배정도(이미지 자체 크기가 아님/뷰포트 기준임) 뻥튀기 해줘야함 360*2=720(<-이거로 맞춤) 또는 640 이상으로 해줘야함 이미지가 커지면 트래픽도 커짐(=트래픽은 서버가 감당하는 돈) 이미지가 크게 들어가야, 작은 폰이든 큰 폰이든 이미지가 흐려지지 않고 보임 큰 폰일수록 화소가 높기 때문에 화소가 높아질수록 작은 이미지는 흐려짐 사이즈가 커진다고 가독성이 다좋아지는 것은 아님. 로고(경계 분명한)같은 건 사이즈를 줄여도 가독성이 안 나옴 =그래서 로고는 svg를 사용 |
'수업내용' 카테고리의 다른 글
| [수업내용정리] 2022.08.04 (1) | 2022.09.20 |
|---|---|
| [html, css, jquery] 반응형 기초(2) (0) | 2022.07.31 |
| [HTML, CSS, jQuery] 전체페이지 만들기_2022.06.20.MON ~ 2022.06.24.FRI (0) | 2022.07.31 |
| [HTML, CSS] 움직이는 라네즈들과 물방울 + iframe, 카카오맵 넣기 (0) | 2022.07.31 |
| [HTML, CSS, jQuery] 탭메뉴 만들어보기 (0) | 2022.07.31 |