웹 프로그래밍 기초162 Header Fixed Header가 다음과 같은 구조를 갖는다고 생각해 보자. ... Header는 스크롤 이벤트에 따라 position이 변경된다. 즉 기존의 HTML 구조에서 독립적인 요소로 변경된다는 것이다. 예를 들어 scrollY 값이 0이 아닌 경우 header 태그에. sticky css를 적용시킨다고 가정해 보자. .sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 11; } header에는 아무런 css를 설정하지 않았다고 하자. 이 결과는 갑자기 Header가 툭 끊어지는 느낌과 하위 콘텐츠가 위로 확 올라가는 느낌을 받는다. 붙을 때도 마찬가지로 header 요소가 위로 휙 끊어져서 붙는 것처럼 보이며 하위 콘텐츠가 아래로 확 내려가는 끊어.. 2023. 4. 17. Grid 과거에 전체적인 HTML 구조를 잡기 위해 css flex를 이용했지만 이번에는 Grid를 사용해보려 한다. 딱 이 정도까지만 우선 이해하자. CSS Grid는 이차원 레이아웃 시스템이로 콘텐츠를 행과 열에 배치할 수 있고, 복잡한 레이아웃을 직접 직관적으로 만들 수 있는 수많은 기능이 존재합니다. 시작하는 것은 다음과 같이 그리드 컨테이너에게 display: grid; 속성을 적용하는 것으로부터 시작됩니다. 만약 아이템이 block 속성의 요소라면 display:grid; 속성으로만으로는 효과가 없습니다. 그렇다면 line 요소들로 적용하면 어떻게 될까요? 자주 사용되는 line 요소는 , , , , , 등이 존재합니다. 인라인 요소 보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, .. 2023. 4. 10. [CSS] Cascade, specificity, inheritance 최근 홈페이지 하나를 만들면서 가장 시간을 많이 보낸 것이 CSS인데, 분명 속성을 공식문서를 보고 적용했는데, 해당 속성이 작동하지 않는 것을 확인할 수 있습니다. 실제 크롬에서 개발자 도구를 통해 확인하면 취소선이 그어져있지만 이에 대한 별도의 로그가 없기 때문에 왜 적용이 안 되는 것인지 확인하기가 어려웠습니다. 백엔드를 주로 다루기 때문에 기본적인 Web 지식 중 하나인 CSS를 소홀히 공부한 것을 반성하고 다시 한 번 기초를 잡아보려고 합니다. CSS는 Cascading Style Sheets를 의미하며, 첫 번째 단어인 Cascade를 이해하는 것은 매우 중요합니다. 우선 속성이 중복된 경우 문제는 동일한 속성의 다른 값을 동일한 요소에 적용하는 두 개의 규칙을 적용하려고 하는 경우 발생합니다.. 2023. 4. 10. DOM (2) DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결괏값을 반환하기 위한 DOM 컬렉션 객체이다. 모두 유사 배열 객체이면서 이 터러블 하다. 따라서 for.. of문으로 순회할 수 있으며 스프레드 문법의 대상이 되어 간단히 배열로 변환이 가능하다. 두 컬렉션 객체의 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 live 객체라는 것이다. HTMLCollection은 언제나 live 객체로 동작한다. 단 NodeList는 대부분의 경우 노드 객체의 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다. 1 2 3 왜 3개가 변경되지 않고 1개가 남아있는지 .. 2022. 3. 12. DOM (1) 브라우저 렌더링 과정을 들어다 보면 HTML 텍스트 문서를 토큰으로 나누어 HTML 문서의 계층적 구조와 정보를 표현하고 이를 제어할 수 있는 DOM API를 제공하는 트리 자료구조를 DOM이라고 한다. 모델이라는 이름에 걸맞게 이는 객체가 아닌 HTML 각 요소를 모아 트리 자료구조 형태로 표현한 것을 DOM이라고 하는데 DOM의 내부를 조금만 들여다보자. 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. Hello 이 div라는 HTML 요소는 시작 태그, 어트리뷰트의 값과 이름, 콘텐츠, 종료 태그로 이루어져 있다. 이러한 요소가 렌더링 엔진에 의해 파싱 되어 DOM을 구성하는 하나의 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML .. 2022. 3. 12. 브라우저의 렌더링 과정 Node.js 등장으로 자바스크립트는 웹 브라우저 이외에 서버 사이드 애플리케이션 개발에도 사용할 수 있는 범용 개발 언어가 되었다. 하지만 가장 많이 사용되는 분야는 여전히 웹 브라우저 환경에서 동작하는 웹 애플리케이션의 클라이언트 사이드이다. 대부분의 프로그래밍 언어는 운영체제를 기반으로 실행되지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저 환경에서 HTML과 CSS와 함께 실행된다. 우리는 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱 하여 렌더링 하는지 알아야 한다. 사용자의 웹 요청에 따라 서버에 HTML, CSS, Javascript, 이미지, 폰트 등 렌더링에 필요한 리소스를 요청하고 응답받는다. 브라우저의 렌더링 엔진은 HTML, CSS를 파.. 2022. 3. 11. [css] z-index hammer.js를 사용해 하이브리드 앱에 img의 확대/축소 기능을 개발했다. 문제가 하나 발생했는데, 이미지가 여러 개 생성되다 보니 확대 시 다른 이미지의 레이어 위치가 확대한 이미지 위에 나오는 현상이 발생했다. ionic-col은 ionic 프레임워크의 태그이고 zoom-pan은 zoom기능을 속성 디렉티브로 정의했다. 화면 레이아웃상 문제라고 판단해 z-index에 대해서 좀 자세히 알아보고 자바스크립트로 해당 DOM객체의 z-index를 이벤트에 따라 조정하면 문제가 해결될 것이라고 판단했다. z-index가 없는 경우 쌓임. 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다름 순서로 아래에서부터 위로 쌓인다. 1. 루트 엘리먼트의 배경과 테두리 2. 자식 엘리먼트들.. 2022. 3. 11. Canvas 보호되어 있는 글 입니다. 2021. 10. 17. 파일 다운로드 회고 나를 3일 동안 괴롭혔던 파일 다운로드의 대한 글을 작성한다. 파일명 한글이슈 다운로드된 콘텐츠의 길이가 잘리는 이슈 FORM을 이용한 POST 요청을 웹서버에서 제한하는 이슈 UTF-8 + BOM 대한 이슈 웹에서 파일을 다운로드하는 방식은 내가 알기론 두 가지로 나누어진다. 하나는 웹서버 프로그램을 통해 디스크 상에 있는 파일 그대로를 다운로드하는 경우와 또 하나는 프로그램에서 임의의 파일 내용을 출력하는 방법으로 다운로드하는 경우이다. 두 가지 모두 HTTP 헤더 값에 따라 브라우저가 그 콘텐츠를 다운로드할지 브라우저에서 보여줄지 결정된다. 웹서버는 실제 파일만을 취급하기 때문에 파일 속성에 따라 헤더가 결정되어 있지만 프로그램에서 임의의 파일 내용을 출력하는 경우는 직접 개발자가 헤더를 설정해야 .. 2021. 9. 8. 주요 웹 서버 Web Server는 Client의 요청에 따라 웹 문서를 전달하는 서비스 프로그램으로 Appache, IIS, Nginx, GWS와 같은 다양한 종류의 웹 서버가 있다. Apache - 아파치 재단이 주도하는 대표적인 오픈소스 웹 서버이다. 상당히 사용률이 큰 편이며 커뮤니티도 넓은 편이라고 생각한다. 사용자의 요청에 따라 별도의 프로세스 혹은 스레드를 생성하여 처리하는 것이 특징이며, Loadable Module 기능을 제공하여 서버의 동작을 확장할 수 있다. - 리눅스, 윈도우, macOS 등 다양한 운영체제에 설치하여 사용할 수 있다 - Apache 1.x는 프로세스 기반으로 동작하여 사용자 요청마다 하나의 프로세스가 담당하였다. 그렇기에 동시 접속자 수가 증가하면, 시스템 성능에 영향을 준다. .. 2021. 7. 6. 이전 1 2 3 4 ··· 17 다음
