전체 글63 프론트엔드 개발 팁 모음 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. 프론트엔드 개발 팁 모음 HTML(2) FOIT(Flash of Invisible Text)와 폰트 로딩시 폰트로딩 최적화 방법css의 font-display 속성 활용swap: 폰트 로딩 동안 시스템 폰트를 사용하고, 폰트가 로드되면 즉시 원래 폰트로 교체합니다. 가장 일반적이고 사용하기 쉬운 방법입니다.fallback: 100ms 동안 텍스트를 숨기고, 3초 이내에 폰트가 로드되면 원래 폰트로 적용합니다. FOIT를 완전히 방지할 수 있지만, 짧은 지연 시간이 발생할 수 있습니다.opt-in: 폰트 로딩이 완료될 때까지 텍스트를 숨깁니다. FOIT를 완벽하게 방지하지만, 사용자에게 가장 오랜 지연 시간을 초래합니다.Font Subsetting사용되는 글자만 포함된 폰트 파일을 로드하여 로딩 속도를 향상시킬 수 있습니다. 특히 다양한 언어를.. 2024. 4. 25. 프론트엔드 개발 팁 모음 HTML(1) doctype 명시하기브라우저 렌더링 모드 설정최신 브라우저는 HTML5를 기본 렌더링 모드로 사용하기 때문에, DOCTYPE 선언이 없어도 대부분의 경우 정상적으로 작동합니다. doctype을 명시하여 이전 버전의 브라우저와의 호환성을 유지하고, 문서가 정확하게 렌더링되도록 합니다.문서 유효성 검사코드 오류를 방지하고 웹 표준을 준수하는 데 도움을 줍니다.문서 구조 파악브라우저가 문서 구조를 빠르게 파악하도록 돕습니다.주의 사항DOCTYPE 선언은 문서의 최상단에 한 번만 선언해야 합니다.선언 시 대소문자를 구분하지 않아도 됩니다.HTML5 이후 버전에서는 선언만 사용하며, 이전 버전의 형식은 더 이상 사용되지 않습니다.권장되지 않는 태그 사용을 피하세요 (굵게 표시): 과거에는 텍스트를 강조하기 위.. 2024. 4. 25. 티스토리에 마크다운 스타일 게시물 작성하기 필요한 것 티스토리 블로그 계정 티스토리에 마크다운 스타일을 적용해줄 CSS 파일 마크 다운 작성용 에디터 마크다운 파일을 HTML로 바꾸어 줄 편집기 CSS 파일 다운받기 https://github.com/sindresorhus/github-markdown-css CSS 파일을 티스토리에 적용하기 관리페이지로 이동 내 프로필의 ‘관리’ 탭에 들어가거나 https://본인의아이디.tistory.com/manage 에 접속 화면 왼쪽 꾸미기 탭의 스킨 편집을 클릭 우측 상단 HTML 편집을 클릭 파일 업로드를 클릭하고, 아래쪽의 추가 버튼을 통해 다운 받았던 css를 업로드한다. 저장. html 태그 안에 아래 코드를 붙여 넣기 한다. 저장. 게시글을 마크다운으로 작성 여러가지 마크다운 작성기가 있는데, .. 2018. 9. 12. 8강. 메모리 관리 8강. Memory Management 메모리란? 주소를 통해 접근하는 객체로 Main Memory는 주 기억장치를 의미한다. 주소의 종류 Logical Address(Virtual Address) 프로세스마다 독립적으로 갖는 공간. 0번지부터 시작한다. CPU가 보는 주소이다. Physical Address 메모리에 실제로 올라가는 위치 Symbolic Address 프로그래밍을 할 때 변수를 지정하면 변수의 이름을 통해 값에 접근할 수 있는 방법. 그 변수를 Symbolic Address라고 한다. 변수가 컴파일되어 숫자 주소가 만들어지고 물리적 메모리와 매핑되는것을 주소바인딩이라고 한다. 주소 바인딩. Address Binding 주소바인딩이란? Data의 주소를 결정하는 것, 물리적 메모리의 어느.. 2018. 9. 12. 이전 1 2 3 4 ··· 11 다음 반응형