<생활코딩 - WEB - WEB2 - CSS>
1. 미디어 쿼리 소개
1 반응형 웹, 반응형 디자인(Responsive Web)
1) 반응형 디자인 : 화면의 크기에 반응해서 최적화된 모양으로 알아서 바뀌게 하는 디자인
2) 다양한 크기의 컴퓨터 기기가 존재하는 현재, 웹 페이지의 각 요소들이 반응해서
알아서 동작하게끔 하는 반응형 디자인은 아주 중요하다.
3) CSS에서는 미디어 쿼리 (Media Query)라는 코드를 통해 반응형 디자인을 구현할 수 있다.
2 미디어 쿼리 코드
1) 아래 둘은 같은 내용이다.
- screen width > 800px
= screen 폭이 800픽셀보다 크면,
- @media(min-width:800px)
= screen 폭이 최소한 800픽셀이다.
3 이 명령 안에
1) { } 라는 코드를 입력하고
2) display:none; 이라는 명령어를 입력하면,
3) 800픽셀보다 작으면 내용이 나타나고, 800픽셀보다 크면 내용이 나타나지 않는다.
4) (명령어 뜻=“스크린 폭이 최소 800픽셀 이상이 되면, 디스플레이에 아무것도 나타나지 않게 하라”)
4 반대로
1) @media(max-width:800px)에 display:none; 이라고 하면
2) “screen 폭이 최대 800픽셀까지일 때, 디스플레이에 나타나지 아무것도 나타나지 않게 하라”는 뜻으로
3) 800픽셀보다 커야 내용이 나타난다. - 여기까지 공부한 후, -
영상 강의대로 코딩을 작성하다가, 화면에 구현이 안될 때 마음이 답답하다.
그러다가 내가 작성한 코딩을 차근차근 하나씩 체크하고 결국 강의 내용대로 화면이 구현되면, 와~ 라는 탄성이 나오면서 기분이 좋아진다.
2. 미디어 쿼리 써먹기
1 작은 화면에서 더 효율적으로 내용이 배치될 수 있도록 미디어쿼리 코드를 작성해보자.
1) 조건 만들기
- @media (max-width:800px) { } 작성
2 화면이 800px 보다 작아지면, 목록과 내용이 위아래 순서대로 올 수 있게 해보자.
1) 우클릭-검사-style 에서 '어떤 코드가 목록과 내용을 나란히 배치되도록 하는 코드인지' 확인
2) 목록과 내용이 “grid”라는 내용으로 묶여있는 점 확인
3) 미디어쿼리 코드 { } 내에, #grid {display:block;} 작성
3 목록과 내용을 분할하는 선을 삭제해보자.
1) 우클릭-검사-style 에서 ol {border} 코드가 선을 만드는 코드인 점 확인
2) ol {border-right: none;} 작성
4 제목과 목록,내용 사이의 선을 삭제해보자.
1) 우클릭-검사-style 에서 h1 {border} 코드가 선을 만드는 점 확인
2) h1 {border-bottom:none;} 작성
5 이로써, 800 픽셀보다 화면 폭이 좁아지면, 좁은 화면에서 더 가독성이 좋도록 내용 배치가 달라진다.
6 당연히, 800 픽셀보다 화면 폭이 넓어지면, 넓은 화면에서 더 가독성과 심미적인 부분이 있도록 내용 배치가 달라진다. 3. CSS 코드의 재사용
1 중복 제거의 필요성
1) css.html 파일에 작성했던 style 코드 내용을 모두 ‘1,2,3,index’ 모두에 복사, 붙여넣기 했다.
2) 웹페이지에서 각 링크를 클릭해보니, 모두 동일한 디자인이 적용되었다. 신기했다.
3) 그런데 극단적으로 생각해서 1억개의 파일을 모두 이렇게 복사, 붙여넣기, 수정을 해야한다면 너무 힘들 것 같다.
2 css 파일 만들어 중복 제거하기
1) style 코드를 제외하고 그 안에 있던 모든 내용을 “style.css”라는 파일에 붙여넣기해 저장했다.
2) 기존 ‘1,2,3,index,css’ 파일에 있던 style 코드 내용을 모두 삭제하고, 그 자리에 <link rel=“stylesheet” href=”style.css”> 라는 코드를 작성했다.
3) 이 링크 태그는 “이 웹페이지는 이 css 파일과 연결(link)되어있고, 그 파일을 이 웹페이지에 적용할거야”라는 걸 알려주는 태그이다.
4) 이 link 태그가 있는 html 파일이 1억개라도, css 파일에서만 수정해주면 1억개의 html 웹페이지 디자인이 모두 수정된다.
3 사용성도 높아지고, 네트워크적 측면도 훨씬 효율적이 된다. (다운로드, 캐싱 작업으로 네트워크 트래픽을 더 적게 사용하므로)
4 정보 기술에 있어 이처럼 재사용성과 가독성을 높이고, 유지보수를 편리하게 하는 것은 아주 중요하다. - 여기까지 공부한 후, -
코드를 잘 작성한 것 같은데 생각한대로 구현이 안될 때,
실패 원인을 파악하고 알맞은 코드로 바꿔 입력해서 생각한대로 구현이 되면,
진짜 너무너무 기분이 좋다.
“아 이래서! 그 코드가 맞았던거지!”하면서 ‘내가 올바르지 않은 코드를 입력해서 구현이 안되었을 뿐, 올바르게 입력하면 구현되는 일’이었다는 것을 알 때,
얼굴에 자연스레 웃음이 띄고 마음이 산뜻해진다.
또, style.css 파일을 통해 폭발적인 효율성과 효과를 보니, 우와 우와라고 감탄하게 된다.
나는 생각한 것보다 더 코딩과 잘 맞는 사람인 것 같다 :)
4. CSS 수업을 마치며
1 css의 많은 중요한 규칙들 중 뿌리가 되는 것은 ‘선택자와 속성’이다.
2 속성을 많이 알수록, 더 풍부한 표현력을 얻게 됨
3 선택자를 많이 알수록, 알고 있는 속성을 더 정확하게 표현할 수 있게 됨
4 공부한 것을 최대한 사용하면
> 공부의 효용에 뇌가 감탄함
> 부족한 것과 필요한 것을 내부로부터 느끼게 됨
> 검색, 질문 등으로 알아가다 보면, 기존에 배웠던 서로 무관하다 생각되었던 것들이 촘촘하게 연결됨
> 스스로 깨달아서 알게 되는 진정한 배움 시작
5 지금까지 배운 것들을 토대로 나만의 웹사이트를 만들어봐야 겠다!
💡 Software Engineer - F.E