css 썸네일형 리스트형 [CSS] 특정 아이폰 사파리 브라우저 text-overflow:ellipsis 불가 현상 작업 중 발견 된 현상인데...특정 아이폰 사파리 브라우저에서만 text-overflow:ellipsis 가 적용되지 않는 문제가 발생했다...맥에다 아이폰을 연결해서 디버깅해봐도... 아니 대체 왜!!! 왜 특정 아이폰만 그러는지!!! 구글링 해본 결과 display 속성부터 position 속성까지 변경하는 방법들이 다양했는데 일단 내가 사용한 방법은 overflow:hidden 이 아닌 overflow:auto를 적용하는 것 이었다. 특이하게도 딱 overflow:auto로 값을 변경하니 text-overflow:ellipsis가 적용되었는데.... 아직도 원인은 모르겠다... 다만 작업중인 부분이 모바일 전용이고 해당 부분 위에 가상선택자로 투명한 박스를 올려놔서 사용자가 스와이프해도 해당 글 부.. 더보기 [CSS] list-style 바꾸기 - list-style? 웹 퍼블리싱을 하다 보면 리스트 부분을 작성할 때 ul, ol, dl과 같은 엘리먼트를 사용하게 됩니다. 이때 각각의 태그들이 기본적으로 보여주는 list-style을 보면 다음과 같습니다. 하지만 기본 list-style들은 원형의 도트 스타일만 지원해 주고 색상 또한 li의 색상을 이어받아 사용하기 때문에 커스텀이 필요한 상황이 많이 발생합니다. - 가상요소를 통한 스타일 제가 가장 자주 쓰던 방법이면서 list-style을 다양한 크기와 모양으로 만들 수 있는 방법입니다. 먼저 변경이 필요한 해당 list-style을 none으로 지정해준 후 li 엘리먼트의 position 속성을 relative로 변경합니다. 그 후 해당 엘리먼트에 가상요소인 ::before 나 ::aft.. 더보기 [CSS] @media query 가로·세로 적용 stylesheet 반응형 작업중에 고민되는 것 중 하나가 모바일 기기에서의 가로·세로 반응형 작업이다. 머릿속으로는 있을거야... 하고 생각만해놓고 1도 찾아보지 않은 내가 밉다... 모바일기기의 가로 세로를 체크하는 방식은 반응형 작업을 할 때 처럼 미디어쿼리를 사용한다. /* 세로 모드: Portrait(포트레이트) 모드 */ /* 가로 모드: Landscape(랜드스케이프) 모드 */ @media (orientation: portrait) { /* Portrait 모드일 때 적용할 CSS */ } @media (orientation: landscape) { /* Landscape 모드일 때 적용할 CSS */ } 사실 다른 방법으로는 javaScript를 이용하여 페이지에 접속 할 때 혹은 디바이.. 더보기 [CSS] 모바일 기기에서 button touch 시 효과 제거 - 웹 개발 시 button 앨리먼트를 작성 후 모바일 기기에서 터치를 했을 경우 파란색 background가 생기는 것을 확인할 수 있다. 이 때 아래의 코드를 사용하여 해당 background를 제거해줄 수 있다. -webkit-tap-highlight-color : transparent !important; 더보기 [정보] 브라우저별 호환성 체크 사이트 caniuse 웹페이지 제작 중 각 브라우저별 호환성 체크가 필요할 때 사용하면 좋은 사이트입니다. 사이트 사용법은 매우 간단합니다. 해당 사이트에 들어가면 위의 사진처럼 나오는데 css속성 값을 입력하시면 (분명 다른 것도 가능할 텐데 정확한 사용법은 모르겠습니다... ㅠ) 아래의 사진처럼 각 브라우저별 버전별 호환성 여부가 표시됩니다. caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 더보기 이전 1 다음
