[원티드 9월] 태블릿 웹사이트 개발하기

원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다. 

평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다. 

 

 

미디어쿼리 기본

---

1. HTML link 태그로 사용

<link rel='stylesheet' type='text/css' media='조건' href='style.css'>

2. CSS @media 키워드로 사용

@media only all and (조건) and (조건) {}

• only: 특정 미디어에만 적용하는 경우, screen | print를 지정하는 경우
• all(기본값, 생략 가능): 미디어 설정, screen | print 를 주로 사용
• and: 미디어쿼리의 조건은 모두 and 키워드로 연결
• 조건
  • 반드시 괄호 안에 조건을 입력해야 함
  • min: 최소값이 일치할 때, 입력한 사이즈 이상부터 적용(확장 개념)
  • max: 최대값이 일치할 때, 입력한 사이즈 이하까지 적용(축소 개념)

 

미디어쿼리 분기

---

 

미디어쿼리 활용

---

1. 고해상도 디스플레이가 아닌 경우

@media screen and (-webkit-max-device-pixel-ratio: 1) {}

2. 기기가 세로인 경우

@media screen and (orientation:portrait) {}

3. 기기가 가로인 경우

@media screen and (orientation:landscape) {}

4. 입력 방법이 hover을 지원하지 않는 경우, 오직 터치스크린

https://codepen.io/marshall-ku/pen/jOGOdWa

@media (any-hover: none) {}

 

 

태블릿 구간 설정

---

@media (min-width: 768px) {}

• 일반적으로 768px부터 적용(아이패드 세로 사이즈 기준)
• 0 ~ 767px까지는 모바일, 768px부터 태블릿
• 768px은 스마트폰 가로 사이즈 중복 구간이 발생되기 떄문에 정확히 태블릿에만 적용하기 위해서는 다른 조건을 추가 해야함

 

강의를 들으면서 느끼는건데, 이전에 했던 프로젝트에서 반응형을 적용하지 않았던 프로젝트를 반응형으로 구축을 해볼 예정이다.