Web Tech Concert
Flexible Layout 반응형 웹 만들기
‘Do it! 반응형 웹 만들기’ 저자 / 김운아
반응형 웹
모든 디바이스에서 또는 모든 환경에서 반응하는 웹. 또는 적절히 변화하는 웹.
흠? 말이 안되는 얘길.. ㅠ IoT 네트워크로 연결되긴 하지만 브라우저가 탑재된 물건들이 얼마나 있는가?
가변 그리드(Fluid Grid, Flexible Grid)
다양한 기기와 환경에 대흥하기 위해 가변적인 개념이 필요. 승원이 형이 만든 그리드가 가변그리드라고 볼 수 있겠지.
px는 이제 그만 %개념으로 가야한다. 간단한 공식 가변적인 요소로 만들 요소의 가로 너빗값 / 부모의 너비값 * 100 너비값 자체가 가로잖냐
마진과 패딩 또한 가변적으로 변해야한다. 근데 이방식은.. 너무 단순한 거 아닌가. 가변그리드와 동일하게 무조건 % 사용 마진값 / 부모의 마진값 * 100
가변적인 단위는 아니지만 대표적인 상대 단위 (dpi ppi 때문에 나온 개념) em 하지만 상속 문제로 골치가 너무 아프다. em은 부모가 아니라 자신을 기준으로 상속받는다..? spec 문서 확인
새로운 상대 단위 rem 이것도 공부를 해야겠군.. em단위와 비슷해 보이지만 최상위 루트(html)를 기준으로 상속한다. 상속헬에서 벗어 날 수 있다.
진정한 가변 단위 vw, vh, vmin, vmax 보이는 영역(viewport)를 기준으로 된다. 재밌네..
그럼 콘텐츠는 어떻게 가변적으로 할 것인가?
Contents의 종류 Image File, Video File, 위젯(동떨어져 있어도 따로 작동하는 것) 너비값과 최대 너비값들 100%로 설정하면 된다. 가끔 문제(IE가 문제) 높이값은 auto로 줘야 한다.(방어 코드)
유튜브나 비메오 같은 멀티미디어 콘텐츠의 경우 문제가 생길수 있다. 위와 같이 설정한 경우 비율이 유지되지 않는 문재가 발생한다. 참고로 video 태그는 문제가 발생하지 않는다.
해결법
유튜브는 16:9 비융르 이용한다. 16 / 9 로 해결이 가능하다. 그리고 * 100 결과값을 패딩갑으로 설정하라.
미디어 쿼리
미디어에게 혹은 기기에게 질문을 던지는것(query) 화면의 크기? 기기? 어떤 환경?(가로 세로) 등에 따른 것들.
@media [미디어 유형] [and 또는 ,] (조건문) {실행문}
주의할점 띄어쓰기 min은 특정크기 이상이라면 그렇게 작은 순에서 큰순으로 작성 max는 이하라면 이기에 작은 순애서 큰순으로 작성 개인적으로 min을 사용하는 것을 선호한다고 한다. 앞으로 디바이스가 점점 커질테니?
ViewPort 뷰포트
실제로 보이는 영역, 실제로 유저가 보고있는 영역 대부분의 스마트기기는 웹브라우저의 뷰포트 영역을 자동으로 조절한다. 미디어 쿼리는 뷰포트를 기준으로 작동한다. 그렇기에 제대로 작동하지 않을 가능성이 있다. 그러기에 실제 기기와 디스플레이 화면크기와 뷰포트 영역을 동일하게 해야한다??
해결방법 meta테그 사용
<meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
공식 기술은 아니다? width 뷰포트 영역의 너비값 initial-scale 초기화면 비율 minimum-scale 최소 축소 비율 maximum-scale 최대 확대 비율 user-scaloable 축소 확대 여부 // 최근 디바이스는 적용되지 않고 확대 축소가 다 가능하다.
플렉서블 박스
확장에 능톡한, 확장성이 있는 박스
Float
지금까지 구조(레이아웃) 설계는 float로 했다. 의미론 적으로 레이아웃 설계와 부합하지 않는다. 항상 문제가 발생한다.
플렉서블 박스
플렉서블 박스 부모가 디스플레이 플렉스 로 설정이 되면 자식 요소들은 자동으로 플렉스 아이템이 된다. 주축과 교차축 에 대해서 알아봐야한다. 주축이 가로 방향일 때면 플렉스 아이템은 가로로 배치된다.(Default) 주축이 세로일떈 세로로 배치.
좀더 자세히
| display | flex, inline-flex | 모든요소 |
| display | flex, inline-flex | 모든요소 |
flex-directoion row(default), row-reverse, column, column-reverse
flex-wrap ?? nowrap(default)- 박스를 한줄로 배치 wrap - 여러줄로 배치 wrap-reverse - 역방향ㅇ으로 여러줄
flex-flow 에서 여러 값을 설정 [flex-direction] [flex-wrap] 을 같이 설정 justify-content - 주축 관련 flex-start, flex-end, center, space-between stretch, space-around
align쪽은 죄다 교차축에 관련된? align-item align-self align-content(교차축 방향으로 정렬할때 씀) order 0기본값, 정숫값. flex 아이템의 배치 순서를 바꿀 수가 있다.
데스크탑과 모바일에서 컨텐츠의 순서를 바꿀 수가 있는것이다..흐음..+_+ 레볼루션!
flex 속성 flex-grow(늘이고), flex-shrink(줄이고), flex-basis(기본크기 ) 플렉스 아이템의 크기를 늘이고 줄일수 있다.
단점이 존재, 하위 브라우저에 대응하기가 힘들다. IE11부터 지원… 두둥.. 11에도 이슈도 존재 한다. 강사 블로그에 수정할수 있는 방법이 존재한다. 참고 해봐주시길.
고해상도 기기 이미지 대응하기 SVG
Scalable Vector Graphic
picture 태크와 source 태그 적잘한 상황에서 이미지 호출이 가능해진다.
반응ㅎㅇ 웹과 SEO 검색엔진 최적화
검색이 잘 되게끔 하는 것. 상위에 노출하기 위한 것. 왜 중요한가? 검색엔진이 판단을 한다. m.xxx, xxx 하느의 기업 동일한 콘텐츠 이렇게 되면 검색엔진 판단에 오류가 생김. 검색결과에 제외 될 가능성이 생긴다. 검색엔진이 반응형 웹을 권장한다. 네이버 구글 전부다.
결국은 설계가 중요하고…
원 모어띵
미디어 쿼리의 해상도 분기점은 언제?? 해상도 분기점은 해상도에 따라 이슈가 발생하는 지점이 해상도 분기점이 되어야한다.
두번째 질문 px는 언제 사용할까? 가변성이 필요없을 때 사용. 요소가 픽스되어있을때