강의

1. 미디어쿼리

• 적응형 , 반응형 웹사이트

  • 태블릿이나 스마트폰으로 볼때 자연스럽게 변하는 웹사이트
  • 예시
    • 적응형
      • 뚝뚝 끊기면서 고정값으로 px값이 고정된거
      • Kidgao
    • 반응형
      • %값을 가지고 좀 자연스럽게 움직임
      • helbak
  • 최근에 두개를 섞어서 사용함

• 모바일네이버 같은건 아예 사이트를 따로 제작한건

• 스마트폰 태블릿 PC 대충의 값.

  • 320px ~ 768px미만 :스마트폰
  • 768px ~ 1024px미만 :태블릿
  • 1024px 이상~ :PC

• 작성 해보기

  .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;
  }}

  • 600px과 767px 사이에서 저렇게 변한단 의미
  • 이때 background-color를 넣지않으면 처음넣어놨던 pink 값을 따라감

• 미디어 쿼리를 사용한다면 항상 html에 meta태그를 추가해줘야함 viewport 라함

  <meta name="viewport" content="width=device-width, intial-scale=1.0">

  • name부분은 기기의 화면을 뜻함
  • content부분은 width을 화면에서 가져오고 scale을 항상 1.0으로 유지하겟다
  • w3school
    • 여기 드가서 한번 확인하기

• 각 기기의 width값 확인하기

  • https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

• 실무팁

  <h1 class="pc">PC Hello World</h1>
  <h1 class="mobile">Mobile Hello World</h1>

  • 이렇게 있을때 각각의 환경에 맞춰서 글씨 감추기

  • display를 활용한다

    	.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;
    		}}

  • 이러면 이제, 기본적으로 .mobile 은 none으로 안보이지만

  • 320px과 767px사이일때 pc를 none처리하고

  • mobile을 다시 다른 속성값으로 불러온다,

    • 현재는 h1태그가 원래 block값이니까 그렇게 함
    • 다른값을 넣어도 되긴함. ex) inline

• PC , 태블릿 , 모바일 사이트를 제작할때,

  • 모바일 > 태블릿 > PC순으로 제작하는게 편함

• 미디어 쿼리 응용

  	<h1>미디어쿼리 응용</h1>

  		h1{
  	font-size: 20px;
  	background-color: yellow;}	
  	/* max-width 1024px 미만*/
  	@media (min-width: 768px){
  	h1{
  		font-size: 40px;
  		background-color: pink;
  	}}
  	@media (min-width: 1024px){
  	h1{
  		font-size: 80px;
  		background-color: gray;
  	}}

  • 요로케하면 1024px 이상 값은 80px , gray

  • 1024~768px 은 40px , pink

  • 768px 밑으론 20px , yellow

    • 가 적용됨

  오늘했던거 Git

  2. 어려웠던점,

• 중간에 한번 해결안되는부분이 있어서, 질문을 했지만 굳이 신경을 안써도되는부분이라 한다.

  3. 해결법

• stackoverflow 에 질문했고 답변이 달렸다.

• 당장에는 크게 신경안써도될꺼같고

• 그뒤에 배웠던 응용부분에서 해결된 부분인거같다.

  4. 소감

• 점점 알아야할 코드가 늘어난다..

• 머리아픔 ㅠ