1. 반응형웹
동일한 url에서 디바이스 화면 크기에 따라 레이아웃이 달라진다.
- 미디어 쿼리 : 뷰포트 너비를 이용하여 조건을 모두 만족하는 경우 웹사이트의 스타일 시트를 수정한다. 뷰포트는 탭 제외한 모든 내용 부분을 의미한다.
- breakpoint : 반응형 웹사이트 작업 기준이 되는 중단점을 의미한다. 절대적인 규격이 있는 것은 아니다.
@media screen and ( 조건문 2 ){
스타일 시트 적용하기
}
/* 조건문 1과 조건문 2 */| 모바일 | ~ 767px |
| 탭 | 768px ~ 1023px |
| 컴퓨터 | 1024px ~ |
2. 상한선과 하한선
- max-width : 상한선을 의미한다.
- min-width : 하한선을 의미한다.
중앙선이 상한선인 경우에는 노란색 부분을 의미하고, 하한선인 경우에는 초록색 부분을 의미한다.
3. 제일 높은 값과 제일 낮은 값
- max : 제일 높은 값을 출력한다. 경우에 따라 항상 다르다.
- min : 제일 낮은 값을 출력한다. 경우에 따라 항상 다르다.
4. html 코드
<!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" />
<link rel="stylesheet" href="./responsive.css" />
<title>Responsive Web</title>
</head>
<body>
<div class="container">
<span class="content">안녕하세요!</span>
</div>
</body>
</html>5. css 코드
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 70px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 700;
}
/* 반응형 웹 제작하기. */
@media screen and (max-width: 767px) {
.container {
background-color: violet;
}
.content:after {
content: " 저는 mobile입니다.";
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
background-color: deeppink;
}
.content:after {
content: " 저는 tablet입니다.";
}
}
@media screen and (min-width: 1024px) {
.container {
background-color: deepskyblue;
}
.content:after {
content: " 저는 pc입니다.";
}
}6. css 강의 수강 완료
css는 사용하다 보면 충돌도 많이 일어나고, 개념적으로도 정말 헷갈리는 부분 많았었는데 이 강의를 수강하면서 많이 이해가 되었다. 앞으로 배운 것을 잘 이용해야겠다.
'web > html css' 카테고리의 다른 글
| [패스트캠퍼스] 국비지원 5일차 학습일지 (0) | 2023.05.09 |
|---|---|
| [패스트캠퍼스] 국비지원 3일차 학습일지 (0) | 2023.05.07 |
| [css] grid Layout (0) | 2023.03.20 |
| [css] html 요소에 애니메이션 주기 (0) | 2023.03.19 |
| [css] position (0) | 2023.03.19 |