CSS9 [css 활용] tbody scroll 테이블 만들기 디자이너에게 시안을 받다보면, 생긴건 table인데 tbody 영역만 스크롤이 되게끔 시안이 올 때가 있다. 자체 소스가 잘 짜여져 있는 회사라면, 프레임워크나 내부 grid시스템, 기타 js 등으로 해결이 원만하지만, 그렇지 않은 경우에 어떻게 해야 할 지 막막할 때가 있다. thead 영역까지 스크롤이라면, div로 테이블을 감싸고 높이값을 줘서 overflow-y:scroll 등으로 손쉽게 해결하지만 thead는 고정이고 tbody만 스크롤 될 때 어떻게 짤 지 고민을 한번쯤은 해보았을 것 같다. 서두에 말한 방법이 없다면, 편법을 활용해 이렇게 짤 수도 있다. 1. HTML 분류1분류2분류3 분류4분류5 내용1내용2내용3내용4내용5 ... ... ... 내용1내용2내용3내용4내용5 토탈1토탈2토탈.. 2020. 2. 3. [css] 미디어쿼리 분기점 @charset "UTF-8"; /* Mobile Device (가로폭 767px 이하) */ @media all and (max-width:767px) { } /* Tablet (가로폭 768px 이상, 1023px 이하) */ @media all and (min-width:768px) and (max-width:1023px) { /* 브라우저 가로폭이 768~1023px일때 적용될 css (태블릿) */ } /* PC Desktop (가로폭 1024 이상) */ @media all and (min-width:1024px) { } 기본적인 미디어쿼리 분기점이다. 반응형 페이지의 경우 좀더 세분화되어 나눠지긴 하지만, 기본적으로 Mobile/Tablet/PC 기준으로 위와같이 나뉜다. 2019. 12. 26. [css 이론 및 기본] box-sizing box-sizing 속성은 해당 컨텐츠의 크기의 기준을 어떤것으로 잡을것인지 정하는 속성이다. [box-sizing의 값] 1. box-sizing: content-box (default, 콘텐트 영역을 기준으로 크기를 정한다.) width:500px, height:100px를 주고 padding:20px를 주었을 때, padding값을 포함하여 width:540px, height:140px이 된다. 2. box-sizing: border-box (테두리를 기준으로 크기를 정한다.) 테두리를 포함한 크기를 지정하는 border-box는, 여백을 포함하여 크기를 정하게 된다. border:1px solid #colorCode 와 같은 border나, padding값을 포함하여 크기를 정할 때 유용하게 쓰인.. 2019. 12. 26. [css 활용] 텍스트/컨텐츠 숨김처리 흔히들 말하는 offscreen class 혹은 hidden 클래스, caption 숨김처리 등을 실무에서 많이 사용하고 있다. 숨기게 만드는 거야 어렵지 않지만, 접근성을 고려한다면 이게 맞는건지, 제대로 쓰고있는지 모르고 사용하는 경우도 많다. IR기법을 사용하여 숨김처리를 할 때에, 보통 이런 방식을 많이 사용한다. .offscreen{ position:absolute; top:-9999px; left:-9999px; text-indent:-9999px; width:1px; height:1px; } 하지만 위와같은 방법은 접근성에서 문제를 일으킨다. text-indent의 경우, 앵커태그()나 html5에서의 대화형 요소들 에서 초점을 document 바깥에서 잡아버리는 문제점이 있다. 보이지 않는.. 2019. 12. 20. [css 활용] input type="search" 커스텀(x버튼 없애기) 퍼블리싱을 하다보면, input의 다양한 타입을 사용하게 된다. '검색' 버튼을 커스텀 할 때 우리는 위와같이 넣게 되는데, 화면을 확인해 보면 아래 그림처럼 파란색 x버튼이 생기게 된다. (기본 input은 너무 안이뻐서 x버튼을 제외하고 약간 커스텀을 했습니다.) 브라우저의 x버튼을 없애기 위해, css로 안보이게 처리를 해 주면 된다. input::-ms-clear, input::-ms-reveal{ display:none;width:0;height:0; } input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-resul.. 2019. 11. 28. [css] 벤더 프리픽스(vendor prefix) [vendor prefix?] 벤더 프리픽스(vendor prefix)란? css3의 기능은 웹표준이 아니였다. 때문에 어떠한 속성을 주었을 때에, 브라우저마다 원하는 화면을 출력하는데 제한적이다. 벤더 프리픽스는 새로운 기능을 모두 제공해야 할 때 변환 효과를 적용하는 스타일 시트 라고 이해하는게 빠를 수 있다. 하지만 현대에 와서는 브라우저의 버전에 올라가면서, 많은 스타일시트의 속성들이 표준으로 정의되면서 vendor prefix를 사용하지 않아도 되지만, 구형 브라우저(하위 브라우저)를 맞춰주기 위해 아직까지도 vendor prefix가 사용된다. [브라우저별 벤더 프리픽스 사용법] Browser Vendor Prefix IE or Edge -ms- Chrome -webkit- Firefox -m.. 2019. 11. 25. 이전 1 2 다음
