프론트엔드
브라우저 웹페이지 렌더링
🎯 HTML 페이지 렌더링 단계: DOM의 구성 CSSOM 구축 렌더 트리의 구성 레이아웃 단계 페인팅 단계 🎯 DOM 구축 브라우저 binary stream format는 기본적으로 응답 헤더가 있는 텍스트 파일인 의 서버로부터 HTML 문서를 받습니다 Content-Type = text/html; charset=UTF-8. 브라우저는 HTML 문서를 읽을 때 HTML 요소를 만날 때마다 Node 라는 JS 객체를 생성합니다 . 결국 모든 html 요소는 Node 로 변환됩니다 . 브라우저가 HTML 문서에서 노드를 만든 후에는 이러한 노드 개체의 "나무와 같은" 구조를 만들어야 합니다. Document Object Model 은 웹 페이지를 효율적으로 렌더링하고 개발자가 다양한 목적을 위해 DOM 요..
웹 페이지 로딩 시 로딩 이미지 보여주기
1. 로딩 이미지 https://preloaders.net/ 무료 이미지사이트 2. 로딩 이미지 적용하기 공통으로 쓰는 페이지는 이름을 common 으로 사용 하고 있습니다. 파일로 따로두지 않고 에 넣어 사용하셔도 돼요! // 윈도우가 다 load 되고 나서 id="load" 인 항목을 감춰줍니다. // div 는 전체 화면을 반투명하게 보여주는 역할을 합니다. CSS #load { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.8; background: white; z-index: 99; text-align: center; } #load > img { position: absolute; to..
onclick 링크 (새창/팝업/현재창/프레임)
1. 현재페이지에 부를때 button 2. 새 창에 열때 button 3. 팝업으로 열기 (주소,팝업창이름,옵션) button 4. 상위 프레임에 부를때 button 5. 프레임 지정 링크 button
부트스트랩(Bootstrap) 캐러셀(Carousel) 자동 슬라이드 이미지 사용법
Previous Next 위 예시 코드에서 img태그 링크만 변경해주면 기본 캐러셀 사용법 끝입니다.
Css 레이아웃에서 중요한 display: flex(Flexible Box) 사용법
1. 부모 요소인 container와 자식 요소인 item이 있습니다. 컨테이너가 Flex의 영향을 받는 공간이라고 생각하시면 됩니다. 1 2 3 2. container에는 diplay, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items 등의 속성을 사용할 수 있습니다. 속성 의미 display : flex flex container를 정의 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 flex-flow flex-direction와 flex-wrap의 단축 속성 justify-content 주 축(main..
<picture> 반응형 홈페이지에 배너를 적용할때 필요한 Css 태그
태그는 웹과 모바일에서 배너를 해상도 별로 다른 배너 이미지를 적용 시킬 때 사용합니다 예시로는 midia에 "max-width: ??px" 이나 "min-width: ??px"로 원하시는 넓이 값마다 변하게 설정을 하고srcset에 변경할 이미지 경로를 설정해주시면 됩니다.기본값은 img태그 그대로 쓰시면 됩니다