안녕하세요 표준개발2팀 황혜경입니다.

 

웹표준개발2팀은 현재 각 파견지에 있기 때문에 내팀 같은~ 내팀 아닌~ 내팀 같은 2팀이랍니다.

그런 2팀이 한자리에 모여 HCRP를 진행하였는데요.

지난 8월 20일 진행된 HCRP를 통해 얻은 의견을 정리하였습니다

 

HCRP란?

하이브랩만의 코드 리뷰 프로그램으로 서로의 코드를 리뷰하며, 의견을 통해 코드 개선 및 역량발전을 위한 프로그램입니다.

 

이번 HCRP에 발표주제는 모바일 웹&앱 개편을 진행하며 발생된 이슈입니다.

 

목차.

1.     그라데이션 그래프 그리기.

2.     유동적인 이미지 비율.

3.     컨텐츠 상하정렬.

 

1.  그라데이션 그래프 그리기

많은 쇼핑웹에서 보여지는 UI 중 수량을 편하게 보여주는 효과로 그래프를 사용하는데요.

이번 개편에서는 라운드 그라데이션 그래프를 표현했습니다.

구현방식

in_l 왼쪽 기준으로 오른쪽 영역을 채우는 첫번째 이미지.

in_r 오른쪽 기준으로 왼쪽 영역을 채우는 두번째 이미지.

 

 

 

이미지 hover하면 구현됨.

붉은 영역 – 보이지 않는 부분. 하얀 영역–
실제 노출되는 부분.

 

이슈발생

단색이미지일경우 이슈가 없지만 그라데이션이기 때문에 정확한 색상 표현이 안됨.

 

 

 

해결방안

in_rote 전체 채워진 이미지를 제작하여

첫번째 이미지가 회전을 180도 절반을 돌았을때
그라데이션 이미지가 오른쪽 이미지의 회전률에 따라
함께 회전하면 그라데이션이 표현됨.

 

회전값 구하는 방식. -> 왼쪽 이미지 회전 값 + 오른쪽 이미지 회전 값 = 전체 이미지 회전 값.

 

 

 

테스트 코드

두개의 이미지로만 구현하였을때.

세개의 이미지로 구현하였을때.

2. 유동적인 이미지 비율

 

데이터 이미지는 정비율이며, 기기별로 화면과 이미지가 리사이즈가 되어야 하는 경우입니다.

실제 적용된 CSS 코드

padding-top 속성으로 부모의 width 값을 상속받아 자신의 height 값을 지정함.

자신의 자식 태그는 높이에 영향을 안받도록 position:absolute 함.

 

장점.

데이터 이미지의 크기가 유동적일 경우 사용. 데이터 이미지의 비율이 다르기 때문에 이 방법을 사용함.

 

 

의견1

이미지를 기준으로 노출영역을 margin으로 처리. 

 

장점.

이미지를 기준하여 유동적인 화면에 적합.

 

 

의견2

 

vw속성

크로스 테스트 필요. 

<meta name=”viewport” > viewport 를 기반으로 하는 새로운 css 단위. 

정확한 속성 설명은 아래 url 참고.

http://caniuse.com/#search=vw
http://css-tricks.com/viewport-sized-typography/

 

 

3. 컨텐츠 상하정렬.

높이값이 유동적이며 박스 안 컨텐츠가 상하로 자동정렬하는 방식입니다.

 

 

의견1

모바일 버젼  

:before 선택자 사용하여 상하 정렬.

IE7 PC 대응 버젼 

:before 선택자는 inline태그(span, strong…. 등) 사용.

p 대신 inline 태그 사용. 어쩔수 없이 block 태그를 사용할 시 핵 사용하여야 함. 

의견2

모바일 버젼

-webkit-box css 속성 사용하여 상하 정렬.

 

간단한 TIP

1. 자동완성 레이어 높이값지정하기

텍스트 입력시 레이어가 열리는 UI.

부모에 height 값과 동일하게 position top 값 지정.
부모의 relative를 기준으로 자식영역의 높이값 계산하여 top 지정.
높이값이 변경될경우 top 을 재 지정필요하여 개선함.

 

 

2. 우측 말줄임

float 와 overflow를 이용하여 말줄임처리.

주의! float 속성을 가진 태그가 먼저 위치해야함.

 

마치며…

HCRP를 통해 코드퀄리티를 높일수 있었던 좋은 시간이였습니다. 

다음 HCRP 도 기대가 되네요~ 다음에 뵈요 2팀  

감사합니다.