[💻] 실습 - GGLAB

👀 Check-point

• 모바일 만들때 주의사항은?
• 실제 시안보고 마크업할 수 있는가?
• 모바일 시안 사이즈를 이해했는가?

---

📌 모바일 코딩

모바일은 with320 이렇게 고정된 px로 주지 않는다.

가로사이즈 px-> ❌
가로사이즈 100%-> ⭕

main뿐만 아니라 header 만들때도 같음

• 적응형 pc사이트 – with를 px로 주면됨
• 반응형,모바일 – calc, %가 많이나옴
  
  

💡 absolute, float 알아서 whith,hight가 들어간다.

따로 a태그에 display - block을 줄 필요가 없다

📌 실제 시안 사이즈

• 포토샵시안이 아니라면 640px,680px,760px의 시안을 받을일은 절대 없다. → 이미지 크기를 2배줄여서 코딩해야한다.
• 제플린,xd,피그마 류의 시안이라면 380px ,360px 사이즈를 받는다. -> 이미지가 2배 3배까지 지원이 가능한 프로그램이기 때문

- 640뜻하는게 뭘까? (320의 **두배사이즈**) 

- 320뜻하는게 뭘까? (가장작은 모바일기기를 기준으로 잡은것)

• 380, 768, 820 등등.. 여러가지 시안사이즈가 있다.
  -> 시대발전하면서 최소기준이 올라갔다
  
  

🤔 왜 두배를크게 왜줬죠? (포토샵일때)

• 2배 큰 이미지를 저장하려고!
• dpi(도트 퍼 인치) -> 1인치안에 들어가는 도트의 개수
• 2배 큰 이미지의 사이즈를 압축해서 쓰게되면 선명하게 나올수있다!
• 이미지50px → 25px써야한다. (촘촘하게 하려고)

💡 착각포인트

• 시안에서 320라고 해서
  -> with: 320px ❌
  -> margin: 320 auto; ❌
  -> w:100% 이렇게~! ⭕
• left:%, right:% ❌
  -> px ⭕

🔑 시안에서 640일때 640으로 코딩 ❌금지!!!❌

→ 이미지 사이즈를 키운거니 320시안으로 줄여야함⭕

✏ 시안사이즈 단축키

ctrl + alt + i

---

◾ pc

📝 특징 정리

웹접근성과 시각장애인들을 위해 순서대로 읽어 줘야한다.
1->2->3순으로 마크업하고 css로 3을 올려주면 된다.

✏ 푸터에서 주소쓸 때

mailto

<a href="mailto:phj@gglab.co.kr"></a> phj@gglab.co.kr</p>

✏ 푸터에서 전화번호 쓸 때

tel

<a href="tel:070-7733-5741">070-7733-5741</a>

---

오답✍(◔◡◔)✧

1. 버튼으로 넘어가는 건 a태그로!

<div class="btn prev"><span class="blind">이전</span></div>
<div class="btn next"><span class="blind">다음</span></div>

<a href="" class="btn prev"><span class="blind">이전</span></a>
<a href="" class="btn next"><span class="blind">다음</span></a>

---

2. 

<section class="sc-intro">
  <h2 class="blind">서비스소개</h2>

  <div class="intro-item">
    <h3 class="sc-title">About us</h3>
    <div class="inner">
      <div class="img-box">
        <img src="./asset/images/content/intro01.jpg" alt="">
      </div>
      <div class="txt-box">
        <p class="desc">
          좋은제품연구소가 추구하는 좋은 제품이란 5G를 만족하는 제품입니다.<br><br>
          좋은 생각(Good Think), 좋은 품질(Good Quality), 좋은 디자인(Good Design), 좋은 가격(Good Price), 좋은 서비스(Good Service)로 늘 소비자의 입장에서 제품을 바라보고 생각하며, 고객의 마음을 제품에 적용하고자 합니다.
        </p>
        <a href="" class="link-more">자세히 알아보기</a>
      </div>
    </div>
  </div>

About us가 소제목 느낌임으로 div가 아닌 h3태그를 사용한다.

---

3. a태그 오류

<li class="event-item">
  <a href="" class="event-box">
    <div class="img-box"><img src="./asset/images/content/rdbox01.jpg" alt=""></div>
    <div class="txt-box">
      <em>[2018.12.01 ~ 2018.12.26]</em>
      <strong>크리스마스 랜덤박스 증정 이벤트</strong>
      <p>좋은제품연구소가 크리스마스를 맞이하여 랜덤박스 증정 이벤트를 진행한다.  모니터와 TV 구입자를 대상으로 진행하는 이번 이벤트는 총</p>
    </div>
    <a href="" class="link-more">자세히 알아보기</a>
  </a>
</li>

a태그 안에 a태그를 쓸 수 없다! ❌
-> 밖으로 빼주기!

---

4. 

section마다 common-inner를 주는 오류

👌😆 해결방안

section마다 common-inner를 주는 것 보다 공통된 common-inner를 크게 감싸 안에 section들을 나열하는게 더 올바르다.

---

5. 

Best Reviews자체가 소제목임으로 blind를 따로주는 것이 아닌 Best Reviews를 h2로 준다.

<h2 class="blind">베스트 리뷰</h2>
-> <h2 class="sc-title">Best Reviews</h2>로 바뀌는게 맞다.

---

6. 

의미 없는 목록이 아닌데 ul,li가 아닌 리스트들을 다 a태그로 작성한게 오류

ul > li > a > span 태그로 마크업 수정

╰ (🔴'◡'🔴)💬

• a태그로 일렬 정렬은 목록이 아닌 아이콘과 같은 애들로 코딩하기
• 똑같은 width가 반복될땐 common-inner를 크게 잡고 그 안에 section으로 소분류 하는걸 잊지말자!
• 모바일 코딩할때 자꾸 width를 주게 되는데 common-inner에 가운데 정렬을 해주는게 헷갈리지 않게 코딩 할 수 있는것 같다.