2021.05.28. 開発ログ

今日の勉強内容

6.メディア照会

- width에 따라 디자인의 변주를 줘서 다양한 디바이스에서 최적화된 화면을 볼 수 있게 한다.

.pc {
	color: red;
	font-size: 50px;
	background-color: pink;
}

@media (min-width: 600px) and (max-width: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}
}

- 이 때, @media 이하 내용은 상단의 .pc를 상속한다. 따라서 누락된 정보가 있을 경우 기존 .pc의 설정값을 따른다.

- 미디어쿼리를 사용할때 반드시 html head에 추가해주어야 하는 viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

以上のデバイス幅値を含むサイト
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

クロムブラウザ「開発者ツール」で、複数のマシンの画面をプレビューできます

他人が作ったきれいなサイトを集める場所
https://www.awwwards.com
本当にきれいなサイトがたくさんあって、世界が広くて、能力のある人がたくさんいて、
ここではChromeを使って自分の好きなサイトを開き、メディアの検索を見ることができます!

- pc 환경과 모바일 환경에서 보여주고자 하는 텍스트가 다를 경우 display: none 으로 설정하면 특정 환경에서는 디스플레이가 보이지 않게 설정할 수 있다.

      .pc {

          color: red;
          font-size: 50px;
          background-color: pink;
      }

      .mobile {
          display: none;
      }

      @media (min-width: 320px) and (max-width: 767px) {
          .pc {
              display: none;
          }

          .mobile {
              display: block;
          }
      }

- 모바일버전을 pc버전으로 만드는 것이 pc버전을 모바일버전으로 만드는 것 보다 쉽다. 실무 환경에서는 최초버전을 모바일버전으로 만들고 태블릿, pc버전으로 확장시켜나가는 경우가 많다. 모바일은 대부분 가운데 정렬 등으로 비교적 깔끔하게 만들어져있기 때문!

難しいところ&解決していないもの

오늘은 실습과제까지 나가지 않아서 아직 어렵다고 느낀 점은 없었다. 다만 display: none으로 모바일/pc환경에서 보여주고자 하는 내용이 다를때 내용을 감출 수 있다고 했는데, 들어가는 내용이 많고 복잡해지면 어떻게 활용할지 가늠이 안가서 조금 더 공부를 해봐야겠다.

解決方法

- 좋은 사이트 많이 많이 둘러보고 전문가들의 제작법을 익히자!

感想

- 아직까지는 나름 잘 따라가고 있다고 생각하는데, 이제 슬슬 어려워질 것 같아 무섭다^~^...
- 그래도 강사님이 진짜 천천히 기초부터 알려주셔서 강의만 성실히 들어도 못하진 않겠다는 생각이 든다. 뭐든 기본기부터 튼실히 하면 되겠지!