안녕하세요! 보라해바리기입니다~
CSS도 오늘 부로 벌써 마지막이더라고요?!
생활코딩님의 영상만 다 봤다고 해서 CSS 마스터가 된 건 아니지만
영상을 계속 보면서 느낀건 생활코딩님이 가르쳐주신 것 외에도
제 웹페이지에 구현하고 싶은 기술이 생겨난다는 것입니다.
좀 더 구체적인 설계에 불씨를 붙여준 셈이죠 ㅎㅎ
스킬적인 발전 이외에도 생각의 발전이 이루어진다는게 정말 뿌듯한 것 같아요!
오늘도 제가 배운 것을 복습하고 그 결과를 공유해보도록 하겠습니다.
렛츠 기릿~
1. 미디어 쿼리
우리는 항상 전체 화면으로 페이지를 보지 않습니다.
예를 들어 과제를 할 때, 한 화면을 최소 2개로 분할하여
한 쪽은 과제 작성을 위한 워드 프로그램, 다른 한 쪽은 자료 검색을 위한 검색 엔진 화면을 띄우죠?
웹페이지의 크기가 변화할 때, 그에 맞게 웹페이지 내용의 배열도 바뀐다면 더 편리하고 효율적일 것입니다.
현재 우리가 사용하는 대부분의 웹페이지도 그런 기술을 구현하고 있고요.
그렇다면 CSS로는 이런 기술을 어떻게 표현할 수 있을까요?
미디어 쿼리라는 것으로 웹페이지의 가독성을 높일 수 있답니다!
예시를 통해 미디어 쿼리를 살펴보도록 하겠습니다.
@media ( min-width:800px ) {
div{
display:none;
}
}
즉, 화면의 (가로) 폭이 800px 보다 클 때, 화면에 보이는 것이 보이지 않게 하라! 는 의미입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 5px solid green;
font-size:60px;
}
@media(min-width:800px){ /* screen width > 800px*/
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
그렇다면 이 예시에서는 어떻게 해석 가능할까요?
@media (max-width:800px) {
div{
display:none;
}
}
화면의 (가로) 폭이 800px 보다 작을 때, 화면에 보이는 것이 보이지 않게 하라! 는 의미가 되겠죠!
- min-width : 숫자 == 화면 폭 > 숫자
- max-width : 숫자 == 화면 폭 < 숫자
min 과 max는 직관적으로 봤을 때, 헷갈릴 수 있어요.
하지만 min과 max 2가지 밖에 존재하지 않으니 직접 실행해보면서 익히는 것도 나쁘지 않은 것 같아요!
저도 처음에는 min과 max가 많이 헷갈렸거든요..ㅎㅎ
역시 어떤 것이든 많이 접해보는게 익숙해지는 방법이 아닌가 싶어요~
위에서는 display를 보이지 않게 하라는 하나의 결과만을 기술했다면
미디어 쿼리를 이용해서 조건에 부합할 때, 여러 결과를 한 번에 보이도록 할 수 있답니다.
이전에 제가 만든 선들은 화면을 작게 했을 때는 오히려 비효율적일 수 있어요!
그래서 화면이 일정 크기보다 작아지면 선들을 제거하는 작업을 해보았답니다~
@media(max-width:800px) {
#grid{
display:block;
}
ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}
이는 화면의 폭이 800보다 작을 때
- grid에 속해있는 display를 블럭(부분)으로 만들고
- 목록의 오른쪽 경계를 없애고
- h1 제목의 아래쪽 경계를 없애라
는 의미를 지니고 있어요!
실행 화면을 보며 비교해보니 차이가 금방 보이죠?!
2. CSS코드의 재사용
미디어 쿼리를 통해 웹페이지의 효율적인 가독성을 얻게 되었지만
여러 파일에 같은 코드를 사용함으로써 코드 중복이 발생하게 됩니다.
앞서 배웠듯 코드가 중복되는 것은 그리 좋은 현상이 아닙니다.
그렇다면 어떤 코드를 사용해서 코드 중복을 막을 수 있을까요?
<link rel="stylesheet" href="style.css">
이렇게 디자인만을 관리하는 style.css 파일을 생성한후 link 태그로 이를 이어주면 된답니다!
이를 통해 코드가 줄어드는 효과를 볼 수 있고
수정사항이 생겼을 때, 일일이 각 파일에 수정을 하는 것이 아닌
css파일에서만 수정을 해주면 모든 파일에 적용되기에 더 효율적인 코딩을 할 수 있게 됩니다.
또한 네트워크 트래픽이 줄어드는 효과까지!
그래서 저도 style.css와 링크 태그를 사용하여 코드 중복을 제거하니 코드 자체도 훨씬 보기 좋았습니다.
body{
margin:0;
}
#active {
color: red;
}
.saw {
color:gray;
}
a {
color:purple;
text-decoration: none;
}
h1 {
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
h2 {
text-align: center;
}
ol {
border-right: 1px solid gray;
width: 120px;
margin: 0;
}
h4{
margin:0;
padding:20px;
}
#grid{
display:grid;
grid-template-columns: 200px 1fr;
}
#grid ol{
padding-left: 40px
}
#grid #article{
padding-left: 20px;
}
@media(max-width:800px){ /* screen width < 800px */
#grid{
display:block;
}
ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}
이는 style.css 파일의 코드이고요.
<!doctype html>
<html>
<head>
<title>보해의 인생_Before Elementary</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<div id="grid">
<ol>
<h4>목차</h4>
<li><a href="1.html"> 과거</a></li>
<li><a href="2.html"> 현재</a></li>
<li><a href="3.html"> 미래</a></li>
</ol>
<div id="ARTICLE">
<h2>보라해바라기의 과거</h2>
<h3>초등학교 전</h3>
<p> 사실 초등학교 전 기억은 잘 나지 않는다.
그래서 어린이집, 유치원 이렇게 세부적으로 시기를 나누지 않고 "초등학교 전"이라고 통칭하였다.</p>
<p><img src="child.jpg" width="450">
<br>한 가지 기억나는 것은 <u>4살 때 학예회를 하다가 울었던 것</u>이다.
그 당시, 한복을 입고 친구들과 같이 춤을 췄는데 보해의 독무 파트가 있었다.
친구들이 쪼그려 앉아 길 모양을 만들어주면 그 길을 지나가면서 친구들에게 말을 거는 시늉을 하는 춤이었다.
중간 쯤 까지는 잘하다가 갑자기 울음을 터뜨려서 학예회가 웃음바다가 되었다.
그 당시 보해는 많이 부끄럽고 무서웠나보다.
모두가 웃었던 그 때, 보해의 부모님은 보해의 마음을 진심으로 어루만져주며 용기를 주었고 그에 힘입어 보해는 무대를 무사히 마무리하였다.</p>
<p><a href="1.html">이전</a></p>
</div>
</div>
</body>
</html>
확실히 저번 코드보다 코드의 양이 줄었죠?
오늘은 내용적인 측면도 좀 덧붙여봤어요!
제가 기술적인 것에만 집중하고 있다는 생각이 들어서.. ㅎㅎ
이제 JavaScript를 배울 차례인데 이 부분이 제일 기대되는 것 같아요.
내가 사용하는 웹페이지와 더 유사하게 가고 있어 뿌듯하고 설레는 기분?
JavaScript도 열심히 들어봐야겠어요!
오늘은 여기서 글을 마무리 하도록 하겠습니다~
'HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 모각코 _ 2주차 (0) | 2021.11.24 |
|---|---|
| [HTML & CSS] 모각코 _ 1주차 (0) | 2021.11.24 |
| [CSS] 생활코딩 8~11 _ 박스모델, 그리드 (0) | 2021.07.07 |
| [CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자 (1) | 2021.07.06 |
| [HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석 (1) | 2021.07.05 |
댓글