2022. 8. 10. 15:01ㆍFE/CSS
반응형 디자인 - 생활코딩
반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항
opentutorials.org
이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다.
반응형 웹
PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다.
그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다.
그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다.
반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 뜻한다.
미디어 쿼리
미디어 쿼리는 반응형 디자인을 CSS로 구현하는 역할을 맡는다.
미디어 쿼리의 기본적인 사용법은 간단하다.
@media(화면의 크기와 관련된 조건){ 실행할 CSS 코드 }
@media라고 입력하고 ( ) 사이에 화면에 크기와 관련된 조건을 건다.
그리고 그 조건을 만족할 경우 실행할 CSS 코드를 { } 사이에 입력한다.
만약 화면의 가로길이가 800보다 크다면 보이지 않게 만들고 싶다면…
...
<style>
...
@media(min-width: 800px){
div{
display: none;
}
}
</style>
...
min-width: 800px란 screen width > 800px라는 것과 같다.
즉 가로가 800px은 넘는 경우에 { }에 위치한 CSS 코드를 실행한다.
반대로 max-width: 800px는 가로 길이가 800px보다 작은 경우에 실행한다.
실습
800px보다 클 경우, 800px보다 작은 경우 다르게 보이도록 만들어 보자.
기존의 코드에 아래 코드를 추가한다.
<style>
...
@media(max-width:800px){
#grid{
display: block;
}
ul{
border-right:none;
}
h1 {
border-bottom:none;
}
}
</style>
위의 코드를 복사해 붙여 넣어도 아무것도 변하지 않는 경우가 있다.
이 경우 붙여넣은 위치가 문제일 수 있다.
style 태그의 내부에서 서열은 늦게 위치할수록 높다.
즉 @media의 위치가 앞쪽에 있어서 서열이 낮아진 경우 적용되지 않을 수 있다.
그렇기에 style 태그의 가장 아래에 위치하면 잘 작동할 것이다.
올바르게 추가를 하면 작은 화면에선 웹 페이지 디자인이 좁아진 가로길이에 맞게 변화한다.
CSS 코드 재사용
2.html에 작성한 CSS 코드를 1, 3, index.html에도 적용하자.
- style 태그와 그 내용을 복사해 붙여넣는다.
- 형식을 맞춘다.
- id가 grid인 div 태그 생성
- id가 article인 div 태그 생성
이렇게 완성해도 되지만 문제가 있다.
작성한 CSS 코드가 모든 파일에 중복해서 작성된다.
중복을 최소화하기 위해서 우리는 style 태그를 제외한 순수 CSS 코드를 style.css라는 따로 파일에 저장할 것이다.
그리고 <ㅣink rel="stylesheet" href="style.css"> 코드를 html 파일의 head 태그 아래에 추가해서 두 파일을 연결해 줄 것이다. (rel : relationship)
이제 style 태그는 필요 없다. 지워라.
<!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>WEB - Oolong tea</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">차</a></h1>
<div id="grid">
<ul>
<li><a href="1.html" class="saw">홍차</a></li>
<li><a href="2.html" class="saw" id="active">우롱차</a></li>
<li><a href="3.html">녹차</a></li>
</ul>
<div id="article">
<h2>우롱차</h2>
<img src="oolangTea.jpeg" width="500" />
<p>
...
</p>
</div>
</div>
</body>
</html>
이제 style.css라는 별도의 파일에 저장된 css를 내려받아서 동작한다.
중복이 최소화되고 CSS를 하나의 파일로 관리할 수 있어서 유지보수에도 유리하다.
또 하나의 장점이 있다.
아래에서 설명하겠다.
캐싱 (cashe)
캐시(cache)는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.
캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.
캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있다.
캐시는 시스템의 효율성을 위해 여러 분야에서 두루 쓰이고 있다.
(출처 : https://ko.wikipedia.org/wiki/캐시)
웹 브라우저도 캐시를 사용한다.
우리가 특정 웹 페이지 접속할 때 필요한 파일을 서버로부터 다운로드한다.
이때 캐시를 사용하면 필요한 파일을 이미 갖고 있는 경우 새로 다운로드하지 않는다.
캐시를 사용한다고 가정한다.
만약 css를 html 내부에 넣는 경우라면 매번 새로 다운로드해야 한다.
반면에 style.css라는 파일로 분리한 경우라면 파일의 내용이 변하기 전까지는 새로 다운로드하지 않는다.
사용자의 입장에선 속도가 빨리 진다.
서비스 제공자의 입장에선 네트워크 트래픽을 줄여서 비용을 줄일 수 있다.
그러니 css 파일을 별도로 만들어 사용하자.
link tag
Definition and Usage
The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
<link rel="stylesheet" href="style.css">rel: relationship. Required. Specifies the relationship between the current document and the linked document (필수. 첨부된 파일과의 관계를 설명)
(출처 : https://www.w3schools.com/tags/tag_link.asp)
오픈튜토리얼 CSS 끝
'FE > CSS' 카테고리의 다른 글
| [CSS] Positioning, Flexbox (0) | 2024.03.10 |
|---|---|
| 2022-08-03 CSS_4 (Grid) (0) | 2022.08.04 |
| 2022-08-02 CSS_3 (Box model) (0) | 2022.08.02 |
| 2022-08-01 CSS_2 (Property, Selector) (0) | 2022.08.01 |
| 2022-07-30 CSS_1 (소개) (0) | 2022.07.30 |