[패스트캠퍼스 수강후기] 프론트엔드 강의 24회차 미션

23. Github 따라 만들기 예제 실습에서 오늘은

38번째 클립에서부터 49번째 클립까지 들었다

 

오늘은 모든 디바이스에서 작동될 수 있도록 반응하는 화면을 만드는 작업을 배웠다

뷰포트의 너비가 일정크기 이상으로 줄면 화면이 아예 전체적으로 변해버리는데

오늘은 태블릿사이즈까지 만들었을 때 변형시키는 방법에 대해서 실습했고

내일은 더 작은 폰 사이즈까지 갔을 때 변형시키는 방법에 대해 실습할 예정이다

media 쿼리

 

*

@media

다양한 미디어 유형이나 장치에 따라 서로 다른 스타일 규칙을 적용

(예)

@media 미디어타입 and (미디어특성) { CSS 코드 }

@media screen and (max-width: 1200px) {body {Color: red;}}

1200이하일 때 바디컬러 레드

[미디어타입]

All : 모든 타입에 적용 / 기본값

Screen : 컴퓨터 화면, 타블렛, 스마트폰 등

Print : 인쇄적용

[미디어특성]

Width : 뷰포트 가로너비

Max-width : 뷰포트 최대 가로너비 (이하) -------------------> 제일 많이 씀

Min-width : 뷰포트 최소 가로너비 (이상) -------------------> 제일 많이 씀

Height : 뷰포트 세로 너비

Max-height : 뷰포트 최대 세로 너비 (이하)

Min-height : 뷰포트 최소 세로 너비 (이상)

Orientation : 뷰포트 방향 (portraint, landscape)

기타…

 

*

Media(Grid) options

디바이스 종류에 따른 단위는 '기획 / 디자인' 단계에서 결정하는 것이 효과적

Large Devices(Desktops) : 1024px 이상

Medium Devices(Tablets) : 1024px 이하

Small Devices(Tablets + Phones) : 768px 이하

(대략적인 구조이다…애플기준으로)

Bootstrap- = > documentation => layout => grid => grid option

뷰포트 크기에 따라 달라짐

*

CSS파트 맨 밑에서 시작

 

@media (max-width: 1024px) {

/* HEADER */

/* 선택자 우선순위 */

header.section .inner {

  max-width: none; -------------------> 초기화

  height: auto;

  padding: 0 20px;

}

header .menu-group,

header .sign-group {

  float: none;

}

header .menu-group {

  display: block;

}

header .logo {

  padding: 12px 0;

}

header .main-menu {

  display: block;

  margin-top: 10px;

}

 

header .main-menu li {

  border-top: 1px solid #e5e5e5;

}

header .main-menu li a {

  padding: 16px 0;

}

header .sign-group {

  display: block;

  padding: 10px 0 20px;

}

header .btn-group {

  display: block;

}

header .btn-group .btn {

  justify-content: center;

}

header .btn-group .sign-in {

  margin-right: 0;

  margin-bottom: 12px;

}

#search-form {

  margin-top: 12px;

  margin-right: 0;

}

#search {

  width: 100%;

  height: 42px;

  text-align: center; -------------------> 가운데 정렬

}

header .sub-menu {

  margin-top: 12px;

  margin-right: 0;

  justify-content: center;

}

/* 토글될 요소들만 `toggle`클래스 부여 */ ------------------->  토글 HTML float right, left 옆에 toggle추가

<div id=”toggle-btn”>Header

토글 부분 안보이게

header .toggle {

  display: none;

}

header .toggle.on { -------------------> 자바스크립트

  display: block;

}

/* 토글 버튼 */

#toggle-btn {

  display: block; --à 세로형으로 변경

}

/* VISUAL */

.section--visual {

  background-image: url("../img/bg-small.jpg");

}

.section--visual .inner {

  max-width: none;

  padding: 80px 20px;

  display: block;

}

.section--visual .summary {

  text-align: center;

  margin-right: 0;

  margin-bottom: 50px;

}

#sign-form { ------------------->  #은 고유해서 앞에 선택자 없어도 됨

  width: auto;

  max-width: 500px;

  margin: 0 auto;

}

/* FEATURE */

.section--feature .summary {

  padding: 66px 20px 0 20px;

}

/* Float을 사용한 방법 */

.section--feature .tiles ul {}

.section--feature .tiles li {

  max-width: 50%;

}

/* Grid를 사용한 방법 */

/*

  .section--feature .tiles ul {

    grid-template-columns: repeat(2, 1fr);

  }

  .section--feature .tiles li {}

*/

.section--feature .tiles li:nth-child(2) {

  border-right: none;

}

.section--feature .tiles li img {

  padding: 14px 30% 24px;

}

/* WHERE IS GITHUB */

.section--where-is .inner {

  max-width: none;

  padding: 80px 20px 0 20px;

}

/* PRICING CARD */

.section--pricing .inner {

  max-width: none;

  padding: 80px 20px;

}

.section--pricing .card .cell2 {

  font-size: 20px;

}

/* FOOTER */

footer .inner {

  padding: 50px 20px;

}

footer .logo {

  display: none;

}

 

 

 

 

*

자바스크립트 부분

Write JavaScript code.

(function (window, document) {

  'use strict';    ------------------->  자바 문법을 지키겠다

  const $toggles = document.querySelectorAll('.toggle'); // Return NodeList

  const $toggleBtn = document.getElementById('toggle-btn'); // Return Element

  $toggleBtn.addEventListener('click', function () {    ------------------->  버튼을 클릭했을 때, 이벤트

    toggleElements();

  });

  window.addEventListener('resize', function () { -------------------> 브라우저에 리사이즈 될 때 작동한다

    if (window.innerWidth > 1024) {

      offElements(); -------------------> 토글을 꺼주세요

    }

  });

  function toggleElements() {

    [].forEach.call($toggles, function (toggle) {   ------------------->  모든 토글에 대해서 반복

      toggle.classList.toggle('on'); -------------------> 토글엘리먼트를 계속 할 수 있게

    });

  }

 

  function offElements() {

    [].forEach.call($toggles, function (toggle) {

      toggle.classList.remove('on');

    });

  }

})(window, document);

 

 

*

HTML에 마지막에 defer추가해서

Html이 다 뜨고나서 자바 실행하도록

 

 

*

모든 CSS를 새로 저장해서

medium쿼리를 새로 저장

<link rel=”stylesheet” media=”(max-width: 1024px)” href=”CSS/main_medium.css”>

로 쓸 수도 있음

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스