본문 바로가기

CSS3

프론트엔드 개발 팁 모음 CSS(2) 1. 태그의 너비 관리하는 방법table { width: 400px; /* 100%; */ table-layout: fixed; /* 고정 너비 레이아웃 */ table-layout: auto; /* 자동 너비 레이아웃 (기본값) */}table th, td { width: 100px; /* 25%; */} 2. CSS fallback특정 브라우저나 버전에서 지원하지 않는 CSS 속성이나 값을 대체할 수 있는 방법을 제공합니다.벤더 프리픽스(Vendor Prefixes):아직 표준화되지 않은 기능을 특정 브라우저에서 사용할 수 있도록 하는 방법입니다.예를 들어, webkit-, moz-, ms-, o- 등의 벤더 프리픽스를 속성 앞에 붙여 사용합니다.display: -webkit-flex; di.. 2024. 4. 25.
프론트엔드 개발 팁 모음 CSS(1) CSS @import 사용을 피하세요@import선언을 찾기 위해 이 선언이 포함된 CSS파일을 먼저 다운로드해야 하기 때문에 Request chain이 발생하여 처음 렌더링 시간을 지연 시킵니다. 방법으로 대체할 수 있습니다.CSS 전처리기(SASS, LESS등)를 사용한다면 @import구문을 사용할 때 별개의 더 모듈화된 소스파일을 허용하므로 Request Chain 패널티를 방지합니다.자식요소에서 current color 속성을 사용해서 코드 반복을 줄이고 유지보수성을 높일 수 있습니다. This is a child element. This is a grandchild element. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  This .. 2024. 4. 25.
5. CSS 속성 CSS 속성 display(block, inline, inline-block)display 속성이 block, inline-block이면 블록을 쌓듯이 위에서 아래로 쌓이듯이 채워진다.display 속성이 inline 이면 오른쪽으로 흐른다. , , , 등은 기본 속성이 inline이다. position (static, absolute, relative, fixed)postion 속성은 기본이 static이다. 순서되로 배치된다.absolute 속성이면 기준점에 따라서 위치한다. 기준점은 상위 엘리먼트가 static 이 아닌 것을 기준으로 한다. relative 속성은 원래 자기가 위치해야 할 곳을 기준으로 한다. (top, left, right, bottm)fixed는 viewport(전체화면) 왼쪽,.. 2018. 6. 25.
반응형

티스토리툴바