실습(실습기록)
- 이미지 슬라이더 만들기
- 테이블 스타일링
- 드룹다운 메뉴 만들기
- 배경이미지만 투명하게 처리하기
반응형 웹이란?
하나의 사이트 페이지로 데스크톱(컴퓨터), 스마트폰, 스마트패드 등 접속하는 장치(디스플레이 종류)에 따라
요소의 크기 및 배치, 표시 등을 자동으로 변환하도록 웹
html head 태그의 meta 태그에 viewport를 설정하여 반응형 웹 페이지를 제작
meta 태그란?
해당페이지의 정보(메타데이터)를 제공하기 위해 사용하는 태그
사용자에게 보여지는 태그는 아니다.
브라우저에게 작업을 지시하는 태그, 데이터의 데이터
속성종류)
1. name : 메타데이터의 종류를 지정하는 속성
2. content - name에 따라 분류된 메타데이터의 내용을 작성하는 속성
name 주요속성값
- description : 페이지에 대한 설명(이 페이지는 어떻게 만들어졌으면, 무엇 때문에 작성되었다는 것을 나타냄)
- author : 페이지 작성자 이름(워터마크)
- keyword : 검색 엔진용 키워드(크롤링할 때 사용됨)
- viewport : 반응형 웹 페이지임을 표시(넣어주어여 반응형으로 동작한다)
+ viewport : 반응형 웹을 위한 meta 속성
- width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정
- initial-scale=1.0 : 처음 페이지 오픈 시 원래 크기를 사용 (0.0~1.0)
- minumun-scale : 줄일 수 있는 최소 크기 (줌 기능 사용 시) 0 ~ 10, 보통 스마트폰, 스마트패드에서만 사용
- maximun-scale : 확대할 수 있는 최대 크기 (줌 기능 사용 시) 0 ~ 10, 보통 스마트폰, 스마트패드에서만 사용
- user-scalable : 확대/축소 기능 여부(yes/no)
미디어 쿼리(media query)
반응형 웹에서 CSS를 구분하여 작성하기 위한 쿼리
@media 키워드로 영역을 설정하여, 데스크탑 화면 또는 모바일 화면 시 적용할 CSS 스타일을 작성
페이지는 하나지만 두 가지를 작성한다. (데스크탑용/모바일용)
일반 CSS 스타일에 작성한 다음 위치(문서의 아래쪽, 밑쪽)에 작성한다.
미디어쿼리 3단계형 분기점
화면의 너비 크기를 pc(데스크톱), 태블릿(스마트패드), 모바일(스마트폰) 3가지로 구분하는 분기점
1. pc : 1024px 이상
2. 태블릿 : 769px ~ 1023px(max-width : 1024px)
3. 모바일 : 768px 이하(max-width :768 px)
예) 반응형 웹페이지, 미디어쿼리 p12 개발자모드에서 보기
<!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>
<style>
body {
background-color: yellow;
}
@media only screen and (min-width: 769px) and
(max-width: 1024px) {
body {
background-color: chartreuse;
}
}
@media only screen and (max-width: 768px) {
body {
background-color: skyblue;
}
img {
display: none;
}
}
</style>
</head>
<body>
<img src="images/img_mountains.jpg"
width="600" height="500">
<h2>내가 만일 - 안치환</h2>
<p>내가 만일 하늘이라면 그대 얼굴에 물들고 싶어
붉게 물든 저녁 저 노을처럼 나 그대뺨에 물들고 싶어<br>
<br>
내가 만일 시인이라면 그댈 위해 노래하겠어
엄마 품에 안긴 어린 아이처럼 나 행복하게 노래 하고 싶어<br>
<br>
세상에 그 무엇이라도 그대 위해 되고 싶어
오늘처럼 우리 함께 있으니 내겐 얼마나 큰 기쁨인지<br>
<br>
사랑하는 나의 사람아 너는 아니 워 이런 나의 마음을<br>
<br>
내가 만일 구름이라면 그댈 위해 비가 되겠어
더운 여름 날에 소나기처럼 나 시원하게 내리고 싶어</p>
</body>
</html>
그리드
https://www.w3schools.com/css/tryresponsive_grid.htm
Resize the browser window to see that this grid will respond to the resizing, and always use 100% of the available space.
www.w3schools.com
<!DOCTYPE html>
<html lang="ko">
<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>반응형 그리드 사용 화면</title>
<style>
.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%; }
header {
background-color: lightcoral;
height: 200px;
}
section {
background-color: lightgoldenrodyellow;
height: 500px;
float: left;
}
aside {
background-color: lightgreen;
height: 500px;
float: right;
}
footer {
background-color: lightcyan;
height: 100px;
clear: both;
}
.a {
border: 2px solid sienna;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<header class="col-12 a"></header>
<section class="col-9 a"></section>
<aside class="col-3 a"></aside>
<footer class="coa-12 a"></footer>
</body>
</html>'공부기록' 카테고리의 다른 글
| 4월 14일 - 주소록 프로그램 구현 (0) | 2023.04.14 |
|---|---|
| 2월 28일 영역별 레이아웃 만들기 정답 + 사이트 레이아웃 만들기 (0) | 2023.02.28 |
| 공부팁 - 영타 연습 사이트 (0) | 2023.02.12 |
| 2월 10일 (2) 컴퓨터 기본 (0) | 2023.02.10 |
| 2월 10일 (1) IT용어 (0) | 2023.02.10 |
