728x90 반응형 css12 웹, HTML/CSS 예상 면접 질문 정리 1. 브라우저 작동 원리 브라우저는 HTML 문서를 가져와 파싱 -> DOM(Document Object Model)을 생성 -> CSS 파일을 로드하여 스타일을 적용 -> JavaScript 코드 실행 -> DOM 조작 및 이벤트 처리 -> 렌더링 엔진을 통해 레이아웃, 페인팅 -> 화면에 컨텐츠가 표시 HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유 JavaScript 실행이 렌더링 프로세스를 차단하기 때문 브라우저는 JavaScript 실행이 완료될 때까지 렌더링을 중단하고, 실행 후 렌더링을 재개 2. CSR / SSR CSR (Client-Side Rendering) 브라우저에서 JavaScript를 이용해 동적으로 컨텐츠를 렌더링하는 방식 초기 로딩 시 서버에서 HTM.. 2023. 8. 21. 알아두면 좋은 Parallax Scrolling Parallax Scrolling에 대해 알아보자! Parallax Scrolling 레이어별 스크롤 속도를 다르게 해 입체감을 주는 기법으로 주로 게임이나 애니메이션에서 사용됐다. JS와 CSS를 활용해 만들 수 있다. 스크롤 정도에 따라 요소들이 다른 속도로 움직이는 것을 의미한다. Parallax Scrolling 또한 이벤트리스너를 사용해 코드를 구성할 수 있다. JavaScript Window Object 브라우저의 윈도우 또는 탭에 관련된 정보를 담고 있는 전역 객체 2023.02.23 - [TIL] - 알아야 하는 전역 객체 알아야 하는 전역 객체 전역 객체에 대해 알아보자! 전역 객체 코드가 실행되기 이전 단계에 JS엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며 어떤 객체에도 .. 2023. 4. 9. 조금 쉬운 CSS - 베지에 곡선 베지에 곡선에 대해 알아보자! 베지에 곡선 컴퓨터 그래픽 등에서 사용되는 매개변수 곡선 부드러운 곡선, 폰트, 애니메이션 부터 차체 곡선 디자인까지 많은 용도로 이용 cubic-bezier 베지에 곡선을 정의하는 함수 4개의 포인트(P0, P1, P2, P3)로 정의한다. animation-timing-function: cubic-bezier(.21, .89, .87, .28) ease 점점 빨라짐 -> 느려짐 cubic-bezier(0.25, 0.1, 0.25, 1.0) ease-in 천천히 -> 점점 빨라짐 cubic-bezier(0.42, 0, 1.0, 1.0) ease-out 빨리 -> 점점 느려짐 cubic-bezier(0, 0, 0.58, 1.0) ease-in-out 천천히 -> 빨라짐 ->.. 2023. 4. 3. 아주 쉬운 CSS - position CSS position에 대해 알아보자! CSS position 문서 상에 요소를 배치하는 방법 static 기본값으로 임의 위치 설정 불가능 요소를 일반적인 문서 흐름에 따라 배치 top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. relative 일반적인 문서 흐름에 따라 배치, 원래 있던 위치를 기준으로 위치를 설정한다. 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 오프셋은 다른 요소에는 영향을 주지 않는다. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성 absolute 가장 가까운 위치 지정 조상 요소를 기준으로 배치.. 2023. 3. 27. 아주 쉬운 CSS - grid CSS Grid에 대해 알아보자! CSS grid 세로 열과 가로 행을 기준으로 요소를 정렬하는 레이아웃 레이아웃 grid-template-rows 행의 형태 정의 ex) grid-template-rows: repeat(3, 1fr); grid-template-columns 열의 형태 정의 ex) grid-template-columns: repeat(3, 1fr); 간격 gap ex) grid-gap: 0(row) 10px(column); 요소 형태 정의 grid-column-start / end ex) grid-column-start: auto; ex) grid-column-end: 2; grid-row-start / end ex) grid-row-start: span 2; ex) grid-row-en.. 2023. 3. 26. 알아두면 좋은 JS 파싱, async, defer JS 파싱과 async, defer에 대해 알아보자! JS 파싱에 의한 HTML 파싱 중단 2023.03.22 - [TIL] - 중요한 파싱과 생성 및 실행 중요한 파싱과 생성 및 실행 파싱과 각 OM 생성 및 실행에 대해 알아보자! HTML 파싱과 DOM(Document Object Model) 생성 HTML 문서는 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 브라우저에 시각적인 픽 s-saramnim.tistory.com 위 글에서 본 바와 같이 렌더링 엔진과 JS 엔진은 병렬적으로 파싱을 실행하지 않고 직렬적으로 파싱을 수행하며, 브라우저는 동기적으로, 위에서 아래 방향으로 순차적으로 HTML, CSS, JS를 파싱하고 실행한다. 즉, script 태그의 위치에 따라 HT.. 2023. 3. 22. 중요한 파싱과 생성 및 실행 파싱과 각 OM 생성 및 실행에 대해 알아보자! HTML 파싱과 DOM(Document Object Model) 생성 HTML 문서는 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 브라우저에 시각적인 픽셀로 렌더링할 수 있다. => 렌더링 엔진은 HTML 문서를 파싱해 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. 이는 다음의 과정을 따른다. 서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답 브라우저는 서버가 응답한 HTML 문서를 바이트 형태로 응답받는다. 응답된 HTML 문서는 지정된 인코딩 방식을 기준으로 문자열로 변환, 인코딩 방식은 응답 헤더에 담겨 응답 문자열로 변환된 HTML 문서를 읽어 들여 토큰(문법적 의미를 갖는 코드의 최소 단위)으로 분해.. 2023. 3. 22. 아주 쉬운 CSS - Flex Flex에 대해 알아보자! Flex 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 Flex 속성 종류 grow shrink basis direction wrap flow flex flex 속성 자체는 flex-grow, flex-shrink, flex-basis의 단축 속성이다. .div { display: flex; flex: 1 1 100px; } flex를 사용하기 위해선 display: flex를 부모 영역에 선언해줘야 한다. grow 할당 가능한 공간의 정도 .div { flex-grow: 0; } 형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간 형제 아이템들이 다른 flex-grow 값 = 다른 공간 shrink 설정된 값에 따라 .. 2023. 2. 24. 아주 쉬운 CSS - 미디어 쿼리 미디어쿼리에 대해 알아보자! 미디어쿼리 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 반응형 웹사이트를 만들 때 사용되는 CSS 구문 .hello{ width: 10px; height:10px; background-color:black; } @media (min-width: 320px) and (max-width:20px) { .hello{ width:20px; height:20px; background-color:white; border: pink solid 10px; } #intro h1 a{ text-align:center; padding: 10px 10px 0 0 /* 시계방향: 상, 우, 하, 좌 */ } min-width와 max-width로 브라우저의 가로폭 설정 : .. 2023. 2. 24. 이전 1 2 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
