웹킷

반응형 웹 모바일 버전(360px)까지 완료했다.
잘 나오는 듯 했으나

문제

post-cont {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• 리스트의 게시글의 내용을 두 줄 이 후 말줄임 처리하도록 하는 코드를 작성했다.

• pc 와 AOS 환경에서는 정상적으로 작동했으나 아이폰(IOS) 에서는 적용되지 않고 내용물이 밑으로 흘러내렸다.

• 찾아 보니 webkit 엔진을 사용하지 않는 브라우저가 있고 해당 브라우저에서는 코드가 무시되기 때문에, 그런 상황을 대비한 폴백 처리(대비책)를 해주어야 한다고 한다.

• -webkit-line-clamp: 값이 지정되어있어도, 그보다 큰 height값이 요소에 지정되어있다면 나머지 텍스트도 노출되어버리는 것이다.

• 이를 방지하기 위해서는 line-height 값을 설정하고, 그에 비례하는 height 값을 주어야 한다.

웹킷 엔진이란?

• 웹킷(WebKit)은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크이다.
• Mac OS 10의 사파리 웹 브라우저 엔진으로 사용하기 위해 컨커러 브라우저의 KHTML 소프트웨어 라이브러리에서 가져온 것이었으나 지금은 옴니웹, 시이라, 아로라, 미도리, 유즈블, iCab, 어도비 통합 런타임, 휴대 전화(아이폰 포함), 노키아의 Series 60 브라우저, 구글의 안드로이드 플랫폼 에 사용되고 있다.
• 한편 웹킷은 트롤테크(Trolltech)의 Qt 4.4에 기본 포함되어 있지만 KDE 프레임워크에 기반을 두는 KDE 프로젝트는 머지 않아 KHTML의 초기 버전을 사용할 것임을 밝혔다.
• Acid2 테스트를 통과하였으며 2008년 3월에는 웹킷 최신버전이 Acid3 테스트에서 100점 만점을 받았다.

+접두어로 써줘야 할 때가 있는 웹킷

css 속성 중에 접두어를 붙여야 하는 속성이 있다 이 때 -webkit-은 크롬과 사파리가 채용한 웹 브라우저 엔진 이름이다.

• -webkit- : 구글, 사파리
• -mox- : 파리어폭스
• -ms- : 익스플로러
• -o- : 오페라 하우스

해결

$html-fs: 9px;
.post-cont {
  height: calc((#{$html-fs}*1.5) * 3.2);
}

• 해당 코드를 추가하여 텍스트 박스 영역 폰트사이즈(1.5rem) 에 (line-height*2) 를 곱하여 넓이를 반응형으로 지정해주었다.
• display: -webkit-box -> block 으로 바꾸니 해결됐다.

ios 에서 -webkit- 엔진이 왜 적용되지 않는 거지?

ps

marked 를 사용할 시 텍스트마다 각각 다른 태그가 지정되어 라인 인식이 힘들어진다. marked.js 를 풀어주었고 md 안에 작성된 text 그대로 출력되도록 했다. 그리고 html 태그로 렌더링 되는 문제를 해결하기 위해 replace() 함수로 "<" 와 ">" 를 각각 &lt &gt 로 치환하여 텍스트를 출력시켰다.