개발세발
[새싹(SeSAC) 프론트엔드] day08 221026 수업 복습 본문
반응형 웹(responsive Web)
: 다양한 기기게 반응하는 웹사이트
- 사용자가 접속하는 화면에 따라 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌
(*예시)
국립현대미술관
www.mmca.go.kr
- 반응형의 사용여부는 사이트의 용도와 사용자가 주로 접속하는 기기에 따라 결정
: pc와 모바일용 웹사이트 사용자의 접속 빈도가 비슷한 경우 반응형 웹 사이트가 필요
➡️ 사이트를 하나만 만들어도 pc와 모바일 기기에서 모두 사용할 수 있음
(+) 반응형 웹사이트 구성 살펴보기
- 보통 상단 메뉴 노출이 사라지는 경우가 많음
- 관람∙참여/전시/교육 등의 메뉴란이 태블릿/모바일 버전으로 줄어드는 경우 사라지고 햄버거 버튼으로 함축됨
- 햄버거 버튼 클릭 시 아래의 화면(⬇️)처럼 오른쪽에서 왼쪽으로 슬라이드 되면서 메뉴가 활성화 됨
반응형의 장단점
| 장점 | 단점 |
| 기기의 화면 크기나 해상도에 영향 받지 않음 | 구 버전 브라우저와 호환성에 문제가 있을 수 있음 (지금은 다 호환되는 추세) |
| 화면 변화에 즉시 반응 | |
| 어느 기기에서도 사이트 주소가 동일 (ex. www.naver.com 와 https://m.naver.com/ 의 차이 |
사이트 디자인이 단순함 ➡️ 모바일용 화면으로 줄어드는 것을 감안해야 되기 때문에 화면 구성이 단순해지는 경향이 크다. |
| 유지 관리가 편함 (기기 마다 따로 페이지를 만드는 것이 아니므로 코드와 콘텐츠 유지가 간단하고 편리) |
뷰포트(viewport)
: 스마트 폰 화면에서 실제 내용이 표시되는 영역
➡️ 모바일 화면을 고려하지 않고 pc화면에 맞춰 제작하면 글자가 아주 작게 표시됨
- 뷰포트를 지정하면 기기의 화면 크기에 맞춰 내용을 확대 및 축소해서 표시 가능
** pc랑 모바일의 픽셀 표시 방법이 다름
뷰포트 작성
: <meta> 태그를 이용하여 <head></head>태그 사이에 작성
<meta name="viewport" content="속성1=값1, 속성2=값2, ...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
뷰포트 속성
뷰포트 단위
-보통은 vw를 많이 씀
미디어 쿼리(Media Queries)
: 사이트에 접속하는 기기별로 적용할 스타일 파일을 다르게 지정해주는 CSS의 모듈
(*) 예시 사이트
Media Queries
mediaqueri.es
@media [only | not] [미디어 유형](조건문)[and | , ](조건문){
실행문
}
- 이제 모든 브라우저에서 지원해주므로 only가 의미가 없음
- only, not 둘 다 안 써도 됨
** 미디어 유형의 종류
@media screen { /* 화면용 스타일 작성*/ }
@media print { /* 인쇄용 스타일 작성*/ }
@media screen and (min-width:768px) and (max-width:1439px) {
// 스타일 작성
}
➡️ 유형이 screen이고 너비값을 만족할 때 스타일 적용됨
** 가로모드, 세로모드
@media screen and (min-width:768px) and (orientation:landscape) {
// 스타일 작성
}
** 주의
1. and 구문 사용시 구문 뒤에 항상 공백을 '한 칸' 띄워줘야 함
@media all and (min-width:320px) { 실행문 }
2. min : 작 ➡️ 큰
max : 큰 ➡️ 작
@media all and (min-width:320px) {실행문} // min : 최소값이므로 320 이하부터가 아니라 최소 320까지!!
@media all and (min-width:768px) { 실행문 }
@media all and (min-width:1024px) { 실행문 }
**비어있는 범위가 있을 수 있으므로 주의할 것
미디어 쿼리 적용
1. 외부파일 연결
1) 링크방식
: CSS 파일 내에 미디어 쿼리를 작성한 후, <link> 태그로 연결
<link rel=“stylesheet” media=“미디어 쿼리 조건” href=“css_파일_경로”>
2) @import문
: <style></style> 태그 사이에서 사용
@import url(“css_파일_경로”) 미디어_쿼리_조건
2. 내부 파일에 작성
1) style 태그에 작성
<style media="조건"> {
// 스타일 작성
}
</style>
(예시)
<style media="screen and (max-width:320px)"> body {
background: orange; }
</style>
2) style 태그 안에 작성
<style>
@media 조건 {
// 스타일 작성
}
</style>
<style>
@media screen and (max-width:320px) {
body {
background:orange;
}
} </style>
** background-size 속성
| 값 | 설명 |
| cover | - 이미지 비율을 유지하면서 영역 전체에 꽉 차게 함 - 이미지가 잘릴 수 있음 |
| contain | - 원본 비율을 유지 - 영역 전체에 이미지가 채워지지 않을 수 있음 |
(*) 실습
[코드]
<!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>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="wrap"></div>
</body>
</html>#wrap{
margin: 0 auto;
height: 500px;
border: 3px solid #000;
}
@media all and (min-width:320px) {
#wrap{
width: 30%;
background-color: green;
}
}
@media all and (min-width:768px) {
#wrap{
width: 60%;
background-color: blue;
}
}
@media all and (min-width:1024px) {
#wrap{
width: 90%;
background-color: red;
}
}[결과]
** 다양한 아이콘이 필요할 때
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
your kits
(*) 실습
반응형 메뉴바 만들어 보기
[코드]
<!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>Document</title>
<link rel="stylesheet" media="screen" href="./style4.css" />
<script
src="https://kit.fontawesome.com/c21d7630fc.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="menuBar">
<div class="logo">
<a href=""><img src="./images/img3.jpeg" alt="로고사진" /></a>
</div>
<ul class="menuList">
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
<a href="#" class="hambtn"> <i class="fa-solid fa-bars"></i></a>
</div>
</body>
</html>/*전체 태그 초기화*/
* {
margin: 0;
padding: 0;
}
.logo img {
width: 100px;
height: 130px;
/* 이미지가 정중앙에 오도록 */
vertical-align: middle;
}
.logo a {
float: left;
padding-left: 20px;
}
.menuList {
list-style-type: none;
overflow: hidden;
margin-left: 140px;
float: left;
}
/*a 태그 편집*/
.menuList a {
color: black;
text-decoration: none;
}
.menuList li {
float: left;
font-size: 30px;
font-weight: bold;
line-height: 130px;
padding: 0 20px;
}
.menuBar {
height: 130px;
background-color: #feabb0;
overflow: hidden;
}
i {
font-size: 30px;
}
.hambtn {
line-height: 130px;
float: right;
padding-right: 30px;
color: #000;
display: none;
}
/* 태블릿 사이즈인 경우 */
/* 1. 메뉴 리스트 제거 */
/* 2. 햄버거 메뉴 노출 */
@media screen and (max-width: 768px) {
/* 1. 메뉴 리스트 제거 */
.menuList {
display: none;
}
/* 2. 햄버거 메뉴 노출 */
.hambtn {
display: block;
}
}
[결과]
(+) vscode setting 바꾸기
setting 단축키 : cmd(ctrl)+,
| User(사용자) | Workspace(작업 영역) |
| vscode에서 작업하는 모든 영역에 적용 | 현재 열린 폴더에만 적용 |
원하는 기능은 'Search settings'에서 검색해서 찾기
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅(수)
'직업훈련 > 새싹(SeSAC)' 카테고리의 다른 글
| [새싹(SeSAC) 프론트엔드] day10 221028 수업 복습 (0) | 2022.10.27 |
|---|---|
| [새싹(SeSAC) 프론트엔드] day09 221027 수업 복습 (0) | 2022.10.27 |
| [새싹(SeSAC) 프론트엔드] day07 221025 수업 복습 (0) | 2022.10.25 |
| [새싹(SeSAC) 프론트엔드] day06 221024 수업 복습 (0) | 2022.10.24 |
| [새싹(SeSAC) 프론트엔드] 1주차 회고 (0) | 2022.10.21 |
